madhavsomani/animation-skills

Reel explicativo con lienzo

Creado inicialmente para un Reel de consejos sobre currículums en octubre de 2026, luego guardado como fórmula reutilizable.

• Ejemplo funcional: template/example-08-resume.html (la composición completa de HyperFrames de ese Reel; sus assets multimedia no están incluidos).
• Capturas de pantalla: ../../docs/canvas-explainer/.

Reglas internas que aplicar: mantener el avatar en pantalla en ráfagas cortas (unas 3-4 s cada una), y entregar solo el máster de máxima calidad. Motor: HyperFrames (fijar [email protected]). FFmpeg es solo para preparación y control de calidad.

La fórmula (conservarla toda)

1. Un lienzo negro infinito. Usar #world a 2400x6400 con una sutil cuadrícula de puntos. La cámara nunca corta; se desliza con power3.inOut y un pequeño desenfoque de movimiento en movimientos grandes.
2. Todo se dibuja en vivo, sobre la palabra que se dice.
   • Los trazos de marcador son rutas SVG con un filtro feDisplacementMap rugoso.
   • Las etiquetas manuscritas usan Ink Free, escritas con steps().
   • Colores: blanco #f4f4ef, amarillo #ffd84a, azul #6f8cff, rosa #ff6fae, verde #7ee08a, rojo #ff4b3e.
   • Flechas y círculos rojos señalan lo clave.
3. Artefactos técnicos reales, nunca solo garabatos genéricos. Un público de ingeniería de software quiere arquitectura real, código, terminales, capturas de pantalla reales y documentos reales (p. ej., un currículum censurado), anotados con recuadros y escritura a mano.
4. Avatar dentro de recuadros dibujados en el lienzo.
   • Los recuadros son 405x720 en 9:16. La cámara hace zoom en un recuadro (s = 1080/405) para que su metraje ocupe toda la pantalla; ese zoom es la transición. Anotar encima del metraje con escritura a mano.
   • El total del avatar no debe superar el 40% de la duración (apuntar a ~20%): un gancho inicial, un momento "personal" intermedio, y el cierre.
5. Sin pantalla vacía.
   • Cada región ocupa la vista y 120-1500.
   • Flechas conectoras rojas se dibujan entre regiones durante los movimientos de cámara.
   • Un encabezado amarillo aparece cuando la cámara llega.
   • Los subtítulos se sitúan en y 1555-1720 en Ink Free 64px con palabras clave en amarillo. Envolver el HTML de los subtítulos unidos en un <span> interno, o flex pierde los espacios.
6. Final.
   • La cámara se aleja para mostrar todo el mapa dibujado (s ≈ 0.31) detrás de una tarjeta final atenuada (0.58).
   • La llamada a la acción (CTA) se dice con su voz. Ejemplo: "¿Quieres mi currículum? Comenta 'curriculum' y te lo enviaré como plantilla." Mostrar la palabra clave grande en amarillo.
   • Nunca digas a los espectadores que no copien el recurso compartido. El recurso es suyo para usar.
7. Sonido.
   • Una base musical bajo la voz, tallada con ~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <directorio con node_modules/@hyperframes/core>. Apuntar --core a cualquier carpeta de proyecto que tenga @hyperframes/core instalado.
   • Subir la música en los silencios de voz y en el zoom de salida.
   • Efectos de sonido: clic de bolígrafo en marcas/etiquetas, escritura en código, vuelo de página/woosh en movimientos de cámara, swish-thud en apariciones, campanilla al final.
   • La música debe ser segura para Instagram (ver Música a continuación).

Pasos de construcción

1. Entradas.
   • Voz en WAV, normalizada a -16 LUFS: gancho + narración, concatenados.
   • Tiempos de palabras palabra@segundos: JSON alineado o subtítulos de clips.json, guardado como words.txt.
   • MP4 del avatar cuyo tiempo de metraje = tiempo de voz menos la duración del gancho.
   • Imágenes de artefactos reales.
2. Regiones del guion gráfico. Para cada momento, elegir un origen en el mundo y enumerar sus dibujos con los tiempos de las palabras dichas. Mantener el texto dentro de la vista de 1080px (Ink Free ≈ 0.5 em por carácter).
3. Copiar template/example-08-resume.html en una nueva carpeta de proyecto y reemplazar los bloques de región, recuadros (imagen JPG de póster debajo de cada `<video class=