Motion Lab

¿Qué hace Motion Lab?

Una pieza de movimiento dirigida: cada adjetivo se convierte en un número, cada seguimiento es una nota medida, y el metraje muestra el mecanismo real funcionando. Construcción de referencia: examples/cofoundr/ en este skill (SPEC.md, compositions/, REVIEW.md, preview.mp4). Léelo antes de tu primera construcción en una sesión.

Carga hyperframes para el contrato de renderizado, luego sigue estos pasos. Las reglas de hyperframes ganan en formato; este skill gana en historia, apariencia y proceso.

1. Lee la fuente

Antes de escribir nada, lee el tema en sí: repo, README, la ruta principal o archivo de pipeline, precios, el sitio en vivo. Extrae:

• el mecanismo: los pasos reales en orden (nombres de funciones, llamadas API, etapas).
• los números reales: tamaños de datasets, conteos, pesos, tiempos, límites. Nunca inventes uno. Un valor que la fuente no proporciona se elimina o se marca como ilustrativo en REVIEW.md.
• la marca: hex del acento, segundo color, SVG del logo, fuentes, cualquier archivo de bloqueo de estilo.
• un detalle sorprendente que un desarrollador citaría (un clamp, una cadena de fallback, un bug que se lanzó).

Si la persona nombra una tecnología que la fuente no usa (un patrocinador, una herramienta de un tweet), no la dibujes. Dilo y pregunta qué hace.

2. Escribe SPEC.md (el prompt dirigido)

El prompt vago ("cool, premium, moderno") obtiene azul oscuro, anillos brillantes, partículas y un eslogan inventado. El prompt dirigido obtiene la película. Escribe SPEC.md en la raíz del proyecto a partir de references/spec-template.md. Cada línea es un número:

• GOAL, OUTPUT (1080x1080, 60 fps por defecto para X), TIME (segundos x 60 = fotogramas).
• LOOK: fondo, tinta, tinta atenuada, color de regla, acento y lo que significa, caras display y body con tamaños en px y tracking, radio de tarjeta y sombra.
• OBJECTS: cada cosa que el espectador debe reconocer, extraída de la UI real del producto.
• MOTION: eases por rol, duraciones y escalonamientos en fotogramas (references/numbers.md).
• SHOTS: rangos de fotogramas, un movimiento heroico cada uno, lo que el espectador lee, el traspaso al siguiente shot.
• BANNED y QA (los fotogramas a comprobar y qué debe mostrar cada uno).

3. Forma de la historia (lo que hizo que la película cofoundr funcionara)

1. Hook en el fotograma 0. El primer fotograma es la miniatura. La línea del hook ya está colocada en ella, en la serif display, alineada a la izquierda, una palabra en el acento. Una forma grande de la marca se sienta a su lado. Ejemplo: "i couldn't find a cofounder." con el círculo azul.
2. Un ejemplo trabajado recorre todo el mecanismo. Una entrada real (la URL de LinkedIn del usuario, una consulta real) entra en una tarjeta de producto y se mueve a través de cada etapa. La forma del hook se traslada a la tarjeta (se convierte en el avatar), para que el espectador nunca pierda el hilo.
3. Un carril de etapas en la parte superior nombra las etapas reales ("enrich you, search 700M, score 30, write intros") e ilumina cada nodo a medida que la imagen lo alcanza. Este es el diagrama de arquitectura, integrado en la película.
4. Cada etapa obtiene su propia forma de imagen: un campo de texto, un campo de puntos que se estrecha de 700M a 30, barras ordenadas por puntuación con las 10 mejores mantenidas en el acento, una tarjeta de resultado que escribe su salida. Líneas similares nunca obtienen la misma imagen.
5. Pago = el logo significa algo. Las dos formas (tú y la coincidencia) se deslizan juntas hacia el logo, la marca de la palabra aparece, una línea con los números clave. Mantén 2 s+, completamente quieto.

Duración 15-17 s. Menos de 15 s si la persona quiere un bucle.

4. Apariencia

Por defecto, usa la carcasa de aplicación clara del producto, no un vacío oscuro: fondo como #f0f2f8, tarjetas blancas radio 28 con 0 18px 40px rgba(15,23,42,.08), tinta #0f172a, atenuado #64748b. Display: la serif de la marca (descárgala en assets/fonts/, @font-face en cada escena que la use). Body: Inter 500/700. Texto leído a 28 px como mínimo. El acento marca un enfoque por fotograma.

Prohibido: vacío azul oscuro, brillo, resplandor, neón, partículas, degradados púrpura/azul, tarjetas de cristal, etiquetas monoespaciadas en mayúsculas, pastillas (pill chips), todo centrado, cada elemento apareciendo, títulos que se desplazan después de aterrizar, el logo anclado en una esquina, tres tarjetas en fila, cuadrículas de KPI, rostros reales o nombres como candidatos falsos.

5. Construcción

• npx hyperframes init <dir> en <slug>-video/. El index.html raíz monta 3 escenas: hook, la escena del mecanismo (un encuadre continuo mientras la UI actúa), payoff.
• Siembra cada aleatorio (mulberry32). Los puntos y barras generados son hijos de una escena temporal.
• fromTo para cada tween; immediateRender: false en fromTo repetidos del mismo objetivo después del primero.
• Mantén un helper de cambio de tiempo (const at = (t) => t + …) en la escena del mecanismo, para que un retiempo sea una línea, no veinte.
• El texto que puede cambiar (la URL, el titular) va en variables de composición.

6. El bucle de laboratorio (seguimientos con recibos)

Nunca confíes en la primera construcción. Después de cada pasada:

1. npx hyperframes check --json; corrige cada error. line_unread significa mantener la línea más tiempo (0.5 s + 0.3 s por palabra) o recortar palabras; nunca reducir el tamaño del texto.
2. npx hyperframes snapshot --at <mitad y final de cada shot> y lee la hoja de contactos.
3. Escribe cada problema como un seguimiento numerado con números, como los imprime la referencia: "la etiqueta 'need' está en pantalla 0.56 s, el suelo 1.27 s: aterriza a los 0.9 s y desplaza todo después de 1.6 s en +0.6 s". Regístralos en REVIEW.md.
4. Después de renderizar, extrae los fotogramas de costura del propio MP4 (ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1") y míralos.

7. Música

Usa la pista que el usuario proporciona (cópiala en assets/audio/). Sin una, pide una, o ofrece una partitura sintetizada en código a partir de números de fotogramas (references/sound.md).

1. python3 scripts/find_drop.py <track> imprime el mapa de sonoridad y los drops más grandes con su inicio exacto y los beats a su alrededor.
2. Elige el momento heroico de la película (las formas del logo tocándose, el resultado aterrizando). Calcula el fotograma en el que realmente ocurre (para back.out(1.4) las formas se tocan en ~23% del tween).
3. data-media-start = inicio del drop − tiempo heroico, redondeado al beat más cercano para que la película comience en uno. El sonido aterriza 0-1 fotograma después de la imagen, nunca antes.
4. <audio id="music" class="clip" data-start="0" data-duration="<film>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">.
5. Renderiza, luego mide: npx hyperframes audio <mp4> --json debe mostrar un inicio dentro de un fotograma del fotograma heroico; sonoridad −16 a −14 LUFS, pico real ≤ −1 dBTP. Di que fue medido, no escuchado.

8. Entrega

• npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4, luego ffprobe para tamaño, fps y número de fotogramas.
• Envía el MP4 al usuario.
• REVIEW.md: decisiones creativas, lo que se midió, el beat más débil, advertencias mantenidas a propósito.
• Redacta la publicación en la voz del usuario (por defecto: minúsculas, hook primero, líneas cortas, el mecanismo como pasos >, un detalle real del código, sin palabras de hype). Nunca la publiques.