reel-motion-graphics

Gráficos en movimiento para reel

Esta habilidad crea reels en el estilo de la casa que se creó por primera vez para "Upcycling in 30 Seconds". template/ es ese reel como un proyecto HyperFrames funcional, por lo que una copia nueva se renderiza correctamente antes de que cambies algo. Tu trabajo es reemplazar su contenido con el nuevo guion mientras mantienes cada regla a continuación.

Carga /hyperframes-core para el contrato de composición antes de escribir el HTML de la composición. Carga /hyperframes-animation solo si necesitas un patrón de movimiento que no esté en references/primitives.md.

1. Lee el guion y planifica los beats

Recopila o infiere lo siguiente, y pregunta solo por lo que cambie la película:

• El guion o concepto. Obligatorio.
• Metraje del presentador (MP4) o una imagen fija. Sin uno, mantén la imagen fija de marcador de posición de la plantilla.
• Crédito de la fuente para la ceja del título, p.ej. ICLR 2023 · Author et al..
• Duración objetivo. Por defecto 30s; de 20 a 60s funciona.

Divide el guion en: una tarjeta de título (unos 4s), 2–5 pasos (4.5–6s cada uno) y un opcional resultado/cierre (unos 5.5s). Para cada paso escribe:

• un encabezado como palabras simples más un acento en cursiva de 1–2 palabras ("Copia el MLP ocho veces"), con un máximo de unos 22 caracteres para que quepa en 656px a 60px;
• un pie de foto: la línea 1 es una oración de un máximo de unos 34 caracteres (Bodoni cursiva 40px), y la línea 2 es una oración de apoyo de un máximo de unos 40 caracteres;
• el movimiento del diagrama del vocabulario de primitivas (references/primitives.md → "Writing a new diagram").

Pon unas 2.5 palabras habladas por segundo si los pies de foto reflejan la narración. Escribe el plan en STORYBOARD.md dentro del proyecto (beat, rango de tiempo, encabezado, pie de foto, movimiento visual), muéstraselo al usuario y construye una vez que lo apruebe. Un guion corto que el usuario ya haya aprobado puede ir directamente a la construcción.

2. Andamiaje

Esta habilidad vive en el proyecto Reel Creator (.claude/skills/reel-motion-graphics/). Ejecuta los comandos desde la raíz del proyecto y coloca cada nuevo reel en reels/<slug>/. Las rutas de script a continuación, como scripts/solve-fold.py, son relativas a la carpeta de esta habilidad.

.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]

Para el video del presentador, reemplaza <img id="presenter"> en index.html con: <video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video> El CSS #presenter (cover, ancla 20%, debajo de --fold) se aplica sin cambios.

3. Construcción: edita los datos primero, luego escribe el diagrama

Archivo	Qué cambiar
index.html	Raíz y data-start/data-duration de los hosts para que coincidan con el plan. Hosts: bg (completo), title (0–4), headings y diagram (4–end), result (su ventana), captions (completo), presenter (completo).
compositions/title.html	Crédito de ceja, las dos líneas de visualización, las dos líneas de tesis y el mini diagrama si la idea no es "1 → many".
compositions/headings.html	Solo el array STEPS (segundos locales del host). Las barras y "Paso n de N" se derivan de él.
compositions/captions.html	Solo el array CAPS (segundos globales). Ingresa cada uno unos 0.35s después de que comience su paso y permanece hasta el final del paso.
compositions/diagram.html	Reescribe el mundo para el nuevo tema, usando las primitivas. Mantén la estructura lens/world/drift, el patrón token-clock y la recesión del fondo.
compositions/result.html	Etiquetas de estadísticas, valores, contadores y líneas de metadatos, o elimina el host si el guion no tiene números.
compositions/bg.html	Generalmente sin cambios. Escala sus repeticiones de yoyo para que terminen en la duración de la raíz.

Cuando la biblioteca no tenga un gráfico adecuado: pide un enlace de HyperFrames

La biblioteca es references/primitives.md. Cuando un beat necesite un visual que ninguna primitiva cubra (un tipo de gráfico, mapa, línea de tiempo, comparación o cualquier otra cosa no listada), no improvises uno desde cero. Pausa y pídele al usuario un enlace:

"El beat 3 ('los ingresos se triplicaron desde 2021') necesita un gráfico de crecimiento y la biblioteca no tiene uno. ¿Puedes enviar un enlace del catálogo de HyperFrames con un gráfico que te guste? Lo reestilizaré a nuestra marca."

Para ayudarlo a elegir, puedes listar 2–4 candidatos de npx --yes [email protected] catalog "<keyword>", pero deja que el usuario elija. Sigue construyendo los otros beats mientras esperas y deja un marcador de posición etiquetado en el espacio.

Cuando llegue el enlace:

1. Instálalo. El nombre del elemento del registro es el último segmento de la ruta del enlace del catálogo. Ejecuta npx --yes [email protected] add <name> --no-clipboard --json desde el proyecto. Para un enlace que no sea del registro, lee la página o la fuente y reconstrúyelo.
2. Reestilízalo según las reglas de la casa:
   • intercambia los colores por tokens de marca y los paneles por .glass;
   • usa Bodoni e Instrument Sans con los archivos opsz-18;
   • coloca cada valor de espaciado en la cuadrícula de 4px;
   • ajústalo a la columna de contenido y las zonas;
   • añade los acentos de brillo, gloss y deriva;
   • elimina cualquier cosa fuera de la marca, como rellenos planos brillantes, otras fuentes o estilos de sombra paralela.
3. Conéctalo como un host de subcomposición en la pista de gráficos, o pliega su movimiento en diagram.html cuando tenga que compartir el mundo continuo. Luego verifica, toma una instantánea y corrige como de costumbre.
4. Agrégalo a la biblioteca. Agrega una entrada a references/primitives.md bajo "Restyled from HyperFrames": el nombre, el enlace de origen, lo que muestra y sus parámetros clave. Copia el archivo reestilizado en template/compositions/library/ para que el próximo reel pueda reutilizarlo sin preguntar de nuevo.

4. Reglas de la casa (cada reel, sin excepciones)

1. Pliegue equidistante. El pliegue se sitúa a medio camino entre el contenido animado más bajo (parte inferior del pie de foto, aproximadamente y 900) y la parte superior de la cabeza del presentador. Resuélvelo con scripts/solve-fold.py <imagen fija del presentador o un fotograma> 900 y establece --fold en brand.css (un múltiplo de 4). Verifica con scripts/measure-fold.py <instantánea> <pliegue>. Con video, comprueba un fotograma donde la cabeza esté más alta.
2. Cuadrícula de 4px. Cada relleno, espacio, desplazamiento, tamaño y altura de línea es un múltiplo de 4. Los contenedores se rellenan uniformemente y se dimensionan según su contenido; nunca le des a una tarjeta una altura fija. Ejecuta scripts/audit-grid.sh <proyecto>; los únicos sobrantes permitidos son bordes finos, radios de brillo y desplazamientos de movimiento de interpolación.
3. Serifa robusta. Usa solo los archivos Bodoni *-opsz18.woff2 en fonts/. El tamaño óptico automático de la fuente variable elige cortes de visualización finos que desaparecen después de H.264 y la reducción de escala del teléfono. Nunca vuelvas al archivo variable o al rango 6..96 de Google.
4. Zonas. Barra de aplicación 0–175 (mantener libre), animación 192–780, banda de pie de foto 812–904, presentador debajo de --fold, columna de contenido x 172–828 (libre del carril derecho). Los pies de foto viven en una sola pista.
5. Un mundo de diagrama continuo. Los elementos que persisten a través de los pasos viven en diagram.html y se mueven. Nunca vuelven a entrar en un nuevo archivo de escena.
6. Determinismo. Usa solo líneas de tiempo de GSAP pausadas registradas en window.__timelines["<id>"]. Usa rng() o hh() con semilla en lugar de Math.random, y no uses requestAnimationFrame, relojes o red. Los contadores animados y las partículas son funciones puras del valor de una interpolación proxy.
7. Autoría segura contra lint.
   • Apunta a la raíz de una subcomposición con document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])'), nunca #root (varias raíces comparten ese id una vez ensambladas).
   • Prefija los ids de elementos con la composición (dg-, hd-, rs-, ti-).
   • Usa un fromTo por par elemento-propiedad, luego to.
   • Nunca interpoles letterSpacing, width, height, top o left; usa transformaciones y opacidad.
   • Escalone etiquetas individuales para que no se superpongan en reposo.
8. Aspecto. Fondo cálido casi negro con luz y grano a la deriva; .glass para cada panel; brillo dorado en los acentos; pequeña deriva de cámara en cada pausa; mantén cada estado terminado al menos 1s.

5. Verifica, luego entrega

Ejecuta estos desde el directorio del proyecto:

npx --yes [email protected] check
npx --yes [email protected] snapshot --at <el punto medio de cada beat>

• check debe pasar con 0 errores. Revisa cualquier advertencia.
• Mira la hoja de contactos. Recorta y amplía cualquier fotograma denso: busca superposiciones, texto recortado, tokens que aterricen fuera de objetivo y relleno desigual.
• Ejecuta measure-fold.py y audit-grid.sh, y corrige cualquier cosa que marquen.
• Renderiza con npx --yes [email protected] render; el resultado va a renders/. Haz una copia para compartir de menos de 30 MB para visualización en teléfono: ffmpeg -i renders/<file>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4
• Reproductor en vivo: desde la raíz del proyecto ejecuta node viewer/build.mjs. Reconstruye el reproductor en vivo de cada reel (reel/ más cada reels/<slug>/) y escribe el carrusel viewer/index.html, con una copia por reel en viewer/reels/. Publica viewer/index.html en el artefacto de la biblioteca de reels https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR, pasando cada viewer/reels/*.html en files. El usuario prefiere el reproductor HTML en vivo sobre un video incrustado. Para un solo reel por sí solo, ejecuta node build-preview.mjs en su carpeta para escribir dist/preview.html.
• Informa el tiempo de ejecución, lo que se verificó (fotogramas, espacios del pliegue, auditoría) y cualquier cosa aún no verificada.

Referencia

• references/primitives.md: cada bloque de construcción visual, con el archivo que lo implementa.
• template/: el reel completo de Upcycling. Es el estándar de calidad; compara el trabajo nuevo contra él.