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