HyperFrames: копия анимации по видео-референсу

Тест 10.08.2026 · референс: «SaaS Product Demo Video (UI Animation)» — Motion Swell · реплика собрана целиком в HyperFrames (HTML + GSAP), рендер их движком в MP4
Референс · YouTube, 21 сек (360p — максимум, что отдал YouTube)
v2 · Русская версия про Performante · 1080p · пер-буквенные анимации, барабан экранов целиком, финал performante.com

Первая итерация (v1, английская)

v1 · дословная копия референса. Фидбек Тимура: буквы после первой сцены появлялись голым opacity, карусель — «мельница» (карточки слишком разнесены). Исправлено в v2.

Что воспроизведено

Сцена референсаВ репликеСовпадение
«Turn your ideas» на живом оранжево-красном градиентеПер-буквенное появление + дрейф размытых цветовых пятенблизко
«into apps» на синей металлической волнеВолна из градиентных лент, текст с подъёмомблизко
«with intelligence» — градиент течёт синий→красный + искраКроссфейд двух градиентных слоёв + искра с отскокомблизко
Карточка промпта, курсор, «Attach files», GenerateТа же композиция, курсор заезжает к полюблизко
Крупный тайпрайтер «Create an app that tracks my spending.»Посимвольная печать с бегущей кареткойблизко
Зум на Generate + клик курсоромКнопка, курсор, нажатие с кольцом-пульсомблизко
«Meet AI Builder» на фоне бегущих слов Intelligence6 дрейфующих рядов + градиентный заголовокблизко
Стриминг кода (Express/Mongo)Тот же код, посимвольный стрим, розовый градиентблизко
Чек-лист Building backend → Deploying → «Your app is ready!»Ряды по очереди, спиннеры крутятся, смена на пилюлюблизко
3D-карусель финанс-карточек на градиенте4 карточки (Cards / Summary / Transactions / Subs) в perspective-вращенииблизко
Стеклянная пилюля motionswell.com/apply, лучи светаГласс-пилюля, печать URL, лучиблизко
Морф чек-листа в пилюлю «ready» (плавная трансформация)Упрощено до кроссфейдаупрощено
Металлический блик и объём волны, зерно фонаПлоские CSS-градиенты, без зернаупрощено

Тест № 2 — Arzamas «Древний Рим», первая минута (для канала про историю)

Референс · Arzamas «Древний Рим за 20 минут», первые 62 сек (360p)
Реплика HyperFrames · 1080p, 60 сек, рендер 1м 53с. Обтравленные клипарты сгенерированы Vertex (Nano Banana Pro) и вырезаны rembg: статуя пекаря Эврисака, мозаика волчицы, этрусский саркофаг, терракотовые фигурки. Карты — из настоящего гео-SVG, перекрашенного под стиль Arzamas.
Пайплайн клипартов, который проверяли: Vertex генерирует «музейный экспонат на тёмном фоне» → rembg (u2net + alpha matting) обтравливает начисто, без ореолов → HyperFrames анимирует вырезку кодом (выезд снизу, сдвиг, масштаб) поверх карт и плашек. Работает — годится для роликов исторического канала. Затраты на генерацию: 6 картинок ≈ $0.8 (Vertex), остальное бесплатно.

Вердикт по инструменту