Como o anúncio de 15 segundos do exemplo foi feito

O pedido

Um vídeo de exemplo para quem baixa o editor renderizar no primeiro uso. Tinha que ser curto, mostrar os tipos de cena que o editor faz bem e usar só coisa com licença livre: nada de fonte, trilha ou logo de terceiro. Daí a marca fictícia.

As cinco cenas

Cena	Tempo	O que acontece
01	0,0 → 2,9 s	"CAFÉ FRESCO / não espera." chega de longe, palavra a palavra.
02	2,9 → 6,3 s	"Torrado / toda / segunda." cada palavra entra de um jeito: zoom, giro no eixo X, estalo. Um traço se desenha embaixo.
03	6,3 → 10,2 s	Três cards de vidro giram no eixo Y; os ícones (grão, chama, xícara) se desenham com traço SVG.
04	10,2 → 12,6 s	Um contador sobe de 0 a 72 h enquanto um arco se fecha, e entra a chamada para ação.
05	12,6 → 15,0 s	O logo se desenha (só o traço) e depois recebe o preenchimento. Última tela, sempre a marca.

Cada troca de cena tem um flash curto e um efeito sonoro. Os sons (pop, whoosh, impacto) foram sintetizados com o ffmpeg, para não depender de biblioteca com licença.

O que deu trabalho

O traço que não se desenhava. O logo e os ícones usam stroke-dashoffset para "desenhar" o contorno. Com pathLength="1" (o jeito usual), o GSAP arredondava o valor e o traço pulava de vazio para completo, sem passar pelo meio. A conferência automática passou limpa; só o snapshot mostrou. A solução foi usar pathLength="1000", com stroke-dasharray: 1000 2000 e stroke-dashoffset: 1020. Está documentado no repositório, em docs/pegadinhas.md.

Dois fromTo no mesmo elemento. O preenchimento do logo e o traço eram animados no mesmo <ellipse>. O último fromTo escrito virava o estado inicial do vídeo inteiro. Separar em dois elementos (um para o traço, outro para o preenchimento) resolveu e deixou o código mais claro.

Texto estourando a tela de propósito. A entrada "de longe" começa com o texto 2,6 vezes maior que a tela. O check reclama, com razão. A saída é marcar o elemento com data-layout-allow-overflow, dizendo que é intencional.

Números

• 1080 × 1920, 30 quadros por segundo, 450 quadros.
• Render em 45 segundos num notebook com GTX 1650.
• 15,5 MB de MP4, áudio em -20 LUFS (sem narração, só efeitos).
• Fontes: Space Grotesk e Inter, as duas sob licença OFL.

Para fazer o seu

O projeto inteiro está em motion/exemplo-orbita/ no repositório do editor. Copie a pasta, troque textos, cores e fontes, rode npm run check e npm run render.