🧩 Qué es / qué hace
Generador de prompts
Construye prompts muy detallados para Seedance 2 (image-to-video) que producen videos de fondo en loop perfecto para sitios web. Exige especificidad en cámara, iluminación, timing, coreografía del texto y mecánica del loop.
HTML → MP4 local
Genera videos narrados, animados y renderizados a partir de un tema. Stack: HyperFrames (Chrome headless captura frames) + FFmpeg codifica + Kokoro TTS local. Sin clave de API, sin costo por render.
Encode universal
FFmpeg es el motor de codificación H.264 que aparece detrás de casi todos los skills de video. Extrae fotogramas, crea MP4, sincroniza el audio WAV y requiere -nostdin en git-bash para evitar exit 0 silencioso.
npx hyperframes render.pip install kokoro-onnx soundfile, sin espeak-ng, ya fonemiza PT-BR.🎣 Cuándo se activa
Si el usuario describe el diagrama en lenguaje natural, Claude genera el código Mermaid válido consultando la referencia
🚀 Cómo mejora tus páginas
<video loop muted autoplay> como fondo hero usando el .mp4 de SeedanceHyperFrames-nostdin en git-bash: FFmpeg devuelve exit 0 sin generar un archivo.clip: HyperFrames fuerza opacity:1 — animar solo .scene-innerUna landing page con Seedance en el hero + HyperFrames en los módulos del curso = experiencia de producto premium sin depender de ningún servicio externo de video de pago. FFmpeg es el enlace que garantiza la compatibilidad universal del .mp4 generado.
⚙️ Cómo funciona por dentro
Producto/sujeto con detalles precisos de material, color y forma. Entorno. Referencias visuales reales (ej.: "Apple product film meets Dyson reveal").
Posición exacta, ángulo, movimiento. "Órbita horizontal con 15° de elevación, 1 rotación completa" — nunca "la cámara se mueve".
Build lento → pico al 40–60% → resolución satisfactoria. Cada loop tiene un clímax visual.
Titulares integrados en el video. La legibilidad es la prioridad número 1: si un efecto visual compite con el texto, se elimina el efecto.
Iluminación estática durante todo el video. Sin variación de temperatura de color: innegociable para mantener la consistencia en el loop.
Image-to-video con la misma imagen en el 1.º y el último frame. La cámara vuelve exactamente a la posición inicial. Las partículas vuelven al estado inicial.
Duración (por defecto 10s), resolución 4K si es compatible, sin marcas de agua, en loop continuo.
6–9 escenas. Narración ≈100s de voz. Siglas expandidas para la locución ("SKILL.md" → "SKILL punto M D").
--example blank --non-interactive. Copia design.md (house style) a la raíz.
Descarga .woff2 subset latin → assets/fonts/fonts.css
Voz pf_dora --speed 0.98. Genera WAV por escena. Sin espeak-ng.
Para cada frame: llama anim(t), espera a que el DOM se estabilice, screenshot PNG 30fps. Tiempo virtual: no se pierde ningún frame.
PNG → H.264. Sincroniza el WAV. ffmpeg -nostdin en git-bash (evita exit 0 sin output). Path: C:\ffmpeg\bin.
--quality draft primero, después --quality high. Genera 16:9 y 9:16 por separado.
Sin -nostdin, FFmpeg en git-bash devuelve exit 0 silenciosamente sin generar ningún archivo. Usa siempre: ffmpeg -nostdin [opções]. También: verifica npx hyperframes doctor si algo falla en el flujo.
💬 Ejemplo práctico + prompt listo
Seedance = fondo visual del sitio (el usuario mira al fondo). HyperFrames = video explicativo de contenido (el usuario aprende con el video). Los prompts de abajo cubren cada caso por separado.
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🧬 Combina con / límites
Este módulo abarca los dos skills de forma panorámica. Para dominar todos los detalles de HyperFrames (setup, escenas, GSAP, Kokoro, debug, deploy), accede al curso dedicado:
🔗 inematds.github.io/skill-hyperframes-videos →Qué aprendiste
- ✓ seedance-loop-prompt: prompt hiperdetallado en 7 secciones para Seedance 2
- ✓ video-explicativo (HyperFrames): HTML+GSAP → Chrome headless → FFmpeg → MP4
- ✓ FFmpeg como motor base: H.264, sincronización WAV,
-nostdinen git-bash - ✓ Kokoro TTS:
pf_dora --speed 0.98, PT-BR, sin espeak-ng - ✓ Loop cerrado: mismo frame al inicio y al final → loop sin cortes
- ✓ 16:9 y 9:16 del mismo proyecto de HyperFrames
- ✓ Combina con animation-designer, 3d-animation-creator, formato-curso
- → Seedance: iluminación estática durante todo el video (consistencia del loop)
- → HyperFrames: animar
.scene-inner, nunca el.clip - → FFmpeg:
-nostdinen git-bash es innegociable - → La legibilidad del texto es la prioridad #1 en Seedance
Skills de soporte al flujo: investigación, diagnóstico, memoria, agentes auxiliares.