getFrontend/10-animation-styles-skill

Estilos de animación

Diez looks, cada uno un archivo de código real que Claude puede apuntar a cualquier historia. Nada aquí llama a un modelo de imagen o video, por lo que la misma historia se renderiza igual cada vez y no cuesta nada.

La plantilla incluye un ejemplo completo de 22 segundos: Claude vuela un cohete casero a la luna, en un nuevo estilo cada golpe. Ejecútalo primero para ver cada look en movimiento, luego reemplaza la historia.

Estilos

Archivo	Estilo	El look en una línea
pixel.js	Pixel art	Dibujado a unos 120 píxeles de ancho y escalado sin suavizado. Paleta pequeña, cielo tramado, HUD de juego
ps2.js	Estilo PS2	Pocos polígonos, texturas pequeñas y turbias, niebla, imagen de baja resolución estirada, HUD de misión
comic.js	Arte de cómic	Líneas de tinta gruesas, color plano, puntos Ben-Day, líneas de acción, globos de texto, un gran BOOM
brick.js	Estilo Lego	Todo son piezas de plástico con tacos, bajo un sol suave
clay.js	Claymation	Formas suaves con huellas dactilares, luz suave, 12 poses por segundo
paper.js	Recortes de papel	Capas de cartulina recortada con pequeñas sombras, fibra de papel, 8 poses por segundo
anime.js	Anime retro	Cels de los 80: cielo degradado, gran disco solar, líneas de velocidad, un fotograma invertido en el impacto, grano de película
poly.js	Low poly 3D	Caras planas y luz dura, nada redondo
riso.js	Risografía	Dos tintas sobre papel crudo, cada una con sus propios puntos de semitono, impresas ligeramente desalineadas
mini.js	Diorama en miniatura	Un pequeño set artesanal sobre un escritorio, cartón y algodón, desenfoque de cambio de plano

styles.md tiene las reglas para cada uno: qué lo hace leer como ese estilo, qué cambiar para un nuevo sujeto, y qué lo rompe. Lee la parte de un estilo antes de escribir su escena.

Pasos

1. Obtén el brief. ¿Cuál es la historia o la app, vertical (Reels, TikTok) o ancho (X, YouTube), y qué estilos? Sin preferencia significa 3 a 5 estilos que se adapten a los golpes, o los 10 para mostrarlos. Un solo estilo para todo el video también está bien.
2. Escribe la historia con copywriter.md. Una línea por golpe. Muestra al usuario las líneas con el estilo al lado de cada una, y espera un sí.
3. Copia la plantilla: cp -r ~/.claude/skills/claude-animation-styles/template ~/my-video && cd ~/my-video && npm i. Verifica que funcione antes de cambiar nada: node render.cjs stills 2,6,12 y abre las imágenes. Muestran la historia de ejemplo, así que borra stills/ antes de empezar con la tuya.
4. Escribe story.json. format es vertical o wide. Cada golpe tiene un style (el nombre del archivo), seconds y su line. El mismo estilo se puede usar para más de un golpe, y cada uno recibe su propia escena (ver más abajo).
5. Reescribe la escena en cada archivo de estilo que estés usando. Mantén el look, reemplaza el sujeto. Consulta "Cambiando el sujeto" más abajo.
6. Verifica fotogramas después de cada estilo: node render.cjs stills 1,3.5,6. Los números son segundos dentro del video completo, no dentro del golpe, e imprime el nombre del archivo de cada imagen. Abre cada una. ¿El sujeto es reconocible con el sonido apagado? ¿Se lee como ese estilo? ¿Algo está cortado por el marco?
7. Añade una voz, si el usuario la quiere: ELEVENLABS_API_KEY=... python3 voice.py [voice_id]. Lee las líneas, escribe voice.mp3 y reajusta los tiempos de los golpes en story.json para que coincidan. Sin clave significa sin voz, así que establece los segundos a mano y añade música.
8. Renderiza: node render.cjs video --audio voice.mp3, o simplemente node render.cjs video para sin sonido. Escribe out/video.mp4. Un video de 20 segundos tarda unos minutos.
9. Mira el video completo antes de entregarlo: ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg (una imagen por segundo, así que las celdas vacías al final son normales). No puedes oírlo, así que dile al usuario que revise el sonido.

Para poner música debajo de una voz, 14 dB más baja que la voz: ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav Mide ambas con -af ebur128 y ajusta el volumen, ya que las pistas varían mucho en sonoridad.

Cambiando el sujeto

Cada archivo de estilo tiene un create que construye el mundo una vez, y un render(t, ctx, dur) que dibuja cualquier momento, donde t son segundos dentro del golpe y dur es la duración del golpe. Solo mira t, por lo que cualquier fotograma se puede dibujar en cualquier orden.

Un estilo usado dos veces. create recibe index (la posición del golpe en story.json), line y beat. Guarda this.index = index y dibuja una escena diferente para cada uno. No pruebes start para esto, porque cambia cada vez que se ajusta el tiempo.

Estilos 2D (pixel, comic, paper, anime, riso). El sujeto se dibuja a través de un pequeño pintor: paint.fill(path, key) y paint.lines(segments, width, key), y cada estilo decide qué hacen esos. En comic añaden líneas de tinta. En paper añaden una sombra. En riso colocan densidad de tinta. lib/common.js tiene los sujetos de ejemplo, drawClaude y drawRocket. Escribe un drawCat, drawPhone o drawFounder de la misma manera, usando los mismos nombres de pieza en cada estilo, y obtiene cada look gratis. Un nuevo nombre de pieza (fur, apron) debe añadirse a la paleta de ese estilo, que es PAL en comic, paper y anime y toneA y toneB en riso, o pintará en el color equivocado sin error. El pixel art traza su propio sprite, así que escríbelo a mano.

Estilos 3D (ps2, brick, clay, poly, mini). lib/three-claude.js construye el sujeto a partir de formas simples, con un kit decidiendo cuántos polígonos y qué material. Construye tu sujeto de la misma manera: makeCat(kit). El estilo Lego es la excepción, ya que todo debe construirse con ladrillos, así que copia su ayudante add.

Mantén el mismo sujeto en cada estilo. Misma silueta, mismos dos o tres colores. Eso es lo que hace que un cambio de estilo se lea como la misma historia en lugar de un nuevo clip. Una forma simple y reconocible vence a un personaje detallado.

Qué hace que estos funcionen

• Cambia el estilo en un corte directo. Corta directamente al siguiente look. La sorpresa de esto es la transición.
• Una cosa grande moviéndose en el medio. La gente necesita captar cada golpe en menos de un segundo, a menudo en un teléfono con el sonido apagado.
• Cada golpe de 1.5 a 3 segundos. Suficientemente largo para ver el look, suficientemente corto para que se queden esperando el siguiente.
• Mantén la historia en movimiento a través del corte. Si el cohete está subiendo al final de un golpe, sigue subiendo al inicio del siguiente.
• El texto pertenece al estilo. Un HUD en los looks de juego, un globo de texto en el look de cómic. Omite subtítulos encima.

Si algo sale mal

• Falta Puppeteer o Three.js: npm i en la carpeta con render.cjs.
• Falta ffmpeg: brew install ffmpeg en una Mac. Los fotogramas funcionan sin él, el video lo necesita.
• Fotogramas 3D negros o renderizados muy lentos: el renderizado usa la GPU en una Mac y un renderizador de software en otros lugares (render.cjs, la línea gl). El renderizado por software funciona y tarda mucho más.
• Títulos con la fuente incorrecta: la página carga Inter Tight y Bangers de Google Fonts, por lo que necesita internet durante el renderizado.
• Una palabra en el estilo cómic llega tarde: la cuenta regresiva lee los tiempos de las palabras desde voice.json cuando hay una voz. Cambia las palabras que busca en comic.js.

Mantenlo tuyo

Copia los looks y crea tus propios sujetos. No uses el logotipo de una marca, los personajes de un juego o las piezas de una empresa real en pantalla, y no copies la escena de otro creador toma por toma.