Что вы получите
- Готовый проект HyperFrames и команда рендера для MP4 1080p, 30 fps, 7 секунд
- Галочки, синхронизированные с реальным временем действий в вашей записи
- Четыре палитры с одинаковой версткой и таймингом
- Встроенный иллюстративный экран телефона для черновиков
- По желанию: озвучка шагов, музыкальная подложка и черновое изображение экрана от PopNow
Подходит для
- Шаги в туториалах по приложениям и онбординге
- Сегменты-инструкции из трёх шагов в видео для авторов
- Короткие демо продукта, где каждый шаг должен быть явно выполнен
Не подходит для
- Больше четырёх шагов
- Длинные обходы экрана: медиа работает до 6,8 секунды
- Экраны только для десктопа, которые не помещаются в рамку телефона
Как пользоваться
В Claude или ChatGPT
Используйте навык PopNow «Анимированный чек-лист для демо продукта» (animated-checklist-demo) для этой задачи: Видео-чек-лист для нашего онбординга: «Создайте блокнот» на 1,2 с, «Добавьте тег» на 2,9 с, «Пригласите коллегу» на 4,6 с, экран ./onboarding.mp4.
В агенте для кода
/popnow-animated-checklist-demo Видео-чек-лист для нашего онбординга: «Создайте блокнот» на 1,2 с, «Добавьте тег» на 2,9 с, «Пригласите коллегу» на 4,6 с, экран ./onboarding.mp4.
Потом попробуйте
Сделайте и стиль в угольном и лаймовом цветах, чтобы я мог сравнить.
Добавьте короткую озвучку к каждому шагу. Сначала назовите цену.
Что подготовить
- До четырёх коротких подписей задач
- Запись экрана или скриншот и секунда, на которой выполняется каждый шаг
- Node.js 22+ и FFmpeg; по желанию ключ API PopNow
Похожие навыки
Смотреть все →Ролик запуска с командой агентов
+3Блестящие персонажи-помощники на точечной бумаге, живые задачи на телефоне и навык, создающий помощника.
Демо-ролик чат-бота с ИИ
+3Озвученное демо в тёмном чате: включаете интеграцию, задаёте вопрос, получаете результат и счётчик.
Ролик запуска продукта с ИИ
+3Спокойный ролик запуска в стиле презентации по сайту и интерфейсу продукта, смонтированный под ритм музыки.
Промо-видео мобильного приложения
+3Промо приложения на 10–13 секунд: семь моментов продукта идут одним движением камеры на HTML и GSAP.
Глитч-ролик в стиле ASCII
+3Кадры из ASCII-символов, рамки и точечные слова, которые меняются каждые полсекунды и ведут к логотипу.
Ролик «до и после» для сравнения
+3Почти чёрный холст, моноширинные имена файлов и один яркий акцент: контент сначала страницей, потом фильмом.
Промо-ролик в стиле технического чертежа
+3Тезис нарисован на почти чёрном листе спецификации: обрамлённые фигуры, штриховка, выноски и основная надпись.
Видео-обзор изменений (changelog)
+3Превратите настоящий pull request в 30-секундный ролик для тех, кто никогда не прочтёт диф.
Ролик запуска в одной ветке чата
+3Одно окно чата без сброса: спросите о ожидании, попросите исправление, смотрите, как оно работает.
Кинематографичный тизер тёмного интерфейса
+3Интерфейс дрейфует в чёрной пустоте: плавная камера, резкий фокус, набранная команда и светящийся логотип.
Ролик запуска инструмента для разработчиков
+3Один промпт в четырёх местах, нарезка реальных результатов под бит и команда установки в финале.
Ролик SaaS с мокапами устройств
+3Настоящий экран приложения на нейтральном устройстве в тёмной студии, одно действие и яркое открытие.
Редакционный ролик запуска на тёплой бумаге
+3Крупный шрифт на тёплой бумаге, один акцент в кадре, приподнятая карточка продукта и поворот в чёрной туши.
Ролик запуска функции: от жалобы к решению
+3С жалобы, которую пишут пользователи, и доказательство, что новая функция делает её неверной.
Смешной ролик «проблема и решение»
+3Мелкая досада разыгрывается как шутка, вежливые просьбы копятся, и один оранжевый леденец становится решением.
Ролик запуска на растровом холсте
+3Ролик запуска на одном живом холсте из точек, который движется на долю секунды раньше каждой строки текста.
Видеоинфографика от руки
+3Панели фломастером на одном плакате, нарисованный маршрут для камеры и отъезд ко всему листу.
ИИ-ассеты для HyperFrames
+3Опорные кадры, B-roll, музыкальные подложки и озвучка для видео HyperFrames: сначала цена, файлы в assets/.
Ролик запуска продукта
+3Ролик запуска на 20–40 секунд по вашей ссылке или README, с текстом для публикации и тремя форматами кадра.
Жидкое появление логотипа
+3Стеклянная капля несёт ваш знак нечитаемым, затем лопается и оставляет чёткий локап.
Ролик запуска в нескольких стилях
+3У каждой возможности свой мир: синий график, кремовая страница с засечками, тёмное поле, сетка постеров.
Многоязычный ролик запуска
+3Название продукта стоит на месте, а каждый язык вкатывается на своём письме, озвученный и с субтитрами.
Видео-объяснение с озвучкой
+3Объяснение на 45–120 секунд с озвучкой и субтитрами по словам, в стиле коллажа, доски или данных.
Научная анимация из бумажной вырезки
+3Слои бумаги в теневой коробке, солнце и луна из вырезки, подписи на нитях: одна научная идея с озвучкой.
Видео о партнёрстве
+3Ведущий в окне с рамкой, два логотипа на карточке, набранная настройка в три шага, глаголы по реплике.
Промо-видео в пиксель-арте
+3Ретро-фильм о вашем продукте в пиксель-арте, нарисованный кадр за кадром по вашей ссылке, питчу или истории.
Ролик запуска с плюшевыми персонажами
+3Персонажи из фетра катаются на курсорах и собирают промо в командном редакторе, каждая склейка на бите.
Промо: от тишины к звуку
+3Кнопку нажимают три раза в полной тишине, затем тот же кадр снова со звуком и ещё раз с музыкой.
Квадратное промо с трансформацией интерфейса
+3На тёплой бумаге кнопка растягивается в карточку запроса, затем вид отъезжает к стене сессий.
Анимация бумажной сказки
+3Книжка с картинками, которая движется: фетр, глина, слои бумажных холмов и слова, появляющиеся по одному.
Генератор видеоотзывов
+3Портретные плашки с карточкой цитаты, бирюзовый акцент и спокойный переход к каждому клиенту.
Текст за человеком в заголовке
+3Огромный заголовок проступает за спиной человека в кадре, затем после чистой склейки владеет всем кадром.
Промо материальной типографики
+3Буквы заголовка вырезаны из терраццо, кирпича и стали и меняют поверхность каждые 3 кадра на тёплом мудборде.
Видео в технике белой доски
+3Маркер рисует весь урок на одной доске, стирает миф, затем отъезжает к готовой доске.
Вопросы
Как галочки синхронизируются с записью экрана?
У каждой задачи есть значение at в секундах. Задайте момент, когда действие происходит в вашей записи: штрих галочки и заливка квадрата начинаются с этого кадра.
Можно ли использовать скриншот вместо записи?
Да. Статичное изображение подходит, но тогда галочки показывают только демонстрационный тайминг, и навык прямо говорит об этом, а не создаёт видимость записанного взаимодействия.
Что за экран телефона по умолчанию?
Иллюстративный экран приложения для заметок, который создан и входит в пакет, поэтому черновики рендерятся без внешних ресурсов. Замените его экраном своего продукта для настоящего демо.
Можно ли добавить закадровый текст?
Да. PopNow может озвучить одну короткую фразу на шаг, поставленную непосредственно перед галочкой, с тихой подложкой под ней. Цену в кредитах вы увидите до генерации.