nxrskyaa/motionite

Motionite: motion design para agentes

Motionite transforma um briefing em um filme Remotion determinístico e acabado, que parece projetado, não gerado. Ele tem três partes:

Parte	Onde	Use para…
15 NxrStyles	styles/ · comparação + seletor	Escolher um sistema visual completo por filme
70 técnicas	techniques/	Construir cada movimento com números comprovados (IDs T, N, X, C, U, H, R)
Código funcional	examples/	Copiar tokens de lib/anim.ts, as composições de demonstração e as composições de estilo

O prompt não é o diferencial. O mesmo prompt de uma linha para um showreel pode produzir filmes extremamente diferentes. O que faz a diferença é a iteração em stills e o bom gosto no ciclo de crítica. Esta habilidade é esse ciclo.

Fluxo de trabalho (siga na ordem)

1 · Briefing → fatos vs escolhas

Anote:

• Fatos: ativos reais que você possui (arquivos de logotipo, capturas de tela, filmagens, hex da marca, fontes, VO, música + BPM), as afirmações, a proporção de aspecto, a duração e a plataforma.
• Escolhas: todo o resto. Se a interface do usuário ou o logotipo de um produto real estiver ausente, pergunte ou deixe um espaço reservado identificado. Nunca invente.
• Uma frase que o espectador deve lembrar. Um filme tem uma ideia por batida e uma mensagem no geral.

2 · Mood board

Colete 2–3 filmes de mood board e anote o que aproveitar de cada um, em números: ritmo de corte (segundos por cena), hex da paleta, família tipográfica, movimento característico. Você pode encontrar os IDs em techniques/README.md. Se possível, faça uma folha de contato de cada um (ffmpeg -vf fps=2,scale=480:-1,tile=6x5) e leia-a.

3 · Escolha UM NxrStyle

Use a tabela de decisão em styles/COMPARISON.md, depois abra o arquivo desse estilo e siga seu DNA Visual (paleta, tipo, layout, movimento, transições, sincronia, áudio) e seus Faça/Não Faça.

• Um guia de marca fornecido substitui a paleta e a fonte do estilo, e quaisquer proibições.
• Você pode pegar emprestado uma técnica de outro estilo. Nunca pegue emprestada uma paleta ou sistema tipográfico inteiro.

| # | Estilo | Sensação | # | Estilo | Sensação | |---|---|---|---|---| | 01 | Beat Reel | alto, campos de cor com corte de barra | 09 | Live Bento Grid | pôster 1:1 em loop de blocos dinâmicos | | 02 | Night Caption Explainer | 9:16 legendas VO, número grande | 10 | Pixel Bar-Grid Trailer | trailer de jogo pixel, cortes com dither | | 03 | Floating Product UI | telefone 3D, número gigante, chips | 11 | One-Take Portal Zoom | um zoom logarítmico através de mundos | | 04 | Editorial Ink | papel, serifa, marcador | 12 | Console-as-Film | o objeto é o mundo | | 05 | One-Pan Flat World | um movimento de câmera, céu por x | 13 | Clean Launch Film | contido, um acento | | 06 | PRESS START Menu | menu retrô 8-bit | 14 | Paper Stop-Motion | papel recortado em 12s, riso | | 07 | Frost Collectible | gelado, órbita, contador mint | 15 | Hand-Drawn Ink | autodesenho tremido, borrão de tinta | | 08 | Duotone Storybook | cinza escuro gravado + um quente | | | |

4 · Lista de cenas em quadros

Escreva uma tabela antes de codificar:

Cena	Quadros	Na tela no primeiro quadro	O que se move (exato por quadro)	Texto	IDs das técnicas	Cue de áudio

Regras:

• Escolha o fps (30 para a maioria dos trabalhos, 60 para filmes com UI suave), então defina uma grade de batida: BEAT = fps·60/BPM. As cenas duram compassos inteiros, e os cortes caem 2 quadros antes da batida.
• O quadro 0 é o pôster, então ele já deve estar composto.
• Uma ideia por cena, com ≥ 0,8 s de sustentação legível para qualquer linha.
• Nunca coloque dois dispositivos de transição consecutivos. Uma mudança de visual cai em um corte seco e dura ≥ 1 s.

5 · Construa no Remotion

Comece de examples/. Copie src/lib/anim.ts (easing E, molas SPR, prog, spr, lmix, track, hitPulse, blurIn/blurOut, rand, onTwos), mais src/styles/kit.tsx e a composição do seu estilo escolhido.

Regras de construção:

• render(frame) é pura: sem Math.random, Date.now, temporizadores, transições/aminações CSS ou estado entre quadros. Use apenas rand(key) com semente. Re-simule qualquer física a partir do quadro 0 com um passo fixo.
• Entre com E.out e saia com E.in. O movimento secundário começa entre 55–75 % do primário.
• Escala os movimentos no espaço logarítmico (lmix). Um valor que muda de alvo é uma soma de molas (track).
• Limite de velocidade: ≤ 25 px/quadro @60, a menos que esteja borrado ou com motion blur.
• Overshoot ≤ 2 por filme e nunca em texto. Flash ≤ 2 por filme, limitado a 65–85 % (nunca um quadro em branco completo).
• Texto entra com desfoque (12–20 px → 0, nítido em 60 % do movimento). Não use fades de opacidade simples.
• fontVariantNumeric: 'tabular-nums' em todo contador. Coloque entre aspas nomes de fontes que contenham dígitos: '"Press Start 2P"'.
• Nunca coloque opacidade ou filtro em um elemento preserve-3d, nunca coloque will-change em texto com escala de câmera, e nunca use backdrop-filter em renders headless.
• Cadência de camadas: UI em ums, personagens desenhados em doises, fantoches de papel em 12ses. Texturas nunca tremem.
• Loops: o último quadro é igual ao primeiro.

6 · Stills para aprovação (antes de qualquer render completo)

Renderize um still por batida, mais 3 quadros ao redor de cada transição:

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

Coloque-os em uma folha de contato e olhe para eles. Corrija composição, legibilidade e paleta nesta fase, porque um still custa segundos e um render custa minutos. Se houver um humano no loop, obtenha aprovação nos stills.

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, tamanho, fps, e duração do vídeo = duração do áudio (±1 f).
2. Loudness: −14 LUFS integrado (±1), ≤ −1 dBTP.
3. Folha de contato do MP4 final (não dos stills): 2 fps, ladrilhos 6×5.
4. Determinismo: renderize um quadro duas vezes e faça diff de pixels (deve ser idêntico).
5. Curva de diff de quadros: nenhum pico de quadro único mais de 3× seus vizinhos.
6. Hex da marca amostrado de um still, e onsets de áudio dentro de ±1 f de seus acertos visuais.

9 · Autocrítica (3 rodadas)

Pontue a folha de contato contra os seis testes em qa.md: pôster, leitura, batida, orçamento, estilo e marca. Corrija os três piores problemas, re-renderize e repita até três vezes. Relate o que você mudou em cada rodada.

Regras de bom gosto universais (forma resumida)

1. O quadro 0 é um pôster, e todo quadro pausado é composto.
2. Texto com blur-in. Sem fades simples. Saídas aceleram.
3. Uma cor de acento, e ela significa algo.
4. Zoom e escala no espaço logarítmico, e mantenha movimentos de câmera contínuos em vez de escalonados (exceto em estilos pixel).
5. Corte no compasso, uma ideia por compasso, com sustentação legível.
6. Flash limitado a 65–85 %, no máximo duas vezes. Overshoot no máximo duas vezes, nunca em texto.
7. Transições são dispositivos projetados (íris, borrão, mancha, escala através, inversão de polaridade), nunca um cross-dissolve.
8. Ativos reais em vez de desenhados. Nunca finja a interface de um produto real.
9. Determinismo é um recurso: o mesmo quadro sempre renderiza os mesmos pixels.
10. As proibições estéticas (serifa, creme, brilho, vidro, emoji, partículas) são padrões para filmes genéricos de produto. Uma marca ou seu mood board pode substituí-las. As leis da física não são opcionais.

Leis completas: techniques/laws.md. Modelo de briefing: techniques/prompt-skeleton.md.

Contrato de saída

Ao entregar um filme, reporte:

• o estilo usado
• a lista de cenas (quadros + IDs das técnicas)
• o caminho para o MP4 e a folha de contato
• a linha do ffprobe, a leitura LUFS e o resultado do determinismo
• o que mudou em cada rodada de crítica
• qualquer espaço reservado ou ativo inventado