Что вы получите
- Готовый первый экран одним HTML-файлом: шапка, герой, чипы шагов и бегущая строка
- Типизированный блок React и Tailwind с переиспользуемым компонентом поля частиц
- Движок частиц без библиотек с формами сферы, кольца, волны, спирали и изображения
- Токены светлой и тёмной темы на тёплой бумаге и проверка цветов вне палитры
- По желанию: силуэт продукта от PopNow для частиц, с ценой до запуска
Подходит для
- Лендинги SaaS, приложений и инструментов
- Запуски, которые можно рассказать тремя короткими идеями
- Замена статичной картинки героя на мягкое движение
Не подходит для
- Тёмные, энергичные бренды
- Длинные истории с прокруткой
- Страницы, которые уже открываются большим фото или видео
Как пользоваться
В Claude или ChatGPT
Используйте навык PopNow «Герой с анимацией частиц» (particle-animation-hero) для этой задачи: Добавьте герой на мой сайт на Next.js для трекера привычек: «Маленькие шаги, каждый день», идеи Track, Stack, Celebrate.
В агенте для кода
/popnow-particle-animation-hero Добавьте герой на мой сайт на Next.js для трекера привычек: «Маленькие шаги, каждый день», идеи Track, Stack, Celebrate.
Потом попробуйте
Пусть третья идея складывается в наш логотип-лист из public/leaf.png.
Дайте и простую HTML-версию для страницы листа ожидания.
Что подготовить
- Заголовок, одно-два предложения и две ссылки
- Три коротких идеи с подписью в одну строку у каждой
- По желанию: прозрачный PNG вашего знака или продукта либо ключ API PopNow
Похожие навыки
Смотреть все →3D-конструктор аватаров
+3Соберите милого плюшевого 3D-персонажа прямо в браузере и сохраните его как прозрачный PNG или 3D-страницу.
Календарная тепловая карта активности
+3Год ежедневной активности в виде календарной сетки с заливкой — с сериями, итогами и управлением с клавиатуры.
Лендинг SaaS с ИИ
+3Песочный фон, тонкие направляющие и штриховка вокруг живой канбан-доски, где ассистент планирует задачи.
Анимированный первый экран сайта
+3Первый экран лендинга с плавно сменяющимся словом в заголовке, двумя кнопками и широкой рамкой для изображения.
Сайт агентства с шейдерным героем
+3Живой оранжевый шейдерный герой под крупным заявлением, навигация-таблетка и сетка кейсов.
Тёмный лендинг для SaaS
+3Тёмный маркетинговый сайт с насыщенной анимацией для программного продукта — в одном автономном HTML-файле.
Сайт портфолио дизайнера
+3Шесть наклонённых карточек вокруг заголовка на сером фоне, красная карточка портрета и кейсы.
Сайт-портфолио разработчика
+3Тёмный личный сайт для инженеров с кейсами, статьями, докладами, резюме и формой обратной связи.
Редакционный сайт SaaS
+3Тёмно-синий разделённый герой, заголовок с засечками рядом с документальным кадром и кобальтовый акцент.
Шаблон сайта в стиле глассморфизма
+3Матовые стеклянные таблетки на почти чёрном фоне, крупный заголовок с засечками и подписка.
Сайт аппаратного продукта
+3Огромные тонкие названия моделей на студийных кадрах, матовые карточки характеристик и линейка в масштабе.
Интерактивная схема архитектуры
+3Офлайн-схема системы, по которой можно кликать: построена из проверенной JSON-модели, с обоснованием для каждого блока.
Интерактивный герой с сеткой
+3Тёмная сетка тонких нитей, которая гнётся к курсору, и светящееся кольцо от каждого клика.
Граф знаний из заметок
+3Превратите заметки проекта в офлайн-граф с поиском, где каждое утверждение ведёт к строке источника.
Шаблон KPI-дашборда
+3Четыре KPI-плитки с чипами изменений, линейный график, таблица разбивки и целевые полосы на тёплой бумаге.
Лендинг из ИИ-макетов
+3Сначала три полноэкранных макета на выбор, затем ваш агент собирает выбранный как чистый адаптивный код.
Шаблон сайта журнала
+3Сайт журнала с качеством печатного издания: статьи, рубрики, небольшой магазин и подписка — в одном HTML-файле.
Сайт личного бренда
+3Портрет, растворённый в тёплой бумаге под тонкой скобкой, с лёгким и жирным заявлением по бокам.
Кинематографичная страница запуска продукта
+3Почти чёрная страница в свете премьеры: заголовок с засечками, ночная сцена в letterbox и форма брони.
Шаблон админ-панели
+3Рабочая консоль бэк-офиса с графиками, таблицами, канбаном и календарём — в одном офлайн-HTML-файле.
Шаблон лендинга для SaaS
+3Спокойный светлый маркетинговый сайт для программного продукта с рабочей консолью продукта, ценами и регистрацией.
Сайт-портфолио в стиле скрапбукинга
+3Многостраничное онлайн-резюме из бумажных предметов, с кейсами и версией резюме для печати.
Шаблон сайта магазина кроссовок
+3Полноценный магазин обуви или одежды с каталогом, карточками товаров, корзиной и демо-оформлением заказа в одном HTML-файле.
Лендинг автоматизации процессов
+3Графитовая страница, небольшой заголовок слева и живой граф узлов: запускается, повторяет попытку, пишет логи.
Вопросы
Это тяжело?
Нет. Это один двумерный canvas и несколько сотен строк простого JavaScript, без WebGL и библиотек анимации. Число точек зависит от размера экрана, а цикл останавливается во вкладках в фоне и когда герой уходит из видимости.
Точки могут сложиться в мой логотип?
Да, если он ваш. Дайте прозрачный PNG смелой простой формы, и движок превратит её в точки. PopNow также может сгенерировать чистый силуэт продукта после того, как вы увидите цену.
Как посетители управляют этим?
Три чипа шагов под кнопками меняют точки по клику или стрелками клавиатуры. Пока никто не выбрал, поле само переключается каждые несколько секунд.
Учитывается ли уменьшенное движение?
Да. При включённом уменьшенном движении точки стоят на месте, шаги меняются без твина, ничего не переключается само, а бегущая строка перестаёт ехать.