risingjerry/motion-skill

Animación por código (motion)

El video está escrito en código: cada fotograma se calcula a partir del tiempo t, así que "aquí más lento" solo significa cambiar un número y volver a renderizar, sin necesidad de regrabar. No se utiliza ningún modelo de IA para generar imágenes o videos; todo lo que aparece en pantalla proviene de materiales reales o de código.

Elige primero el nivel

Los tres niveles usan el mismo flujo de trabajo. Cuanto más abajo, más se parece a una grabación real y más lento es el proceso. Elige según lo que necesite el video; se pueden combinar.

Nivel	¿Qué son las imágenes?	Ideal para	Punto de partida
1. Animación 2D	Logotipo real, capturas reales, formas que se transforman	Apps, software, aperturas de marca	templates/2d.html
2. 3D en navegador	Tarjetas de interfaz en espacio 3D, cámara en movimiento; transiciones de silueta con metraje real	Demostraciones con múltiples pantallas, videos que incluyen actores reales	templates/3d.html, scripts/silhouette.py
3. Estudio en Blender	Modelos de productos físicos, una sola luz, materiales realistas	Auriculares, teléfonos, tazas y otros objetos físicos	scripts/blender/studio.py

Explicación detallada: references/layers.md.

Flujo de trabajo (en orden, sin saltos)

1. Pregunta y prepara materiales reales. ¿Qué es el producto?, ¿para quién?, ¿duración?, ¿plataforma?, ¿qué acción debe tomar el espectador al final? Todos los materiales deben ser reales: archivo del logotipo oficial, capturas reales del dispositivo (primero borra notificaciones, avatares, números de teléfono), colores y tipografía de la marca. No uses imágenes promocionales de la tienda de aplicaciones como interfaz, ni dibujes el logotipo de memoria. Para objetos físicos, pide fotos desde varios ángulos, idealmente tomadas por el usuario, para comparar las proporciones del modelo después.
2. Define el final. El final solo debe incluir el icono y el logotipo textual (o conectar con metraje real). No añadas frases como "Descargar ahora" o "Abrir App". Tampoco pongas texto pequeño de exención de responsabilidad como "Concepto"; si es necesario explicar algo, hazlo en la descripción del video.
3. Crea un storyboard numerado y espera la aprobación. 5-10 tomas, cada una con: intervalo de tiempo, imagen, movimiento, cómo se transforma en la siguiente toma y texto en pantalla. Escribe shots.json, ejecuta node scripts/render.mjs board shots.json board.png para generar una imagen y mostrársela al cliente. Sin aprobación no se continúa con el video final; los cambios son más baratos en esta etapa. Consulta references/storyboard.md para el formato.
4. Construye la página. Copia la plantilla y templates/motion-kit.js a la carpeta de materiales. Todos los beats se escriben en BEATS al inicio de la página; para cambiar el ritmo, solo modifica esta sección. Consulta references/html-engine.md para las convenciones de la página.
5. Verifica fotograma a fotograma antes de mostrarlo. render.mjs still extrae momentos clave (3-4 puntos por transición, no solo imágenes estáticas). scripts/sheet.py los combina en una imagen para que la revises. Luego ejecuta los scripts de verificación:
   • render.mjs probe + scripts/layout_check.py probe: el texto debe estar al menos 40 px (en 4K) del sujeto; el sujeto debe estar centrado.
   • 3D: scripts/blender/motion_check.py (clipping, rotación máxima de 6° por fotograma, velocidad de rotación suave), scripts/seam_check.py (costuras de cierre ≤ 1 px). Consulta la lista completa en references/checklist.md.
6. Solo salida 4K. node scripts/render.mjs video page.html titulo-4K.mp4 --scale 2 (1920x1080 → 3840x2160). Solo ejecuta un renderizado 4K o de Blender a la vez por computadora. Extrae fotogramas del video final en 4K para verificar: python3 scripts/sheet.py video ....
7. Añade sonido solo cuando la imagen esté definida. Cualquier cambio en la imagen desplazará todos los beats. Tanto la música como los efectos de sonido son obligatorios; el beat más fuerte de la música debe coincidir con el punto clave de la imagen. La mezcla debe cumplir: -14 LUFS, pico verdadero ≤ -1 dBTP; el flujo de video se copia sin recodificar. Consulta references/sound.md.
8. Iteraciones. En cada ronda, primero haz una copia de seguridad. Después de modificar, vuelve a extraer fotogramas para verificar y explica claramente qué cambió. Guarda como nueva versión, sin sobrescribir ni eliminar los archivos del cliente. Indica honestamente qué se ha verificado: una imagen estática no equivale a reproducción; ver una imagen no es lo mismo que escuchar la mezcla.

Reglas para que el video se vea bien

La explicación completa está en references/transitions.md y references/blender-3d.md. Aquí están las reglas imprescindibles:

• Cada toma surge de la anterior. Sin fundidos de entrada/salida ni encadenados. Un mismo objeto se transforma, da la vuelta, se despliega o se pliega; el ojo del espectador no necesita buscar algo nuevo.
• La acción se centra. Imagina una mira en el centro de la pantalla; el protagonista siempre está cerca de ella.
• La imagen siempre está en movimiento. Incluso las tomas estáticas deben tener un zoom muy lento o un desplazamiento.
• Un movimiento, una curva. Si hay zoom, solo zoom en una dirección; si hay rotación, solo gira sin retroceder. Acelera rápido, frena lento y deja un tiempo de frenado prolongado.
• El texto es breve y aparece desde desenfocado; sin rebotes ni ampliaciones repentinas. El texto no debe superponerse al sujeto principal.
• En 3D, usa una sola luz, fondo negro. Esto es la mayor parte de la apariencia "como de estudio".
• Física realista en 3D: las tapas cierran perfectamente; los objetos no se atraviesan; dos objetos que intercambian posiciones lo hacen mediante una órbita 3D, no en línea recta; la velocidad de rotación es suave.
• Compara el modelo con fotos reales; corrige el modelo si las proporciones, los radios de esquina o la posición de aberturas no coinciden.
• La transición de silueta comienza con un primer plano, luego se abre y corta bruscamente al metraje real. Consulta references/silhouette.md.
• El sonido y la imagen solo se desplazan globalmente, sin cambios de velocidad ni tono.

Normas

• Marca: Solo trabaja para marcas que el cliente posea o tenga permiso de usar. Las marcas de terceros solo como ejercicios personales; no te hagas pasar por oficial, no publiques anuncios ni imites su publicidad real.
• Materiales: Usa solo materiales, tipografías, música y modelos creados por el cliente o con licencia; verifica que la licencia cubra este uso.
• Afirmaciones: Todos los números y afirmaciones en el video deben ser reales y verificables; no inventes datos ni reseñas.
• Privacidad: Elimina información personal de las capturas y metraje real; las personas que aparecen deben dar su consentimiento.
• Servicios de pago (locución, música generada por IA, etc.) consumen crédito del cliente; úsalos solo si el cliente lo solicita.

Resumen de scripts

Script	Función
scripts/render.mjs	Página HTML → fotogramas / mp4 4K / datos de posición (probe) / storyboard (board)
scripts/sheet.py	Fotogramas o video → una hoja de verificación con marcas de tiempo (extraída de la resolución original)
scripts/layout_check.py	Verifica distancia entre texto y sujeto, y centrado del sujeto
scripts/seam_check.py	Desplazamiento de costura entre dos piezas en la cámara real (píxeles)
scripts/blender/studio.py	Escena de estudio con una luz + render EEVEE/Cycles, admite GLB/glTF/USDZ/OBJ/FBX, --demo incluye modelo de ejemplo
scripts/blender/motion_check.py	Verifica clipping fotograma a fotograma, velocidad angular y picos de rotación
scripts/silhouette.py	Extrae máscara de persona (macOS Vision, opcional) → silueta vectorial suave, puede comenzar desde primer plano
scripts/audio/synth.py	Sintetiza efectos de sonido y base musical (libres de derechos)
scripts/audio/mix.py	Sincroniza música con beats clave, coloca efectos de sonido, sidechain para dar espacio, normaliza volumen, integra en el video
scripts/encode.py	PNG por fotograma → mp4
scripts/doctor.py	Verifica dependencias; indica qué falta y cómo instalarlo

Cuándo leer cada archivo

Si estás…	Lee
Eligiendo nivel y estimando trabajo	references/layers.md
Escribiendo el storyboard	references/storyboard.md
Escribiendo la página HTML y generando el video	references/html-engine.md
Diseñando transiciones entre tomas	references/transitions.md
Trabajando con 3D de productos físicos	references/blender-3d.md
Haciendo siluetas y combinando con metraje real	references/silhouette.md
Añadiendo música y efectos de sonido	references/sound.md
Verificando antes de la entrega	references/checklist.md
Cuando la imagen no se ve bien	references/pitfalls.md

Entorno

Node.js 20+, Python 3.9+ (numpy, Pillow, opencv-python-headless), ffmpeg, Google Chrome o Chromium. El nivel 3 requiere Blender (gratuito). La segmentación automática de siluetas requiere macOS 14+; en otros sistemas usa otras herramientas para generar la máscara. Antes de empezar, ejecuta python3 scripts/doctor.py; informa al cliente qué falta y cómo instalarlo. Si el directorio de la habilidad contiene .venv, los scripts de Python se ejecutan con .venv/bin/python (Windows: .venv\Scripts\python); en Windows reemplaza python3 por python.