NEW Паровые панели, латунные детали и современный UX

Создавай интерфейсы
в стиле steampunk
без лишнего шума

Steamforge — концепт лендинга: тёмная база, медь/латунь, мягкие свечения, “механика” в деталях. Подходит под продукт, агентство или личный бренд.

Запустить прототип Смотреть возможности
Собран в одном HTML
Без внешних зависимостей
Мягкая анимация “механики”

Возможности

Steampunk — это не “перегруз деталями”, а аккуратные акценты: металл, механика, свет и воздух.

Модульные блоки

Секции и карточки легко переставлять: структура остаётся “современной”, а стиль — атмосферным.

Акценты из меди

Градиенты и подсветки — дозировано. Они добавляют “латунь”, не превращая UI в музей.

“Механика” в micro-motion

Лёгкие вращения шестерёнок и “пар” — только как фон. Есть режим reduced-motion.

Читаемость прежде всего

Контраст и типографика — как в современном продукте. Стиль — сверху, а не вместо UX.

Готово к адаптации

Сетка 12 колонок и аккуратные брейкпоинты: быстро подстроишь под любой контент.

Один файл

Только HTML + CSS внутри. Можно кинуть на GitHub Pages / Netlify и сразу показывать.

Как это работает

Идея простая: современная структура + steampunk-акценты. Слой “металл/пар” — декоративный.

Сборка секций

Каждый блок — это карточка или панель с тонкой рамкой, мягким glow и минимальными иллюстрациями (SVG).

  • 12-колоночная сетка Удобно расширять: фичи, кейсы, отзывы, формы.
  • Слой декора Градиенты и “пар” не ломают контент и доступность.
  • Reduced motion Если система просит — анимации автоматически отключаются.

Стилизация под продукт

Переименуй “Steamforge” и заменяй тексты — визуальный каркас уже готов.

  • Палитра Подстрой --copper/--brass/--amber в :root для своего бренда.
  • Секции Добавь “Отзывы” или “Кейсы” — копируй карточки, меняй контент.
  • Компонентность Классы уже “как компоненты”: btn/card/panel/price — легко портировать в фреймворк.

Тарифы

Демо-прайсинг для лендинга. Можно заменить на реальные планы, лид-магнит или CTA на консультацию.

Brass для старта
€9/мес

Базовые секции + палитра + адаптив. Отлично как шаблон для MVP.

Подробнее Выбрать
Copper самый популярный
€19/мес

Панели, “гейджи”, micro-motion и готовая сетка для расширения под контент.

Что внутри Подключить
Steamworks для команды
€49/мес

Для проектов: дополнительные страницы, больше блоков, строгий дизайн-токен-подход.

Процесс Связаться

FAQ

Частые вопросы — чтобы лендинг выглядел полноценным. Замени ответы под свой продукт.

Можно без JS?

Да. Тут только HTML + CSS. Если захочешь — добавишь форму, аналитику, интерактив или якорные анимации.

  • Быстрый старт Скопировал файл — открыл в браузере — готово.
  • Чистая структура Потом легко вынести в компоненты (Vue/React) без боли.

Как сделать “ещё более steampunk”?

Добавляй детали очень дозировано: фактуру, шильдики, псевдо-заклёпки. Главное — не потерять читаемость.

  • Текстуры Можно добавить лёгкий noise на фон (уже есть) или “металл” на карточки.
  • Шильдики Плашки-таблички с “серийными номерами” или “патентами” в хедере секций.
  • Иконки SVG можно заменить на более “винтажные” контуры — но держи единую толщину линий.
Наверх