Ver a receita inteira
Desenha as formas com o mesmo número de pontos (80), todas a começar no topo, no mesmo sentido. Depois interpolatePath(t, de, para), t com easing in-out.
Em Remotion 4 (React + TypeScript), composição 1080×1920, 30 fps, 120 fotogramas, fundo #12100D. Instala @remotion/paths na mesma versão do remotion.
Gera 4 formas como listas de 80 pontos [x, y] num círculo unitário, todas a começar no topo e a andar no sentido dos ponteiros do relógio:
- círculo: a = −π/2 + 2π·i/80 → [cos a, sin a];
- estrela: 10 vértices a alternar raio 1 e 0,46 (o 1.º no topo), reamostrados para 80 pontos distribuídos pelos lados conforme o comprimento, mantendo os vértices;
- coração: t = 2π·i/80, x = 16·sin³t, y = −(13·cos t − 5·cos 2t − 2·cos 3t − cos 4t), tudo ÷ 16,5;
- raio: polígono [[59,0],[80,0],[60,38],[86,38],[30,100],[44,56],[16,56],[38,0]] centrado em (51, 50) e ÷ 48, reamostrado como a estrela.
- Cada forma vira string "M x y L x y … Z" com raio 290 px, centro (540, 760).
- A cada 30 f muda para a forma seguinte: t = interpolate(frame - mudanca, [0, 12], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.77, 0, 0.175, 1)}); <path d={interpolatePath(t, de, para)} fill="#FFC53D" />.
NÃO faças: cross-fade (duas formas com opacity); formas com números de pontos diferentes; formas que começam em sítios diferentes; t fora de 0 a 1 (nada de spring com salto aqui).Se ficar estranho, diz-lhe: «A forma torce-se ou faz um nó a meio: as formas não começam no mesmo ponto ou não vão no mesmo sentido: começa todas no topo, no sentido dos ponteiros do relógio.»
