motion-reel

O que motion-reel faz?

Cria um MP4 1920×1080, 30 fps no estilo editorial motion-reel. Um motor pronto fica em template/. Você o copia, escreve um arquivo de configuração (src/reel.config.ts), renderiza, revisa os quadros e envia o vídeo.

Argumentos: $ARGUMENTS

1. Leia a solicitação

A partir dos argumentos e da conversa, descubra:

• Assunto: qual produto ou funcionalidade. Se estiver dentro do código-fonte dele, leia as cópias reais (arquivos i18n, componentes de página, README) para que o vídeo mostre o que o produto realmente faz.
• Cores:
  • Um nome de predefinição: lime (o visual de referência), coral, ocean, sunset, violet, night (escuro).
  • Ou valores hexadecimais, mapeados para accent (marca-texto, a cor que se destaca), depois secondary (segunda cor da marca), e opcionalmente paper (fundo) e ink (texto).
  • Apenas uma cor significa que ela é a cor de destaque.
  • Se o projeto tiver tokens de marca (por exemplo globals.css), ofereça-os como secondary.
  • Nada informado: use lime e avise na mensagem final.
• Idioma da cópia: use o idioma do usuário (Indonésio por padrão se eles escreverem em indonésio).
• Pasta de saída: o scratchpad da sessão, a menos que o usuário nomeie uma pasta. Nunca coloque dentro do repositório do produto a menos que seja solicitado.

Pergunte apenas quando o próprio assunto não estiver claro. Cores e duração têm padrões.

2. Estrutura inicial

cp -r "<this skill dir>/template" "<out>/reel"
cd "<out>/reel" && npm install && npm run sfx

• npm install leva cerca de 2 minutos. Execute em segundo plano se houver outro trabalho.
• Se o produto tiver um logotipo, copie-o para public/ e defina brand.logo com o nome do arquivo. Caso contrário, defina brand.initials.

3. Escreva src/reel.config.ts

• Defina theme: makeTheme(presets.coral) ou makeTheme({ accent, secondary, paper, ink }). Todos os outros tokens são derivados automaticamente.
• Escolha as cenas. A lista de campos, durações padrão e limites de tamanho da cópia estão em references/config.md; leia-o antes de escrever a cópia.
• Arco recomendado (cerca de 45 s): spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo. Remova as cenas que não se encaixam no produto. Um corte curto (cerca de 20 s) é spark → word → tagline → kinetic → logo.
• Fatos: mostre apenas afirmações que o produto realmente faz. Nunca invente métricas como "10.000 usuários" ou "99% de disponibilidade". O conteúdo de exemplo (nomes de contas, postagens de exemplo) deve ser fictício e claramente genérico, nunca dados reais de clientes.
• Manchetes: title.sans é a declaração e title.serif é o toque itálico. mark é uma palavra da parte serifa que recebe a cor de destaque.

4. Verifique e renderize

npx tsc --noEmit
npm run render        # → out/reel.mp4, usa --port=3917
npm run frames        # → out/frames/sheet*.jpg, um quadro a cada 1,5 s

Leia cada folha de contato. Verifique:

• texto ultrapassando um cartão ou o quadro
• elementos sobrepostos
• cena vazia
• marca-texto na palavra errada
• baixo contraste com cores personalizadas (por exemplo, um destaque claro sobre um papel claro)

Corrija a configuração ou o motor, se necessário, e renderize mais uma vez. Não faça loops de renderização.

5. Entregue

• Envie out/reel.mp4 com SendUserFile (display: "render").
• Informe duração, tamanho, um resumo de uma linha por cena, as cores usadas e o caminho do arquivo de configuração para edições posteriores.
• Diga claramente que o áudio não foi ouvido. Apenas o tempo e os níveis foram verificados.

Regras de estilo (ao estender o motor)

• Funções da paleta: paper fundo, ink texto e pílulas escuras, accent apenas para destaques e estados ativos (nunca texto grande sobre papel), secondary para blocos de cor e a palavra de destaque do logotipo.
• Tipografia:
  • Inter Tight 800 para declarações.
  • Instrument Serif itálico para o toque.
  • Archivo Black apenas para palavras cinéticas.
  • JetBrains Mono 13–20px com espaçamento entre letras para rótulos e HUD.
• Movimento:
  • Expo-out bezier(0.16,1,0.3,1) para entradas, in-out bezier(0.65,0,0.35,1) para movimentos.
  • Saídas aceleram com blur direcional (Smear).
  • Texto sobe de uma máscara (overflow: hidden + translateY).
  • Números rolam com blur vertical (Roll).
• Transições: smear out/in, mergulho na tinta após uma tagline, zoom-blur através, um cartão de destaque expandindo para quadro completo antes do bloco cinético, e cortes secos entre palavras cinéticas. Sem tremor, sem flashes brancos.
• HUD: rótulo no canto superior esquerdo, timecode no canto superior direito, rótulo da seção mais linha de progresso no canto inferior esquerdo, resolução no canto inferior direito, colchetes nos cantos. Ele muda para texto claro em blocos de cor escura.
• Cada cena mantém texto legível por pelo menos 1,5 s.

Armadilhas do Remotion (aprendidas da pior forma)

• Todo movimento vem de useCurrentFrame(). Transições e animações CSS não renderizam.
• A porta 3000 geralmente está ocupada por um servidor de desenvolvimento. Sempre passe --port.
• O ffmpeg empacotado do Remotion não tem os filtros fps e tile. Capture quadros com -ss um de cada vez (scripts/frames.mjs faz isso).
• React.useId() contém dois-pontos. Sanitize antes de usar em url(#id).
• Blur direcional: SVG feGaussianBlur stdDeviation="x y". CSS blur() é apenas uniforme.
• Áudio: um <Sequence from> + <Html5Audio> por pista, com durationInFrames definido para o comprimento do clipe.
• color-mix() e clip-path: circle() funcionam no Chrome do Remotion.