🧩 What it is / what it does
Prompt generator
Builds highly detailed prompts for the Seedance 2 (image-to-video) that produce background videos in perfect loops for websites. Enforces specificity in camera, lighting, timing, text choreography, and loop mechanics.
Local HTML → MP4
Generates narrated, animated videos and renders them from a topic. Stack: HyperFrames (Chrome headless captures frames) + FFmpeg encodes + Kokoro TTS local. No API key, no cost per render.
Universal encoding
FFmpeg is the H.264 encoding engine behind nearly every video skill. It extracts frames, assembles MP4, syncs audio WAV, and requires -nostdin in git-bash to avoid silent exit 0.
npx hyperframes render.pip install kokoro-onnx soundfile, no espeak-ng; it already phonemizes PT-BR.🎣 When it triggers
If the product/subject is present → generates immediately. If not → asks ONE focused question, then generates. Never asks too many questions. Creative decisions the user hasn’t specified are left to the skill.
🚀 How it improves your pages
<video loop muted autoplay> as a hero background using the Seedance .mp4HyperFrames-nostdin in git-bash: FFmpeg returns exit 0 without generating a file.clip: HyperFrames forces opacity:1 — animate only .scene-innerA landing page with Seedance in the hero + HyperFrames in the course modules = a premium product experience without relying on any paid external video service. FFmpeg is the link that ensures universal compatibility of the generated .mp4.
⚙️ How it works under the hood
Product/subject with precise details about material, color, and shape. Setting. Real visual references (e.g., "Apple product film meets Dyson reveal").
Exact position, angle, movement. "Horizontal orbit at 15° elevation, 1 full rotation" — never "camera moves".
Slow build → peak at 40–60% → satisfying resolution. Every loop has a visual climax.
Headlines baked into the video. Readability is priority #1 — if a visual effect competes with the text, the effect gives way.
Static lighting throughout the video. No color temperature variation—non-negotiable for loop consistency.
Image-to-video with the same image in the first and last frame. The camera returns to its exact starting position. Particles return to their initial state.
Duration (default 10s), 4K resolution if supported, no watermarks, seamlessly looping.
6–9 scenes. Narration ≈100s of voiceover. Acronyms expanded for speech ("SKILL.md" → "SKILL dot M D").
--example blank --non-interactive. Copy design.md (house style) to the root.
Downloads .woff2 subset latin → assets/fonts/fonts.css
Voice pf_dora --speed 0.98. Generate a WAV for each scene. No espeak-ng.
For each frame: call anim(t), waits for the DOM to stabilize, PNG screenshot at 30fps. Virtual time — no frames dropped.
PNGs → H.264. Syncs WAV. ffmpeg -nostdin in git-bash (avoids exit 0 with no output). Path: C:\ffmpeg\bin.
--quality draft first, then --quality high. Generate separate 16:9 and 9:16 versions.
No -nostdin, FFmpeg in git-bash silently returns exit 0 without generating any files. Always use: ffmpeg -nostdin [opções]. Also: check npx hyperframes doctor if something fails in the workflow.
💬 Practical example + ready-to-use prompt
Seedance = visual website background (the user watch in the background). HyperFrames = explainer video about content (the user learn with the video). The prompts below cover each case separately.
Quero um background loop para o hero do meu
site de cursos INEMA.CLUB. Produto: dashboard
de cursos dark premium com partículas de dados
flutuantes. Headlines: "APRENDA COM QUEM FAZ"
e "INEMA.CLUB". Loop de 10 segundos, paleta
purple e ciano, mood: tecnologia artesanal.Faça um vídeo explicativo sobre o skill
seedance-loop-prompt do INEMA.CLUB. PT-BR,
dark premium, accent âmbar. Gere 16:9 e 9:16.
Termina com a cena de CTA do INEMA.CLUB.
Assunto: como criar background loops de site
com prompt estruturado para o Seedance 2.# Render HyperFrames 16:9
node build-index.mjs
npx hyperframes render --quality high \
--output renders/meu-video-16x9.mp4
# Render HyperFrames 9:16
node build-index.mjs --vertical
npx hyperframes render --quality high \
--output renders/meu-video-9x16.mp4
# FFmpeg direto (com -nostdin obrigatório no git-bash)
ffmpeg -nostdin -framerate 30 \
-i frames/frame_%04d.png \
-i audio/narration.wav \
-c:v libx264 -crf 18 -pix_fmt yuv420p \
output.mp4
# Verificar instalação
npx hyperframes doctor🧬 Works well with / limitations
This module provides a high-level overview of both skills. To master all the details of HyperFrames (setup, scenes, GSAP, Kokoro, debugging, deploy), take the dedicated course:
🔗 inematds.github.io/skill-hyperframes-videos →What you learned
- ✓ seedance-loop-prompt: highly detailed prompt in 7 sections for Seedance 2
- ✓ explainer-video (HyperFrames): HTML+GSAP → Chrome headless → FFmpeg → MP4
- ✓ FFmpeg as the core engine: H.264, WAV sync,
-nostdinin git-bash - ✓ Kokoro TTS:
pf_dora --speed 0.98, PT-BR, without espeak-ng - ✓ Loop seal: same frame at the start and end → seamless loop
- ✓ 16:9 and 9:16 from the same HyperFrames project
- ✓ Works with animation-designer, 3d-animation-creator, formato-curso
- → Seedance: static lighting throughout the video (loop consistency)
- → HyperFrames: animate
.scene-inner, never the.clip - → FFmpeg:
-nostdinin git-bash is non-negotiable - → Text readability is priority #1 in Seedance
Workflow support skills: research, diagnostics, memory, helper agents.