deenukhan/animation-styles

Estilos de animación

Un proyecto Remotion con 39 estilos de animación construidos a mano. Cada estilo redibuja una historia fija, para que puedan compararse lado a lado y reutilizarse como plantillas: una tetera entra, se inclina, vierte chai en un kulhad (taza de barro), la taza se llena, la tetera se va, el vapor sube. 150 fotogramas, 30 fps, 1080×1350 (4:5), mudo. Renderizado a --scale=2 es 2160×2700.

Todo está dibujado en código: SVG con filtros, o un <canvas> pintado en cada fotograma. No interviene ningún modelo de imagen, modelo de vídeo ni metraje de archivo, por lo que el resultado es original y repetible.

El proyecto reside en la carpeta de este skill (la carpeta que contiene este archivo, llamada <skill> más abajo). Ejecuta los comandos desde allí.

0. Primera vez en una sesión

1. cd <skill> y comprueba que exista node_modules/. Si no, ejecuta npm install (aproximadamente un minuto, necesita Node 18+).
2. npm run list imprime los 39 estilos con su número, slug y una línea de aspecto.
3. El primer renderizado descarga un Chrome sin interfaz una vez (unos 100 MB). Necesita internet.

La solicitud habitual: "haz un vídeo de 5 segundos de en estilo "

Este es el trabajo principal (y el prompt que envía a la gente aquí). Hazlo de principio a fin sin detenerte para hacer preguntas a menos que la idea no esté clara:

1. Carpeta de trabajo: usa animation-films/ dentro de la carpeta de trabajo actual del usuario. Si no existe, créala desde esa carpeta con node <skill>/scripts/new-project.mjs animation-films, luego cd animation-films && npm install (rápido después de la primera vez). Si existe (seguimiento), reutilízala tal cual.
2. Elige el estilo de la solicitud (sección 1). ¿No hay un estilo nombrado? Sugiere tres que se adapten a la idea y pregunta.
3. Planifica la historia en los seis compases (sección 3) en una tabla corta. Muéstrala en un mensaje y continúa; no esperes a menos que algo sea ambiguo.
4. Shapes primero: coloca los objetos del usuario (el actor, el contenedor, lo que fluye, lo que sube) en src/films/<idea>-shapes.ts como rutas SVG en las mismas coordenadas que P en story.ts, con la tabla de compases como comentario al principio. Cada versión de estilo de esta idea importa de este único archivo.
5. Construye src/films/<idea>-<estilo>.tsx a partir del componente del estilo (sección 3), usando el archivo de shapes, y regístralo en src/films/index.ts con el id <idea>-<estilo>.
6. Verifica: npm run render -- <idea>-<estilo> --frames y mira los seis fotogramas (sección 5). Corrige y repite.
7. Entrega: npm run render -- <idea>-<estilo> --final y dale al usuario la ruta completa de out/<idea>-<estilo>.mp4. Menciona que puede pedir otro estilo ("ahora hazlo en píxel art").

Seguimiento de re-estilizado ("ahora hazlo en píxel art", "prueba con acuarela", "lo mismo en xilografía"): permanece en la misma carpeta animation-films/, mantén la misma idea, tabla de compases y archivo de shapes, y construye un nuevo src/films/<idea>-<nuevo-estilo>.tsx a partir del componente del nuevo estilo. Regístralo junto a la versión anterior (nunca lo sobrescribas), verifica los fotogramas, renderiza el final y da la nueva ruta. Si el usuario nombra un estilo de forma ambigua ("8-bit", "película antigua", "tiza"), asígnale la sección 1. Los estilos de aspecto 3D (57, 58, 59, 62, 80) construyen objetos como mallas 3D, por lo que intercambiar objetos nuevos requiere más trabajo allí: convierte las shapes en mallas simples de torneado o caja con los ayudantes en src/styles/3d/mesh.ts.

1. Elegir un estilo

Pregunta al usuario qué estilo quiere si no lo ha dicho. Si no está seguro, muestra npm run list agrupado por familia y la galería en README.md (cada estilo tiene una vista previa animada en media/thumbs/ y un MP4 720×900 en media/videos/). Asigna de forma aproximada: "grabado japonés" → 33 Ukiyo-e, "tiza" → 02 Pizarrón, "8-bit" o "juego retro" → 64 Píxel art RPG, "arcilla" → 62 Claymation, "tipo Lego" → 58 Ladrillo de juguete (nunca lo llames Lego en pantalla), "película antigua" → 70 Cine mudo o 71 Noticiero, "pantalla ciencia ficción" → 84 HUD holograma.

Familia	Estilos (número, slug)
Dibujado en una pizarra	01 pizarra · 02 pizarrón · 05 bloc-doodle · 06 plano
Dibujado a mano y pintado	08 dibujo-mano · 09 boceto-urbano · 10 libro-crayón · 11 acuarela · 13 línea-unica · 16 línea-cel-boil
Caricatura	17 vector-plano · 21 cel-anime-80s · 22 figura-palo
Papel y títeres	23 recortado · 24 papelcorte-rojo · 25 papel-pop-up · 27 títere-sombras
Grabado y artesanía	28 xilografía · 29 grabado · 31 cartel-serigrafía · 33 ukiyo-e · 34 art-deco · 35 vidrio-emplomado
Gráfico y explicativo	39 maqueta-memphis · 51 pegatina-explicativa · 52 diagrama-matemático
Aspecto 3D	57 isla-low-poly · 58 ladrillo-juguete · 59 producto-vidrio · 62 claymation · 80 lidar-levantamiento
Épocas de cine	70 cine-mudo · 71 noticiero
Pantallas y ciencia	64 pixel-art-rpg · 81 microscopio · 84 holograma-hud · 85 placa-circuito
Abstracto	87 movimiento-liquido · 89 abstracto-generativo

src/catalog.ts es la lista única: número, id de composición (33-ukiyo-e), nombre, familia, aspecto, las palabras en pantalla que muestra un estilo y el archivo donde reside su código.

2. Mostrar un estilo integrado tal como es

npm run render -- 33            # vista previa 720x900  -> out/33-ukiyo-e_preview.mp4  (segundos a un minuto)
npm run render -- 33 --final    # maestro 2160x2700 -> out/33-ukiyo-e.mp4          (crf 16)
npm run render -- 33 --frames   # 6 fotogramas de verificación -> out/33-ukiyo-e_frames/ (+ una hoja de contactos si ffmpeg está instalado)
npm run render -- 33 --still 75 # un PNG del fotograma 75

Se puede nombrar un estilo por número, id, slug o parte de su nombre (ukiyo, pixel, stained). Los vídeos prefabricados 720×900 ya están en media/videos/, y los maestros completos 2160×2700 están en la página de lanzamiento de GitHub, por lo que para mostrar un estilo no necesitas renderizar en absoluto.

3. Recontarlo con la historia u objeto del usuario

La historia está fijada en src/story.ts. Mantén su sincronización y cambia lo que se dibuja. Eso es lo que hace que una nueva película salga bien a la primera: cada estilo ya sabe cómo escenificar estos compases.

Los compases (fotogramas a 30 fps, nunca los muevas para una película de 5 segundos):

Fotogramas	Compás	Valor de storyAt(f)
0–24	el actor entra por la derecha	kx, ky
24–42	se prepara (se inclina)	tilt (0 → −38°)
42–96	la acción principal (el vertido)	streaming, stream (una ruta SVG desde tip hasta la taza)
44–100	el resultado crece (la taza se llena)	level 0 → 1, surface (la elipse del chai)
96–126	termina y se va	tilt vuelve a 0, kx se desliza hacia afuera
104–150	la consecuencia (el vapor sube)	steam[0..2] 0 → 1, dibujado con steamPath(i, p, t0)

P en story.ts contiene las rutas SVG para la taza (kulhadBody, kulhadOutline, rim) y la tetera (kettleBody, kettleLid, kettleSpout, kettleHandle, kettleBand, más KNOB). La tetera se dibuja alrededor de su propio origen y se coloca con translate(kx, ky) rotate(tilt).

Primero asigna la historia del usuario a los mismos seis compases, en una tabla corta, y muéstrasela. Ejemplos:

Idea del usuario	Actor (tetera)	Acción (vertido)	Resultado (llenado)	Consecuencia (vapor)
Café en una taza	cafetera	chorro de café	taza se llena	vapor
Regar una planta	regadera	gotas de agua	suelo se oscurece, un brote crece con level	dos hojas se abren
Ahorrar dinero	una mano con una moneda	cae la moneda	alcancía se llena (level → pila de monedas)	destellos
Pintura en un bote	bote de pintura	pintura espesa	bote se llena	una gota se asienta
Subida de datos (estilos abstractos o informativos)	una nube	paquetes viajan por stream	una barra o indicador se llena con level	una marca de verificación sube

Luego constrúyelo:

1. Trabaja en un proyecto separado para que el skill instalado se mantenga limpio: por defecto animation-films/ en la carpeta actual del usuario (ver "La solicitud habitual" arriba), creado con node <skill>/scripts/new-project.mjs <carpeta> y luego npm install dentro. Nunca construyas las películas del usuario dentro de <skill>.
2. Copia el componente del estilo elegido desde su archivo (ver src/catalog.ts) a src/films/<nombre-pelicula>.tsx, junto con los ayudantes que importa. Nunca edites los 39 originales en su lugar: son la referencia.
3. Reemplaza las shapes, no la sincronización: intercambia las rutas de la tetera y la taza por los objetos del usuario (mantenlos aproximadamente del mismo tamaño y posición: taza centrada en x 540, borde en y ≈ 800; actor en reposo alrededor de (796, 324) con su "pico" en el punto local (−251, −62)), recolorea el líquido, cambia lo que sube. Mantén los propios materiales, lógica de paleta, filtros, textura y carácter de movimiento del estilo (escalonado en pares o ternas para medios artesanales, suave para digital, parpadeo para película).
4. Si el estilo muestra palabras (enumeradas en el campo text del catálogo: 51, 52, 64, 70, 71, 84 y 85 muestran palabras), reescríbelas para la nueva historia: cortas, en inglés sencillo, solo sobre la historia.
5. Registra la película en src/films/index.ts y renderízala (sección 4).

Una historia más larga o diferente (más compases, dos actores, un movimiento de cámara): escribe un nuevo archivo de historia junto a story.ts (por ejemplo src/films/mi-historia.ts) con su propio storyAt(f) que devuelva cada valor que necesite el dibujo, enumera los nuevos compases en una tabla al principio, establece durationInFrames en la película y mantén la regla "el archivo de historia posee toda la sincronización, el archivo de estilo posee todos los aspectos". Cuantifica fotogramas (Math.floor(f / 2) * 2) solo donde se espera que el estilo parezca hecho a mano.

Reglas para el código: solo determinista (sin Math.random(), sin Date; usa funciones con semilla del fotograma o índice), ids únicos de filtro y clipPath, fuentes solo a través de @remotion/google-fonts/<Font> con loadFont() a nivel de módulo, y nada instalado más allá de package.json.

4. Renderizar

Necesidad	Comando
Vistazo rápido	npm run render -- <película-o-estilo> (720×900, crf 23)
Final	npm run render -- <película-o-estilo> --final (2160×2700, crf 16)
Una película de src/films	npm run render -- <id-película> --final (las mismas banderas funcionan: --frames, --still 75)
Edición en vivo	npm run studio abre Remotion Studio en el navegador

Los estilos de aspecto 3D (57, 58, 59, 62, 80) pintan una escena renderizada por software en un canvas a 1.5× (1.25× para 80) de 1080 de ancho, luego la estiran a 2160, por lo que son ligeramente más suaves y lentos que el resto. Para un final más nítido, aumenta el segundo argumento de glView(...) en src/catalog.ts (2 = 4K nativo, aproximadamente el doble de lento).

5. Verificar la salida antes de entregarla

Ejecuta npm run render -- <id> --frames y mira cada fotograma (Lee los PNG). Luego corrige y vuelve a renderizar. Permite dos o tres pases.

• Historia legible: en el fotograma 50 algo se está vertiendo claramente, en el 75 el contenedor se está llenando visiblemente, en el 149 la consecuencia es visible.
• Nada recortado en los bordes del fotograma; el actor entra completamente y sale completamente.
• Capas: el líquido permanece dentro del contenedor, el chorro entra en él (no al frente del borde cercano), el vapor comienza en la superficie.
• El estilo se lee de un fotograma: alguien que conozca el estilo debería poder nombrarlo a partir de un fotograma fijo. Dos estilos nunca deberían parecer una recoloreación el uno del otro.
• Contraste: el líquido y el chorro son visibles contra el fondo, nada embarrado.
• Carácter de movimiento: escalonado donde el medio es hecho a mano, suave donde es digital; sin parpadeo que no haya sido intencional.
• Texto: solo las palabras que pretendías, escritas correctamente, dentro del fotograma.
• Reglas de contenido (abajo) todas se cumplen. Finalmente, mira el MP4 de vista previa una vez de principio a fin, luego renderiza el final.

6. Reglas de contenido (siempre)

• Sin marcas, logotipos, productos, personas, nombres de canales o redes de TV reales, y sin nombres comerciales en pantalla. "Ladrillo de juguete" es un ladrillo de juguete genérico, nunca una marca nombrada.
• Sin mapas, lugares o fronteras nacionales reales, y sin banderas, símbolos políticos o consignas. Un paisaje, si lo hay, es inventado sin geografía reconocible.
• Sin copiar una película, programa, secuencia de títulos, juego, personaje o la silueta o sprites de un personaje conocido. Un estilo o género está bien; una obra existente en particular no.
• Sin hechos inventados: sin estadísticas, precios, fechas, citas o fuentes falsas. Un estilo de datos grafica los propios valores de la historia (como el nivel de llenado) y nada más.
• Texto solo cuando el estilo es tipográfico, de radiodifusión o una interfaz de juego, y entonces texto corto en inglés sobre la historia misma.
• Mantenlo original: la historia del usuario, tus propios dibujos, el estilo como técnica.

Archivos

Ruta	Qué
src/story.ts	La historia: tamaño, sincronización, compases, las rutas de los objetos, storyAt(f) y steamPath()
src/kit.tsx	Ayudantes compartidos: Stage (un escenario SVG), Paper (grano de papel), Rough (desplazamiento tambaleante), region
src/catalog.ts	Los 39 estilos: número, id, nombre, familia, aspecto, palabras en pantalla, archivo, componente
src/styles/<familia>/	El código de dibujo, agrupado por técnica
src/films/	Las películas del usuario
src/Root.tsx, src/index.ts	Registra cada estilo y película como una composición de Remotion
scripts/render.mjs	npm run list / npm run render
scripts/new-project.mjs	npm run new -- <carpeta> copia el código a un proyecto nuevo
media/videos/, media/thumbs/	Un MP4 720×900 y un WebP animado de cada estilo