syahdestiny/animacion-javascript

Animación en JavaScript (cada fotograma dibujado en código)

Crea cortometrajes animados donde cada píxel se calcula: sin imágenes, sin fuentes que cargar, sin librerías. Un solo archivo HTML contiene toda la pieza; un navegador sin interfaz gráfica lo recorre fotograma a fotograma para convertirlo en MP4.

Modelo

Creado y probado con Claude Opus 5.5; la calidad del dibujo depende en gran medida del modelo. La auto-verificación a continuación necesita entrada de imágenes: si el modelo actual no puede ver imágenes, indíquelo al usuario y trate la verificación visual como no realizada. Otros modelos no han sido probados; si el resultado se ve tosco, diga que un modelo más potente probablemente ayude, en lugar de afirmar que es lo mejor posible.

Flujo por defecto: no te detengas a preguntar

Ejecuta directamente. Elige valores predeterminados sensatos y menciona alternativas al entregar. Pregunta antes de comenzar solo si no hay ningún tema en absoluto (por ejemplo, "haz una animación", nada más).

1. Lee el resumen. Deduce la forma (historia, explicador, poema, bucle, página interactiva), la duración (por defecto 15-20 s; más larga solo cuando el tema no se puede contar en ese tiempo) y la relación de aspecto (por defecto 1920x1080) de lo que dijo el usuario. El texto en pantalla está en el idioma en que el usuario escribió el resumen; hazlo bilingüe solo si lo pide o si la audiencia claramente lo es. references/forms.md tiene una estructura breve para cada forma.
2. Planifica el aspecto visual y el sonido a partir del tema y la audiencia, con tus propias palabras: qué es la película, cómo se ve y suena, y por qué encaja con este tema y esta audiencia. No hay una lista que llenar; references/techniques.md tiene ingredientes, y los valores iniciales son marcadores de posición, no un estilo de casa. Nunca reutilices el aspecto visual o el sonido de una pieza anterior por defecto: dos temas diferentes no deberían verse ni sonar igual. Si el usuario señala la pieza de otra persona ("como esa que se hizo viral"), toma prestadas sus técnicas, nunca sus personajes, historia o composiciones.
3. Cuadrícula de tiempos, guion gráfico y bloqueo, como datos (references/storyboard.md). Primero tempo y secciones; luego una lista de planos con un ritmo que se ajuste a la forma (tabla de ritmo en references/storyboard.md; cada plano con encuadre, movimiento de cámara, acción, el tiempo en que cae, su sonido, su transición); luego el bloqueo (para una historia o un explicador, las pistas de un mundo continuo). Estos se colocan en la página como BPM, SECTIONS, SHOTS, EVENTS: las escenas, la cámara y la banda sonora los leen, por lo que la imagen y el sonido coinciden por construcción. Para una historia o un explicador, verifica la lógica: cada evento causado por el anterior, el metáfora visible en la imagen.
4. Construye a partir de templates/starter.html. Ya está impulsado por el guion gráfico: un mundo dibujado en coordenadas del mundo, withCamera por plano, claim() para cada pieza de texto y cada objeto clave. Reemplaza la paleta de marcador de posición y el mundo de demostración. Mantén el contrato: draw(frame) es una función pura del número de fotograma. Usa rng(seed) / hash2(), nunca Math.random o Date.
5. Auto-verifica, luego renderiza (siguiente sección). Corrige y vuelve a verificar hasta que esté limpio.
6. Entrega: el MP4 y el HTML (se reproduce en vivo en un navegador; al hacer clic comienza el sonido). Luego, en una o dos líneas, ofrece lo que se puede cambiar: otro aspecto, música de IA en lugar de sintetizada, diferente duración.

Para la música, usa la habilidad soundtrack (por defecto: sintetizada en la página con Web Audio, sin necesidad de clave).

Auto-verificación (el agente hace esto; el usuario nunca lo ve)

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # un fotograma por segundo, saliendo de los cortes
node scripts/render.mjs piece.html shot --stills 90,300,610   # momentos específicos
node scripts/render.mjs piece.html piece.mp4                  # renderizado completo (+ banda sonora si la página tiene una)
node scripts/asset-audit.mjs piece.html                       # prueba de cero recursos: salida 1 si se carga o incrusta algo
node scripts/layout-check.mjs piece.html                      # texto que colisiona con texto, o que cruza un objeto reclamado
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # cortes en el compás, sin sobresaltos

Luego dos pasadas a ojo, ambas en references/qc.md:

1. Conformidad con el guion gráfico: un fotograma fijo en el tiempo de acción de cada plano, leído contra su fila (¿está el actor donde dice el bloqueo, haciendo lo que dice la fila?).
2. Pasada del director: la hoja de contactos a 2 fotogramas por segundo (--sheet .5), puntuada por ritmo contra la forma, variedad de encuadres, fotogramas muertos, si cada acción tiene su sonido, y si el aspecto visual se ajusta a la audiencia. Haz al menos dos rondas. Renderiza fotogramas fijos de los fotogramas que cambias en lugar de re-renderizar toda la película cada vez.

Solo si se activa

Cuándo	Hacer
Un personaje aparece en más de una escena	Antes de las escenas, renderiza el personaje solo (expresiones + poses) y revísalo tú mismo contra references/character.md. Los personajes exponen puntos de anclaje (boca, manos) para que los accesorios se adhieran a ellos.
El usuario proporcionó fotos de personas reales, mascotas o lugares	Construye el personaje a partir de las fotos con el método de extracción en references/character.md. Las fotos se quedan locales: nunca las subas ni las pongas en nada publicado.
Es una pieza de persona real y el usuario está presente	Al entregar (no antes), ofrece usar fotos de accesorios o personas clave para hacerla más suya.
El texto o un globo de diálogo sigue a un personaje en movimiento	Colócalo con placeFree(w, h, [above, right, left, below]) para que se aparte de cualquier cosa ya reclamada.
El texto en pantalla no es latino (chino, japonés...)	Usa una pila de fuentes CJK; verifica que cada glifo se renderice (las fuentes monospace intercambian silenciosamente glifos faltantes, p. ej., ≈ se convirtió en =).
La página se publicará como página web	Entrega el HTML; mantén el bucle de vista previa en vivo y el audio de reproducción al hacer clic.

Reglas que previenen los fallos comunes

• Función pura del tiempo. Sin estado de requestAnimationFrame, sin animaciones CSS, sin física acumulada: calcula cada fotograma solo a partir de t, o la renderización y la vista previa no coincidirán.
• Una línea dibujada a mano hierve, no tiembla. Cuando una película establece LOOK.wobble, cambia la semilla de wobble cada 4 fotogramas (LOOK.boil: 4), no cada fotograma. Cada fotograma se lee como ruido; ~7.5 cambios por segundo se leen como dibujados a mano.
• Formas redondeadas para los cuerpos. Construye figuras a partir de elipses y rectángulos redondeados. Los polígonos sin procesar con pocos puntos se leen como signos (una mano pentágono, un torso cuadrado).
• Elige el ángulo que haga legible la pose. Un cuerpo largo con extremidades rechonchas de lado se lee como una oruga; la misma pose de frente (escorzada) se lee como un bebé boca abajo.
• Dibuja de atrás hacia adelante, explícitamente. Cabello trasero, luego cuerpo, luego cuello, luego cara, luego cabello delantero. La mayoría de los errores de "algo cubre la cara" son por orden de dibujo.
• Puntos de impacto en cortes y acciones. Cada corte y cada acción visible está en EVENTS/CUES; la banda sonora coincide con ellos (ver soundtrack).
• El texto nunca colisiona. Reclama cada cuadro de texto y objeto clave; layout-check debe imprimir LIMPIO. Un pie de foto que se superpone al borde de un monitor o a una cara parece descuidado, y los ojos en una hoja de contactos lo pasan por alto.

Archivos

• templates/starter.html: librería de dibujo (tinta, ilustración, primitivas planas / de plano, etiquetas, papel, capas filtradas), withCamera, claim/placeFree, y un esqueleto de dos planos impulsado por guion gráfico.
• scripts/render.mjs: MP4 / fotogramas fijos / hoja de contactos. window.CUES y window.SCORE son opcionales: en un renderizado completo escribe <out>.cues.json y multiplexa la banda sonora SCORE (sin SCORE = MP4 silencioso). Necesita un tamaño de canvas par.
• scripts/asset-audit.mjs: escaneo estático + verificación de red en vivo para cualquier cosa cargada o incrustada.
• scripts/layout-check.mjs: lee window.LAYOUT sobre toda la película y lista las colisiones de texto con sus tiempos.
• references/storyboard.md: cuadrícula de tiempos, lista de planos, bloqueo, continuidad y lógica de la historia.
• references/techniques.md: técnicas de dibujo probadas (tinta, impresión a color puntual, grabado de una sola línea, palabras como formas, rellenos de marcador, formas de ilustración).
• references/forms.md: notas de estructura por forma.
• references/character.md: solo cuando hay un personaje.
• references/qc.md: la lista de auto-verificación.

Requisitos: Node 18+, ffmpeg, Chrome (o npx playwright install chromium), y npm i playwright-core en la carpeta desde la que ejecutas los scripts (tu proyecto, no la carpeta de la habilidad).