---
name: "motion"
description: "Regras do Motion Studio de Vinicius: use sempre que o assunto for motion, animação, vídeo animado, filme, render de frames ou trilha/SFX para vídeo."
---

# Motion Studio

Regras para todo filme/motion produzido. Siga antes de escrever qualquer cena.

## 1. Contrato de render

Todo filme é uma **função pura do tempo**: `window.seek(t)` pinta o frame `t` (em segundos), sempre igual, em qualquer ordem.

**Proibido no modo render:**
- CSS transitions e animations
- `setTimeout`, `setInterval`, `requestAnimationFrame`
- Estado carregado entre frames (contadores, acumuladores, "posição anterior")
- `Math.random()`: use só ruído com seed (mulberry32)

```js
function mulberry32(seed) {
  return function () {
    let t = (seed += 0x6d2b79f5);
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

window.seek = (t) => {
  const p = clamp((t - 1.2) / 0.6, 0, 1);
  title.style.transform = `translateY(${(1 - ease(p)) * 40}px)`;
};
```

**Render e encode:**
- Renderize com `node render.mjs`
- Vídeo: H.264, `yuv420p`, CRF 16

```bash
ffmpeg -framerate 30 -i frames/%05d.png -i mix.wav \
  -c:v libx264 -pix_fmt yuv420p -crf 16 \
  -c:a aac -b:a 192k -shortest out.mp4
```

## 2. Visual

**Defaults banidos:**
- Título centralizado sobre gradiente
- Tudo entrando com fade
- Labels nos cantos e bordas de frame
- Glow em elementos de UI
- Explosões genéricas de partículas

**Sistema:**
- **Uma** fonte display + **uma** fonte de UI
- **Uma** cor de destaque, a menos que o brief peça outra coisa
- **A cada 2 a 4 segundos** algo novo precisa acontecer na tela

## 3. Som

- Trilha e SFX são **sintetizados em código**, a menos que uma faixa seja fornecida
- Todo hit cai no **grid de beats medido** (`beats.json`)
- Loudness final: **-14 LUFS**

```bash
ffmpeg -i mix_raw.wav -af loudnorm=I=-14:TP=-1:LRA=11 mix.wav
```

## 4. Loop de qualidade (antes de mostrar qualquer coisa)

1. **Contact sheet:** renderize 1 frame por beat em uma grade e **olhe** para ela.
2. **Pontue de 1 a 10** em cada critério:

| Critério | Pergunta |
|---|---|
| Hook | Prende nos primeiros 2s? |
| Legibilidade | Dá pra ler no tamanho de celular? |
| Qualidade de motion | Easing, timing e peso estão bons? |
| Variedade | Algo novo a cada 2–4s? |
| Fidelidade à marca | Cores, fontes e tom batem com o brief? |
| Sync de som | Os hits caem no beat? |

3. **Corrija os 3 piores problemas.**
4. **Repita** até todas as notas serem **8+**.
5. Só então faça o **render completo**.

Ao entregar, mostre a contact sheet final com as notas de cada critério.
## Diretrizes de criativos e motion do Vinicius (aprendidas em 19/10/2026; DIRETRIZ, não molde)

Vale para TODAS as skills que criam peça visual, carrossel, vídeo ou animação. É um norte do que ele aprovou; cada cliente
pode variar fonte, cor e estrutura (diga o que adotou). Detalhe: `C:\Users\vinni\creative-studio-hub\workspace\PLAYBOOK-CARROSSEL-VINICIUS.md`
e `...\workspace\carrossel-advocacia\MOTION-GUIDE.md`.

**Criativo / carrossel**
- Processo: ler skill designer-photocraft + design system antes; plano aprovado; UM slide por vez mostrando o PNG; conferir cada PNG olhando a imagem; texto como camada viva; degradê real (nunca faixas); imagens via Magnific (nunca Firefly); MP4 no Instagram (não GIF).
- Capa com impacto: foto cinematográfica de página inteira (mockup gerado por IA, não CSS), elementos de vidro/profundidade, gancho curto + frase em destaque com fonte de contraste (caso aprovado: Morganite itálico bold em bloco vermelho) e CTA claro. Fonte de impacto só na capa; demais slides sans forte (Manrope 800), títulos grandes, sem ponto final, sem enfeite repetido.
- Margens 90px (1080x1350), respiro, entrelinha curta; antes/depois por ícone (discreto x chamativo); fundo muda com função; acento (vermelho) só em ação.
- O produto mostrado convence: versão ruim genuinamente ruim, versão boa premium e densa, sem número inventado.

**Motion / vídeo / animação (aplicar sempre)**
- Todo pedido tem 4 partes: FORMATO (tamanho, fps, fundo) · TEMPO (duração, ritmo de cada entrada) · CURVA (easing, overshoot) · LOOP (último frame = primeiro; tudo visível desde o frame 0). Se faltar uma, a animação sai genérica.
- Curva: NUNCA linear. Entrada = ease-out (rápido no início, suave no fim); saída = ease-in; ease-in-out só entre dois estados de mesma importância. Overshoot leve (1.05-1.10 -> 1) via curva com y>1 ou spring; cubic-bezier simples não faz mola, então use keyframes densos (por frame) ou spring.
- Entradas suaves: slide curto em arco + fade + escala de 0.95 -> 1, ou blur de 8-15px -> 0 em texto; container chega primeiro, conteúdo 50-100ms depois (follow-through / overlapping); cascata ~80ms (no máx. ~5 itens); duração 200-300ms cards, 300-500ms hero; segurar ~2s legível.
- Princípios: antecipação antes do movimento, squash & stretch no impacto, trajetória em arco, micro-movimento no repouso, brilho suave.
- Trocas de estado (feio -> bonito) acontecem SÓ dentro do bloco/imagem, não na peça toda. Evitar wipe linear, blur pesado, faixas chapadas, tudo entrando junto.
- Verificar frames intermediários antes de entregar.