theatlasteam/motion-design-skill

Diseño de movimiento de producto

Crea una historia continua, no una presentación de diapositivas de tarjetas atractivas no relacionadas. Preserva el objeto de atención del espectador a través de la intención → acción → resultado → valor del producto → marca.

Elige un punto de partida

Lee el README del ejemplo relevante, luego su código fuente. Resuelve las rutas relativas a esta skill; nunca asumas que existen archivos de una sesión anterior.

Tarea	Comienza aquí
Rueda tipo iOS, dígitos rodantes, segmentos, regla	examples/controls/README.md
Tipografía cinética, entrada de UI distorsionada, exhibición guiada por cursor	examples/relay/README.md
Compositor grande, cámara vinculada a escritura, Enviar → resultado generado	examples/composer/README.md
Giro corto de dispositivo en 3D real (9:16)	examples/device-studio/README.md
Lanzamiento móvil completo de 22 segundos	examples/milo-launch/README.md
Composición MIDI, instrumentos muestreados, mezcla	examples/midi-score/README.md

Lee references/direction.md para la puesta en escena y el ritmo, references/deterministic-rendering.md antes de exportar video, y references/asset-rights.md antes de publicar o redistribuir assets. Los enlaces oficiales de inspiración de terceros están en references/gemini.md; esos videos son referencias, no assets open source empaquetados.

Establece la toma

1. Reutiliza el producto, la audiencia, la relación de aspecto, la duración y el tono ya proporcionados. Pregunta solo por la información faltante que cambie el trabajo. Para un producto ficticio, elige un concepto coherente en lugar de preguntar por cada detalle.
2. Inspecciona el material real del producto/marca antes de hacer afirmaciones sobre el producto. Nunca inventes capacidades, métricas, testimonios o capturas de pantalla de producción.
3. Para una nueva dirección visual, comienza con una toma HTML terminada de 2 a 3 segundos a menos que se haya solicitado explícitamente una película completa. Preserva la coreografía aprobada al extenderla.
4. Usa HTML/CSS/JavaScript autónomo para prototipos de forma predeterminada. Una solicitud de HTML no es permiso para realizar un render de video costoso, una subida o una publicación en la nube. Cambia de pila solo cuando sea necesario o solicitado.
5. Indica brevemente la secuencia de acciones y las transferencias de cámara antes de codificar. Mantén claro el objeto focal de cada toma.

Dirige el movimiento, no decores

• Mide las palabras después de que las fuentes reales se carguen. Reorganiza las palabras anteriores cuando llegue una nueva, manteniendo el centro de la composición.
• Separa las curvas de posición, opacidad y desenfoque. Haz visible el movimiento temprano y aclara el desenfoque antes del sobrepaso final. Anima la salida deliberadamente en lugar de un desvanecimiento predeterminado.
• Usa un sobrepaso corto y legible y estabiliza; no hagas que cada objeto oscile. examples/relay/scripts/motion-core.mjs contiene resortes de texto/cámara probados, funciones de deformación Bézier y cilíndrica.
• Deforma un panel con múltiples tiras horizontales cuando la curvatura importe; una sola rotación plana no es una superficie curvada. Impulsa el movimiento diagonal en ambos ejes desde un valor de progreso.
• Acércate a una acción real en lugar de mostrar un panel de control ilegiblemente pequeño. Mueve el cursor y la UI en el mismo sistema de coordenadas transformado, incluida la compensación de puntos calientes.
• Muestra hover → presionar → soltar → cambio de estado real. Un arrastre necesita recogida, desplazamiento, aterrizaje y estado relacionado actualizado. Deja que el resultado siga a la acción que lo causó.
• Mantén el tiempo del shader en el reloj de la escena. Indica cuando WebGL falla; nunca llames a un gradiente estático un shader en ejecución.

Controles interactivos versus movimiento grabado

Usa los controles incluidos en lugar de reconstruir su física para cada video.

• setValue(value) es interactivo: integra un resorte desde la posición y velocidad de presentación actuales. Permite que la entrada lo interrumpa.
• renderAt(value) es determinista: establece inmediatamente un valor de componente fraccionario. En video, deriva este valor de frame/fps; no ejecutes un resorte en vivo o un bucle de reloj de pared durante la captura.
• Para una rueda, muestra una ventana de selección central fija y dos opciones curvas a cada lado en el medio de la lista. Calcula la posición, inclinación, escala y opacidad a partir de la distancia fraccionaria al centro.
• Rastrea el arrastre 1:1 con captura de puntero. Al soltar, proyecta el impulso, encaja en un elemento válido y lleva la velocidad a la estabilización. Aplica resistencia de límite progresiva.
• Soporta rueda/trackpad, teclado, foco, nombres/valores actuales accesibles, viewports estrechos y movimiento reducido. No reproduzcas sonidos ni hápticos sin un requisito deliberado.
• Detén una línea de tiempo de demostración externa al manipular directamente; dos relojes no deben competir por el mismo componente.

Compositor y cámara

Muestra ambos extremos redondeados mientras el campo está vacío. Expande un campo finito durante la escritura. Mide el texto y la posición de Enviar; sigue el texto en crecimiento desde el inicio con aceleración y frenado, y detente en Enviar. Protege una región de texto separada para que las letras nunca pasen debajo del botón. Después de Enviar, revela un resultado escenificado de forma independiente y una acción significativa dentro de él; no transformes la entrada en la salida. Usa el ejemplo genérico de Canvas Lab para la coreografía, no como una afirmación sobre el comportamiento o la latencia de un modelo real.

Tomas de dispositivo 3D real

Usa un GLB real y la malla de visualización original, no un marco PNG ni una pantalla DOM flotante. Mantén la pantalla y el cuerpo en un solo rig. Usa reflejos de softbox de estudio, materiales separados de metal/vidrio/óptica, una cámara con lente más larga, rotación suavizada y una pausa frontal legible. Anima las acciones de la aplicación en la textura de la pantalla para que los indicadores táctiles obedezcan a la perspectiva. Captura la tipografía DOM y WebGL juntos para el video.

El iPhone GLB de referencia no está incluido y no tiene licencia MIT. Requiere la copia con licencia separada del usuario o una alternativa con licencia explícita. Verifica los nombres de malla, las normales de visualización, los UV, la escala y el encuadre antes de usar un modelo diferente. Nunca llames al ejemplo CAD oficial de Apple, un render oficial de Apple o trazado de rayos.

Sonido, solo cuando se solicite

Lee references/music.md. Prefiere un multitrack MIDI original → SoundFont con licencia obtenida por separado → pistas renderizadas → mezcla cuando se soliciten MIDI/instrumentos; no hagas obligatoria una API neuronal paga. Vincula acentos de sonido dispersos a señales visuales reales. Mantén la música, los efectos de sonido y la voz editable de forma independiente. No afirmes que una partitura es buena o aprobada sin escucharla/revisión del usuario. Las mediciones y una hoja de pistas no son una pista terminada y evaluada.

Para HTML en vivo, controla el audio con gestos y mantén el reloj visual independiente de una promesa resume() de audio o un reloj de audio atascado. Los fallos de audio no deben congelar la animación. Para video offline, alinea las muestras con la línea de tiempo en lugar de grabar una transmisión de audio del navegador en vivo como la única maestra.

Verifica y entrega

1. Ejecuta las pruebas matemáticas/funcionales relevantes. Verifica la búsqueda directa, inversa, arbitraria y repetida; los aciertos del cursor; la causalidad de estado; la interrupción por teclado/arrastre; el diseño de 390px; y los errores de JS.
2. Respeta el alcance del usuario para la revisión visual. No afirmes que el renderizado o las comprobaciones de metadatos son inspección visual. Si se solicita control de calidad visual, inspecciona realmente los fotogramas representativos de entrada/intermedio/interacción/salida y corrige superposiciones, recortes, texto ilegible y capas incorrectas.
3. Para MP4, renderiza y verifica realmente la duración, dimensiones, fps, recuento de fotogramas, decodificación y presencia de audio. No entregues instrucciones y las llames video exportado.
4. Entrega el HTML o MP4 solicitado más el código fuente reproducible, la configuración exacta, las notas de derechos de los assets y las limitaciones honestas. No agregues música en silencio.
5. Mantén las credenciales privadas, las URL de sesión, los assets del SO, los modelos comerciales descargados y los paquetes generados con assets restringidos incrustados fuera de un repositorio público. La licencia MIT raíz cubre el código/documentación original, no cada dependencia o asset externo.