Можно генерировать анимации до 30 секунд полностью на коде HTML + Canvas 2D. Например, можно легко собрать таймлапс, анимацию текста или геометрии, а также оживить любую инфографику.
Промпт:
Build a 1920×1080, [DURATION]-second, 60 fps motion piece as ONE self-contained HTML file, then render it to MP4.
No video model, no stock footage, no AI-generated people — every frame is drawn in code.
══════════ TECH ══════════
- Deterministic: expose window.render(t) that draws the exact frame for time t (seconds). No timers, no CSS animations — everything is computed from t.
- Wrapper (title, cards/sections, closing) in HTML/CSS updated by render(t). Inner films/scenes use Canvas 2D.
- All text, names, numbers and timings live in one CFG object at the top of the script.
- Easing everywhere: cubic-bezier(0.25,0.1,0.25,1) + backOut, bounceOut, elasticOut, expoOut, easeInOutCubic where needed.
- Wait for fonts (document.fonts.load) before the first render.
- Render pipeline: Playwright headless Chromium → screenshot each frame → ffmpeg to MP4 (60 fps, high quality).
══════════ DESIGN LANGUAGE ══════════
[STYLE]
(Пример: Apple keynote minimal — white background, SF Pro / Inter, one accent color #0071E3, soft shadows, generous whitespace, no outlines, flat fills)
══════════ STRUCTURE ══════════
1. Opening title sequence
2. Main content (1–3 parallel or sequential films/scenes)
3. Closing title
══════════ YOUR CONTENT ══════════
### Opening
[Что должно происходить в начале, текст, анимации появления]
### Main Scenes / Films
Опиши каждую сцену подробно:
**Scene 1 — [Название]** ([длительность] s)
- Визуальный стиль и окружение
- Главные объекты / персонажи
- Покадровый / побитовый сценарий (что происходит, когда, какие easing'и)
- Текст, если есть
**Scene 2 — [Название]** ([длительность] s)
...
**Scene 3 — [Название]** ([длительность] s)
...
### Closing
[Финальный текст и анимация]
══════════ QUALITY BAR ══════════
- Something meaningful changes roughly every 0.5 s inside the films.
- Optical centering, clean spacing, nothing touches.
- Verify key frames before full render.
Сохраняем и забываем про After Effects.
🙂 Не баг, а фича