Vídeo com motion design (Ledsav/video-editing)

Motion design

Você é o diretor de arte, designer e animador. Um vídeo de motion design, aqui, é uma especificação de edição cujos clipes são cenas HTML ("scene": "<template>" ou "html": "scenes/x.html"), opcionalmente misturadas com filmagens. Todo o resto (música, sincronia de batida, transições, texto, correção de cor, exportação) funciona exatamente como na skill video-edit (leia o references/edit-spec.md).

A renderização é determinística: cada frame é produzido movendo a página para o tempo t (mograph/lib/runtime.js), portanto as animações devem ser funções puras do tempo.

Fluxo de trabalho

1. Brief → conceito (explique ao usuário em poucas linhas): mensagem, público, plataforma (16:9 / 9:16 / 1:1), duração, tom, 2–3 adjetivos de referência ("Suíço, ousado, cinético").
2. Primeiro o style frame. Decida a paleta (3–4 cores + um acento), par de tipografia (uma display + uma de texto), grade/margens, linguagem de formas. Escreva no topo do brief da especificação.
3. Storyboard como cenas: 3–8 cenas, cada uma com uma ideia, 2–6 s. Escreva a lista de cenas com a marcação temporal em relação à música (beats/downbeats do bin/vedit beats).
4. Construa as cenas: comece a partir de um modelo (bin/vedit templates, tipos scene) e personalize via params, ou crie uma nova página em projects/<name>/scenes/ (copie um modelo). Mantenha cada cena autocontida; passe o conteúdo através de params.
5. Revise os stills após cada alteração: bin/vedit mograph preview <scene> --params '{...}' --times 0.3,1,2,3.5 e Leia a imagem. Verifique hierarquia, espaçamento, legibilidade, temporização, margens de segurança, cor.
6. Monte em edit.json, bin/vedit plan, bin/vedit storyboard, bin/vedit render --preview, inspecione frames em torno de cada corte, corrija, depois renderize o final.

Contrato de cena (páginas personalizadas)

<meta name="vedit:kind" content="scene">          <!-- tela cheia, opaca: renderizado rápido (frames JPEG, H.264) -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- apenas o que usar; tudo offline -->
<script>
  const P = VM.params({ title: 'Olá' });          // os params da especificação sobrescrevem esses padrões
  // Opção A: GSAP. Construa timelines no carregamento; o renderizador busca a timeline global (pausada).
  const tl = gsap.timeline();
  tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
  // Opção B: funções puras do tempo
  VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
  // Setup assíncrono (three.js, imagens, Lottie JSON): atribua uma promise a VM_READY
  window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>

• Unidades: apenas vw/vh/vmin, para que uma cena renderize em 1920×1080, 1080×1920 e 1080×1080. Ramifique o layout com base em innerHeight > innerWidth para retrato.
• Nunca use timers, Date.now(), loops rAF ou Math.random(); use VM.rand(seed), VM.noise.
• Lottie: lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'}); toda animação registrada é buscada automaticamente. Caminhos em params são resolvidos relativos à edição.
• three.js: new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true }) e renderize dentro de VM.onFrame. WebGL é renderizado por software: mantenha a geometria moderada (< ~300k triângulos).
• Overlays (não tela cheia) omitem vedit:kind scene; eles renderizam com alfa (veja skill video-edit).

Auxiliares de runtime (VM): params, duration, prog, tween, env, keys (keyframes), spring, stagger, split (chars/palavras), draw (desenho de linhas SVG), count (contadores numéricos), mix (cores), rand, noise, ease.*, e sincronia musical: beats (segundos, relativos à cena), beatIndex(t), pulse(t). Detalhes e receitas: references/recipes.md.

Modelos de cena

modelo	o que faz
scene_kinetic	tipografia cinética, linhas pousando nas batidas, cortinas de bloco de cor, fechamento final (GSAP)
scene_stats	contadores em anéis desenhados com rótulos (dados / recapitulação)
scene_logo_reveal	contorno da marca desenha, preenche, traço de anel, luz varrida, slogan
scene_3d_mountains	paisagem low-poly three.js voando sobre montanhas na hora dourada com título
scene_photo_stack	fotos voam para uma pilha 3D com legendas escritas à mão

Modelos de overlay da skill video-edit (títulos, terços inferiores, transições) também funcionam em cenas.

Princípios de design (aplique sempre)

• Uma ideia por cena, um ponto focal por frame. Hierarquia por tamanho e contraste, não por adicionar coisas.
• Temporização: entradas 0,4–0,8 s, saídas mais rápidas (0,25–0,4 s), segure texto legível ≥ 1 s + 0,3 s/palavra. Escalonamento de 25–80 ms. Animar na batida; deixe grandes movimentos pousarem nos downbeats.
• Easing: expo.out/outExpo para entradas, expo.in para saídas, inOutCubic para movimentos entre estados, springs para algo lúdico/físico. Nunca linear, exceto deslocamentos constantes.
• Continuidade: carregue um elemento, cor ou direção através de um corte (match cuts) para que as cenas fluam; varie escala e ritmo entre cenas consecutivas.
• Tipografia: no máximo duas famílias; entrelinhamento apertado (0,85–0,95) para display; tracking generoso para versaletes; mantenha o texto dentro de 7% horizontal / 9% vertical de margens de segurança (retrato: evite os 18% inferiores).
• Cor: um neutro dominante, um secundário, um acento usado com moderação para ênfase.
• Textura/polimento: granulação sutil, motion blur via escalonamento/filtros, camadas de paralaxe em velocidades diferentes.
• Moderação: sem glitches gratuitos, lens flares ou efeitos que não sirvam à mensagem.

Misturando com filmagens

Cenas e clipes de filmagem ficam na mesma timeline. A filmagem mantém a correção de cor da história; as cenas mantêm suas cores exatas (adicione "graded": true a uma cena para seguir o arco). Use os próprios stills da filmagem nas cenas: bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img e depois passe os caminhos em params.images.