dolly: filme de lançamento em Remotion, todos os formatos

dolly: vídeos de produto e motion graphics em código

O vídeo é um projeto Remotion: componentes React renderizados quadro a quadro. starter/ ao lado deste arquivo contém dois vídeos funcionais: Video, um corte de 41 segundos do vídeo de lançamento da Termary feito a partir de gravações reais, e Promo, um corte de motion graphics de 25 segundos feito apenas com templates. Ambos renderizam em qualquer um dos 8 estilos e 4 formatos. Você os transforma no vídeo do usuário, mantendo o que os faz funcionar.

planejar → material (gravar ou escanear o do usuário) → construir cenas → revisar os quadros → renderizar

Você não pode assistir a vídeos, então os revisa renderizando contact sheets e lendo os PNGs. Faça isso após cada alteração: a maioria dos movimentos ruins é visível em uma sheet.

Leia apenas o que o trabalho precisa. Os caminhos são a partir da pasta desta skill:

Quando	Leia
Você grava o produto em um Mac (o observado o opera): um app, um site, o iOS Simulator	references/record-mac.md
O usuário precisa gravar: Windows, um celular real, um dispositivo ou conta que você não pode operar	references/record-elsewhere.md
O usuário fornece gravações que ele fez	references/your-footage.md
Uma cena construída a partir de uma gravação: o kit 3D e os movimentos de câmera	references/camera.md
Um vídeo que não é um lançamento de produto: um evento, contratação, changelog, uma história de dados…	references/agendas.md
Escolhendo componentes: templates, texto, gráficos, desenhos, planos de fundo, transições	starter/src/library/CATALOG.md
Algo renderiza errado, ou você está escrevendo um novo componente	references/gotchas.md

1. Iniciar

<pasta desta skill>/new.sh my-video     # verifica Node, copia o starter, instala tudo
cd my-video && npx remotion studio         # opcional: o usuário pode percorrer em localhost:3000

new.sh instala Node com Homebrew se estiver faltando, executa npm install (que também gera os efeitos sonoros), baixa o Chrome headless com o qual o Remotion renderiza e informa se o observee está instalado. No Windows, execute-o no Git Bash, após winget install OpenJS.NodeJS.LTS. Para um projeto Remotion 4.0.320+ existente, copie src/kit.tsx, src/look.tsx, src/parts.tsx, src/sequence.tsx, src/backdrop.tsx e src/library/.

Arquivo	O que contém
src/brand.ts	O produto: nome, URL, logotipo (em public/), cor de destaque e de alerta, seu estilo, suas fontes se tiver as próprias
src/look.tsx	Os 8 estilos e 4 formatos, e useLook(), que cada parte lê através deles
src/Video.tsx, src/Promo.tsx	Um vídeo: suas cenas em ordem com suas durações, e as dicas sonoras
src/scenes/	As cenas baseadas em takes. takes.ts informa onde as coisas estão nos takes
src/library/	A biblioteca de componentes, uma pasta por item; CATALOG.md os lista com suas props
src/sequence.tsx, src/backdrop.tsx	Scenes une as cenas com transições; Backdrop desenha a página do estilo
src/parts.tsx	O que vai sobre uma tomada: Caption, Tap, Callout, Speed, Pop
src/kit.tsx	O kit 3D e os movimentos de câmera (references/camera.md)
public/takes/	As gravações. Substitua-as pelas do próprio usuário
scripts/	take.sh grava um take, scan.mjs (npm run scan) lê gravações, sfx.mjs e music.mjs fazem som, voice.mjs uma narração, library.mjs reconstrói o catálogo, check.mjs (npm run check) mede uma renderização, web.mjs (npm run web) faz a cópia para upload

Remotion é gratuito para indivíduos e empresas de até 3 pessoas; empresas maiores precisam de uma licença corporativa (remotion.pro). Avise o usuário uma vez se isso se aplicar.

2. Planejar

Leia primeiro o site do produto, depois defina estes pontos com o usuário, perguntando apenas o que você não puder inferir:

• Onde será reproduzido, o que define os formatos e a duração. Renderize todos os formatos que ele precisar; projete para o principal e verifique os demais.

  Formato	Composição	Tamanho	Para	Duração
  landscape	Video	1920×1080	YouTube, X, LinkedIn, site, apresentação	lançamento 45–90 s
  vertical	Vertical	1080×1920	Reels, TikTok, YouTube Shorts, Stories	15–35 s
  square	Square	1080×1080	feeds no X, LinkedIn, Instagram	15–45 s
  portrait	Portrait	1080×1350	feeds no Instagram e LinkedIn (4:5)	15–45 s

  Feeds são reproduzidos sem áudio: as palavras carregam a história, e os primeiros 2 s devem prender por conta própria.

• O estilo. Renderize um quadro em cada estilo (npm run styles, adicione --props='{"frame":420,"format":"vertical"}' para outro quadro ou formato), mostre ao usuário e defina brand.style. Sugira um baseado na marca: uma ferramenta de desenvolvedor escura → midnight ou terminal, um app de consumo → soft ou bold, um produto premium ou calmo → editorial ou swiss, um teaser → cinema, um produto criativo ou artesanal → paper.

  Estilo	A aparência
  editorial	Papel claro, uma headline serifada com uma frase de destaque em itálico, cortes secos. Calmo e caro: o vídeo da Termary
  midnight	Quase preto com o destaque brilhando, uma sans-serif justa, palavras entrando em foco, transições com zoom
  bold	O destaque como a página, tipo enorme e pesado, a frase de destaque recortada de um bloco, pops elásticos, slides
  swiss	Off-white, tipo preto em grade de colunas, o destaque usado com moderação, cartões quadrados, wipe rígido
  soft	Um tom pastel do destaque, tipo arredondado, a frase de destaque em uma pílula, pops saltitantes, revelações arredondadas
  terminal	Tudo mono, headlines digitadas com cursor, scanlines, cortes com glitch
  cinema	Um trailer: quase preto, uma serifa grande e quieta, granulado de filme, fades lentos pelo preto
  paper	Desenho com código: cartões de papel em uma página lavanda suave, uma serifa leve com destaque em negrito, viradas de cartão

• A única frase que o espectador deve lembrar, o momento real no produto que a prova, e a chamada para ação no cartão final (uma URL, um download, uma lista de espera).

• De onde vem o material. Um produto com UI obtém material real, que supera qualquer simulação: você grava, o usuário grava, ou o usuário já o tem (a tabela acima indica o que ler). Sem acesso ao produto, ou para um teaser ou explainer, construa a partir da biblioteca.

Em seguida, escreva as cenas em ordem: a dor (o gancho, nunca o logotipo), o produto (o logotipo em uma batida), a prova (o momento real, ou funcionalidades, uma métrica, um antes/depois), a chamada para ação (o cartão final). Outras agendas mantêm a forma com seu próprio meio (references/agendas.md). No máximo 7 palavras na tela por vez, mantidas por 1 s + 0,3 s por palavra. Coloque o resumo em um comentário no topo de Video.tsx.

3. Material

Seja qual for a forma como vier, as mesmas coisas o tornam utilizável: pausas (4–5 s de um estado antes e depois de cada ação: os takes são cortados a partir delas), o produto real (nunca resultados pré-programados de um modo de demonstração, nunca dados privados), e horários que você leu a partir dele. npm run scan lê qualquer gravação: suas pausas, suas mudanças e seu som, com uma sheet de seus quadros, para que você possa planejar a partir de material que ninguém descreveu para você. Esses horários são os valores at dos quais os takes são reproduzidos.

4. Construir cenas

Uma cena é um componente que preenche o quadro. SCENES em Video.tsx (ou Promo.tsx) as lista com suas durações; a transição do estilo as une, e uma cena pode nomear sua própria (transition: 'iris', a que entra nela). Um whoosh toca sob cada transição que move todo o quadro (um slide, um whip, um zoom).

A biblioteca (src/library/) contém cada peça pronta, uma pasta cada: templates (cenas inteiras), efeitos de texto, gráficos, desenhos, partes de voz, planos de fundo e transições. Leia src/library/CATALOG.md antes de construir: o resumo de cada item, uma linha de uso que funciona como escrita, e suas props. Importe da biblioteca (import {Stat, Statement} from './library'). Cada item lê o estilo através de useLook(), recebe start (o quadro em que começa, a partir do início de sua cena) e, onde pode sair, exit. npm run gallery renderiza a amostra de cada item, etiquetada com seu código (--props='{"only":"graphics","style":"bold","format":"vertical"}' reduz o escopo).

Um template é uma cena inteira, então vai diretamente em SCENES:

{name: 'Features', seconds: 4.5, component: () => (
  <Features title="Everything in" accent="one window." items={[{icon: Columns3, title: 'Split panes', text: '…'}]} />
)},

Uma cena a partir de uma gravação flutua a janela, painel ou celular em 3D sob uma Caption, com a câmera se movendo sobre ele: references/camera.md.

Usando a biblioteca bem.

• Metric, Stat e Quote usam apenas números e citações reais, com permissão.
• Os desenhos se tingem em direção à cor da marca: para uma sensação artesanal e humana, e em paper.
• Voz: npm run voice -- script.txt name fala um script com as vozes embutidas do Mac ou Windows (ou use WAVs gravados) em public/voice/name/ e src/voice/name.ts. Voiceover o reproduz, voiceTiming/voiceEnd temporizam cenas para ele, e Captions e Waveform o seguem. Feeds são reproduzidos sem áudio: um vídeo narrado ainda precisa de suas legendas. Vozes embutidas são para rascunhos; para um vídeo publicado, grave uma pessoa ou use uma voz para a qual o usuário tenha os direitos.
• Transições que o catálogo chama de shader WebGL são apenas destaques: verifique cada quadro da renderização final ao redor de uma.
• Retribua o que um vídeo inventa. Um layout, um chip ou um movimento que outro vídeo poderia usar se torna um item na biblioteca do projeto (uma pasta com o componente, sua amostra em <nome>.demo.tsx e item.json, depois npm run library), e ofereça ao usuário adicioná-lo também à própria biblioteca do dolly.

Várias marcas em um projeto (variantes para clientes, ou um vídeo por produto): <LookProvider style="soft" brand={{name, url, logo, accent}}> as define para tudo dentro, e useBrand() lê a marca.

Cada formato. As cenas leem o quadro a partir de useLook(): look.safe (inserções que as plataformas cobrem com seus próprios botões: mantenha o texto dentro), look.band (a faixa de legenda no topo), look.aim (passe para focusOn), look.size (o tamanho da headline), look.tall, e byShape(look, {wide, tall, square}) para escolher um layout.

5. Bom gosto

O que o faz parecer caro, em qualquer estilo:

• A própria aparência do produto. Seu destaque, suas fontes (brand.fonts), seu logotipo, um estilo que o encaixa.
• Uma headline em cada take, na faixa no topo, a frase de destaque definida à maneira do estilo.
• Coisas reais, cortadas de perto. Janelas inteiras, painéis únicos como cartões flutuantes, o celular ao lado do Mac. Uma cena geralmente tem dois ou três cortes, e a legenda muda com o corte. Corte bem apertado ao redor do que um push-in vai mostrar.
• Mostre a entrada. Tap onde algo é tocado, Callout ou Spotlight ao redor do que importa, um Cursor sobre um template, um chip Speed sempre que o material for acelerado.
• Som em cada virada, e pouco mais. public/sfx/ting.wav em cada momento em que a história vira, no quadro em que se torna legível (não na linha de compasso seguinte); click.wav em um toque; whoosh.wav apenas sob movimentos de todo o quadro (o vídeo reproduz um sob uma transição que viaja: slide, whip, zoom, flip, no máximo um a cada 8 s), cerca de dois por vídeo. Mantenha os efeitos em cerca de 5 a cada 10 s e deixe a música carregar os outros cortes: a faixa licenciada do usuário, ou npm run music -- <seconds>.
• Evite os sinais de design gerado: texto gradiente, gradientes roxo-para-azul, ciano sobre escuro, todos os cartões iguais, um efeito em cada palavra, cinco transições em um vídeo. Um efeito por ideia, um estilo de transição por vídeo (mais um destaque), os padrões do estilo primeiro.

Regras de movimento. Verifique cada take contra elas.

1. Mova a câmera, não os objetos. Um caminho de câmera por take; a profundidade dá o paralaxe.
2. Um movimento por take, com uma razão: revelar, seguir, ou empurrar em direção ao que importa.
3. Plano para ler. Enquanto há texto para ler, ele fica de frente para a câmera e se move lentamente.
4. Suavize tudo. Chegue com ease.out, saia com ease.in (mais rápido), ease.inOut entre pausas. Quique apenas onde o estilo é saltitante, ou em um logotipo.
5. Nunca pare completamente. Dê a cada take uma deriva lenta (useShot's segundo argumento).
6. Segure tempo suficiente para ler, depois corte. Quando em dúvida, segure mais e encurte a próxima cena.
7. Corte na batida (0,5 s a 120 BPM) e mantenha a direção do movimento através do corte: uma cena sai da mesma forma que a próxima chega.
8. Moderação. O produto é a estrela: no máximo um movimento ou efeito vistoso a cada 10 s.

Os números que os principais vídeos de lançamento atingem (medidos quadro a quadro): a imagem se move dentro de 0,1 s e a primeira palavra é lida até 0,4 s; o produto está na tela até um quarto do caminho; algo muda a cada cerca de 0,7 s, mesmo dentro de um take longo; o texto sendo lido se move a cerca de 3 px por quadro; uma pausa projetada de 1–1,6 s na afirmação principal, nenhuma outra imobilidade acima de 0,8 s; o maior momento por volta de 80% do tempo de duração, depois um cartão final calmo de cerca de 2 s.

references/gotchas.md tem as armadilhas: o que achata o 3D, o que quebra a renderização quadro a quadro, os limites do ffmpeg empacotado.

6. Revisar

npx remotion still Sheet out/sheet.png                                          # o vídeo, 1 quadro/s
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # uma cena, 5 quadros/s
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # outro formato, área segura desenhada
npx remotion still Vertical out/f140.png --frame=140                            # um quadro, tamanho completo
npm run styles && npm run formats                                               # um quadro em cada estilo/ formato

Leia cada PNG. Verifique se:

• os primeiros 2 s fazem sentido sem som e sem contexto;
• qualquer coisa legível está quadrada para a câmera e mantida (várias células quase idênticas em sequência);
• o texto fica dentro da área segura tracejada em todos os formatos, e o assunto entre as linhas pontilhadas;
• nada importante é cortado pela borda do quadro, escondido atrás de uma camada mais próxima, ou sob uma legenda;
• nenhum quadro está em branco ou espelhado (a câmera dentro ou atrás de algo);
• célula vizinha

…

[truncado para tradução]