Clay-Themed Stop-Motion

Vídeo de arcilla en stop-motion con temática personalizada

Este skill se utiliza para generar vídeos cortos con un estilo visual consistente y una temática reemplazable. Describe un método de producción genérico basado en "textura de arcilla + capas de materiales + movimiento cuadro a cuadro + subtítulos y sonido"; la ciudad, la fecha, los personajes, los puntos de referencia, los vehículos, la trama y los efectos de sonido deben extraerse del brief actual del usuario, sin hardcodear ningún proyecto concreto.

La entrega final debe incluir un proyecto fuente HyperFrames ejecutable, materiales locales reales, audio, MP4 exportado y una imagen final de verificación por fotogramas. Una previsualización HTML no renderizada no es un producto final.

Primero, definir las variables de la temática

Antes de escribir código, extrae y documenta los siguientes datos a partir de los requisitos del usuario:

• Una frase que describa la temática: quién realiza qué objetivo en qué mundo;
• Tiempo, lugar, época, punto de referencia o cosmovisión;
• Número de personajes, apariencia, vestimenta, atrezo y acciones;
• Material visual: arcilla, cartón, tela, madera, metal u otras texturas artesanales;
• Fuente de color e idioma de la cabecera y los créditos;
• Duración, formato de imagen, plataforma, subtítulos y requisitos de audio.

Si el usuario solo proporciona un vídeo de referencia, primero analiza su material, ritmo de cámara, composición, subtítulos y sonido, y luego escribe las variables de la temática en DESIGN.md. El vídeo de referencia proporciona método y estilo, pero no determina automáticamente la historia del nuevo vídeo.

Flujo de trabajo estándar

1. Analizar la referencia y escribir hipótesis. Anota duración, relación de aspecto, ritmo de cámara, pausas de stop-motion, material, posición de subtítulos, música y efectos de sonido. Los elementos que no se puedan confirmar deben documentarse como hipótesis, sin fingir que son hechos.
2. Primero escribir el documento de diseño. Crea DESIGN.md, STORYBOARD.md y una lista de materiales. Define los colores de la temática, materiales, tipografía, tiempos de cámara, subtítulos, cues de audio y texto de créditos.
3. Generar materiales por capas. Guarda fondos, personajes, atrezo, puntos de referencia, texturas y efectos locales como PNG/JPG/WAV. Los personajes y el atrezo de primer plano deben ser PNG transparentes, manteniendo la coherencia de posición de cámara, iluminación, escala y material.
4. Realizar una auditoría de atribución de materiales. Abre cada PNG de personaje/atrezo y enumera los objetos que ya contiene (mochilas, tazas, tarjetas, sombreros, sombras, etc.). Cada objeto visible solo debe tener un origen: el PNG del personaje, una capa de material independiente o HTML/CSS. No se puede añadir una versión CSS simplificada a un objeto que ya está dibujado en el PNG del personaje. Consulta references/compositing-audit.md.
5. Primero completar la imagen estática. Usa index.html como entrada raíz; si se necesita vertical, coloca una composición independiente en compositions/. Asegúrate de que cada escena funcione en estado estático antes de añadir movimiento.
6. Añadir movimiento cuadro a cuadro determinista. Usa líneas de tiempo pausadas de GSAP, tiempos de inicio y fin de escena, y un número limitado de steps(n). Usa pequeñas traslaciones, escalas, rotaciones, vibraciones y pausas para simular la sensación artesanal del stop-motion. Prohíbe Math.random(), Date.now(), repeat: -1 y transformaciones CSS/GSAP que se superpongan.
7. Añadir subtítulos y créditos. Los subtítulos son capas HTML, deben ser legibles en diferentes relaciones de aspecto. Los créditos solo deben contener el texto formal solicitado por el usuario; prohíbe preview, draft, test, Codex o prompts internos.
8. Añadir audio por capas. La música y los efectos de sonido se añaden como archivos de audio locales. Cada <audio> debe tener data-start, data-duration, data-track-index, data-volume y fundidos de entrada/salida; los cues de inicio no cero en composiciones verticales anidadas deben añadir data-hf-media-start-basis="local". El audio de marcador de posición solo se puede usar en borradores, no en la línea de tiempo final. No uses ruido blanco directamente para imitar sonidos naturales como olas, viento o fuego; si no hay material adecuado, déjalo vacío o reduce la densidad de audio. Antes de entregar, revisa cada pista y la mezcla según references/audio-layout.md.
9. Recomponer para la plataforma. La versión vertical no debe ser solo un recorte de la horizontal. Configura data-width="1080" data-height="1920", mantén el sujeto principal, los puntos de referencia clave y los subtítulos, coloca el texto en la zona segura central y reposiciona personajes y atrezo. Consulta references/vertical-export.md.
10. Renderizar, extraer fotogramas y revisar. Ejecuta lint, validate, render, ffprobe y contact sheet. Verifica formato de imagen, duración, subtítulos, jerarquía de capas, objetos duplicados, cuadros flotantes, marcas internas al final, vídeo H.264 y audio AAC; escucha realmente las pistas individuales y la mezcla final en los 0–5 segundos iniciales, transiciones principales y final. La comprobación con ffprobe y niveles no puede sustituir la comprobación auditiva. Consulta references/workflow.md y references/audio-layout.md.

Convenciones generales del proyecto

• Mantén un único index.html raíz; los formatos alternativos van en compositions/ para evitar que HyperFrames encuentre múltiples entradas raíz.
• Usa materiales rasterizados reales para puntos de referencia reales o sujetos principales; las formas geométricas CSS solo se pueden usar para maquetación temporal, nunca como activo visual final.
• El contenido de la temática lo determina el brief; no se puede predefinir en el skill una ciudad, ruta, fecha, profesión o personaje fijo.
• Cada objeto de atrezo debe indicarse en la lista de materiales como "incrustado en PNG" o "capa independiente". Si está incrustado, no se debe dibujar una capa CSS con la misma semántica.
• Cuando se necesiten objetos de entorno, usa IDs y comentarios explícitos (por ejemplo, torniquete, estufa, puerta, tren o gotas de lluvia) para evitar que los objetos del entorno parezcan marcas pegadas a los personajes.
• No uses logotipos reales de empresas, información personal ni música sin licencia; prioriza carteles genéricos, texturas generadas y audio local determinista.

Comandos de verificación

npm install
npx hyperframes lint
npx hyperframes lint compositions/vertical.html
npx hyperframes validate --no-contrast
npm run render
npm run render:vertical

Después de exportar la versión vertical, verifica con ffprobe-static del proyecto real:

FFPROBE=$(node --input-type=module -e "import p from 'ffprobe-static'; console.log(typeof p === 'string' ? p : p.path)")
python3 scripts/check_render.py outputs/final-vertical.mp4 \
  --ffprobe "$FFPROBE" --width 1080 --height 1920 --max-duration 60

La contact sheet final debe incluir al menos la cabecera, la acción principal, las transiciones, el clímax/resultado y los créditos. Que el renderizado sea exitoso no significa que sea visualmente correcto: si aparecen cuadros blancos, marrones, azules o grises inexplicables, puntos de referencia duplicados, objetos duplicados, elementos flotantes o marcas de previsualización internas, se debe volver a la auditoría de atribución de materiales.

Documentos de referencia

• references/workflow.md: brief general, lista de materiales, estructura de escenas y criterios de aceptación.
• references/compositing-audit.md: atribución de objetos incrustados, capas duplicadas y verificación de artefactos visuales.
• references/vertical-export.md: zona segura 9:16 y reglas de recomposición.
• references/audio-layout.md: diseño general de música/efectos y verificación de sonoridad.