nxrskyaa/motionite

Motionite: diseño de movimiento para agentes

Motionite convierte un brief en una película determinista y terminada de Remotion que luce diseñada, no generada. Tiene tres partes:

Parte	Dónde	Úsalo para…
15 NxrStyles	styles/ · comparador + selector	Elegir un sistema visual completo por película
70 técnicas	techniques/	Construir cada movimiento con números probados (IDs T, N, X, C, U, H, R)
Código funcional	examples/	Copiar tokens de lib/anim.ts, las composiciones demo y las composiciones de estilo

El prompt no es el diferenciador. Un mismo prompt de una línea para un showreel puede dar películas radicalmente diferentes. Lo que marca la diferencia es la iteración sobre imágenes fijas y el gusto en el bucle de crítica. Esta habilidad es ese bucle.

Flujo de trabajo (seguir en orden)

1 · Brief → hechos vs elecciones

Anota:

• Hechos: activos reales que tengas (archivos de logotipos, capturas de pantalla, metraje, hex de la marca, fuentes, voz en off, música + BPM), las afirmaciones, la relación de aspecto, la duración y la plataforma.
• Elecciones: todo lo demás. Si faltan la interfaz de usuario o el logotipo de un producto real, pregunta o deja un marcador de posición etiquetado. Nunca lo inventes.
• Una frase que el espectador deba recordar. Una película tiene una idea por compás y un mensaje global.

2 · Mood board

Recopila 2-3 películas de mood board y escribe qué tomar de cada una, en números: ritmo de corte (segundos por plano), hex de la paleta, familia tipográfica, movimiento característico. Puedes encontrar los IDs en techniques/README.md. Si puedes, haz una hoja de contacto de cada una (ffmpeg -vf fps=2,scale=480:-1,tile=6x5) y léela.

3 · Elige UN NxrStyle

Usa la tabla de decisión en styles/COMPARISON.md, luego abre el archivo de ese estilo y sigue su ADN Visual (paleta, tipografía, diseño, movimiento, transiciones, tiempo, audio) y sus Hacer/No Hacer.

• Una guía de marca proporcionada anula la paleta y la fuente del estilo, así como cualquier prohibición.
• Puedes tomar prestada una técnica de otro estilo. Nunca tomes prestada una paleta o sistema tipográfico completo.

| # | Estilo | Sensación | # | Estilo | Sensación | |---|---|---|---|---| | 01 | Beat Reel | campos de color cortados al ritmo, intensos | 09 | Live Bento Grid | póster en bucle 1:1 de mosaicos en vivo | | 02 | Night Caption Explainer | 9:16 subtítulos de VO, número grande | 10 | Pixel Bar-Grid Trailer | tráiler de juego pixelado, cortes con tramado | | 03 | Floating Product UI | teléfono 3D, número gigante, chips | 11 | One-Take Portal Zoom | un solo zoom logarítmico a través de mundos | | 04 | Editorial Ink | papel, serifa, resaltador | 12 | Console-as-Film | el objeto es el mundo | | 05 | One-Pan Flat World | un solo travelling de cámara, cielo por x | 13 | Clean Launch Film | contenido, un acento | | 06 | PRESS START Menu | menú retro de 8 bits | 14 | Paper Stop-Motion | papel recortado en 12s, risografía | | 07 | Frost Collectible | helado, órbita, contador menta | 15 | Hand-Drawn Ink | línea temblorosa que se dibuja sola, mancha de tinta | | 08 | Duotone Storybook | grabado azul marino + un color cálido | | | |

4 · Lista de planos en fotogramas

Escribe una tabla antes de codificar:

Plano	Fotogramas	En pantalla en el primer fotograma	Qué se mueve (exacto al fotograma)	Texto	IDs de técnica	Señal de audio

Reglas:

• Elige los fps (30 para la mayoría del trabajo, 60 para películas con UI fluida), luego establece una cuadrícula de ritmo: BEAT = fps·60/BPM. Los planos duran compases enteros y los cortes caen 2 f antes del ritmo.
• El fotograma 0 es el póster, por lo que ya debe estar compuesto.
• Una idea por plano, con ≥ 0,8 s de pausa legible para cualquier línea.
• Nunca pongas dos dispositivos de transición consecutivos. Un cambio de apariencia cae en un corte directo y dura ≥ 1 s.

5 · Construir en Remotion

Comienza desde examples/. Copia src/lib/anim.ts (curvas de easing E, resortes SPR, prog, spr, lmix, track, hitPulse, blurIn/blurOut, rand, onTwos), además de src/styles/kit.tsx y la composición de tu estilo elegido.

Reglas de construcción:

• render(frame) es pura: sin Math.random, Date.now, temporizadores, transiciones/animaciones CSS, ni estado entre fotogramas. Solo rand(key) con semilla. Vuelve a simular cualquier física desde el fotograma 0 con un paso fijo.
• Entra con E.out y sale con E.in. El movimiento secundario comienza al 55–75 % del primario.
• Escala los movimientos en espacio logarítmico (lmix). Un valor que cambia de objetivo es una suma de resortes (track).
• Límite de velocidad: ≤ 25 px/fotograma @60 a menos que se difumine o se desplace.
• Sobresalto ≤ 2 por película y nunca en tipografía. Destello ≤ 2 por película, limitado al 65–85 % (nunca un fotograma completo en blanco).
• El texto entra con desenfoque (12–20 px → 0, nítido al 60 % del movimiento). No uses fundidos de opacidad simples.
• fontVariantNumeric: 'tabular-nums' en cada contador. Pon entre comillas los nombres de fuente que contengan dígitos: '"Press Start 2P"'.
• Nunca pongas opacidad o filtro en un elemento preserve-3d, nunca pongas will-change en texto escalado por cámara, y nunca uses backdrop-filter en renders sin interfaz.
• Cadencia de capas: IU en unos, personajes dibujados en doses, marionetas de papel en 12s. Las texturas nunca tiemblan.
• Bucles: el último fotograma es igual al primero.

6 · Imágenes fijas para aprobación (antes de cualquier render completo)

Renderiza una imagen fija por cada compás, más 3 fotogramas alrededor de cada transición:

npx remotion still src/index.ts <CompId> out/s_<f>.png --frame=<f> --scale=0.5

Ponlas en una hoja de contacto y míralas. Corrige la composición, legibilidad y paleta en esta etapa, porque una imagen fija cuesta segundos y un render cuesta minutos. Si hay un humano en el bucle, obtén la aprobación de las imágenes fijas.

7 · Render

npx remotion render src/index.ts <CompId> out/raw.mp4 --codec=h264 --crf=18 --pixel-format=yuv420p
ffmpeg -i out/raw.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -b:a 192k -movflags +faststart out/film.mp4

8 · QA (comandos completos)

1. ffprobe: codec, tamaño, fps, y duración de video = duración de audio (±1 f).
2. Sonoridad: −14 LUFS integrados (±1), ≤ −1 dBTP.
3. Hoja de contacto del MP4 final (no de las imágenes fijas): 2 fps, mosaico 6×5.
4. Determinismo: renderiza un fotograma dos veces y compara los píxeles (debe ser idéntico).
5. Curva de diferencia de fotogramas: sin picos de un solo fotograma más de 3 veces sus vecinos.
6. Hex de la marca muestreado de una imagen fija, y los inicios de audio dentro de ±1 f de sus golpes visuales.

9 · Autocrítica (3 rondas)

Puntúa la hoja de contacto contra las seis pruebas en qa.md: póster, lectura, ritmo, presupuesto, estilo y marca. Corrige los tres peores problemas, vuelve a renderizar y repite hasta tres veces. Informa qué cambiaste en cada ronda.

Reglas universales de gusto (versión corta)

1. El fotograma 0 es un póster, y cada fotograma pausado está compuesto.
2. Texto con desenfoque de entrada. Sin fundidos simples. Las salidas aceleran.
3. Un color de acento, y significa algo.
4. Zoom y escala en espacio logarítmico, y mantén los movimientos de cámara continuos en lugar de escalonados (excepto en estilos pixelados).
5. Corta en el compás, una idea por compás, con pausas legibles.
6. Límite de destello 65–85 %, como máximo dos veces. Sobresalto como máximo dos veces, nunca en tipografía.
7. Las transiciones son dispositivos diseñados (iris, mancha, borrón, escalado a través, inversión de polaridad), nunca un fundido encadenado.
8. Activos reales antes que dibujados. Nunca falsifiques la interfaz de un producto real.
9. El determinismo es una característica: el mismo fotograma siempre renderiza los mismos píxeles.
10. Las prohibiciones estéticas (serifa, crema, brillo, vidrio, emoji, partículas) son valores predeterminados para películas de productos genéricos. Una marca o su mood board pueden anularlas. Las leyes de física no son opcionales.

Leyes completas: techniques/laws.md. Plantilla de brief: techniques/prompt-skeleton.md.

Contrato de salida

Cuando entregues una película, informa:

• el estilo utilizado
• la lista de planos (fotogramas + IDs de técnica)
• la ruta al MP4 y a la hoja de contacto
• la línea de ffprobe, la lectura de LUFS y el resultado de determinismo
• qué cambió en cada ronda de crítica
• cualquier marcador de posición o activo inventado