🎯 O projeto e a estrutura persuasiva
Vídeos de produto seguem uma estrutura clássica de marketing: atenção → interesse → desejo → ação. No Remotion isso se traduz diretamente em cenas: o ken-burns prende atenção, o lower-third desperta interesse, a comparação cria desejo e o end-card convoca ação.
🛍️ Mapa de cenas do projeto
📸 Cena de abertura — ken-burns
O ken-burns é a técnica de fazer zoom + pan suave em uma imagem estática, criando movimento cinemático sem câmera. No Remotion, é simplesmente scale e translate animados com interpolate em um container com overflow: hidden.
const frame = useCurrentFrame(); const { durationInFrames } = useVideoConfig(); // zoom: 1.0 → 1.08 ao longo da cena const scale = interpolate( frame, [0, durationInFrames], [1.0, 1.08], { extrapolateRight: "clamp" } ); // pan: desloca 20px da esquerda para direita const x = interpolate( frame, [0, durationInFrames], [0, -20], { extrapolateRight: "clamp" } ); return <div style={{ overflow:"hidden", width:"100%", height:"100%" }}> <img src={src} style={{ width: "100%", height: "100%", objectFit: "cover", transform: `scale(${scale}) translateX(${x}px)` }} /> </div>;
💡 Dica: escala máxima 1.10
Zoom acima de 1.10 começa a parecer digital e artificial. Mantenha entre 1.03–1.10 e o efeito parece um câmera real. Para pan, 20–30px em 90 frames é o ponto doce — perceptível mas não distrativo.
🏷️ Overlay — lower-third com nome e preço
O lower-third é um overlay que aparece sobre o ken-burns — não é uma cena separada no Series, mas uma Sequence dentro da mesma cena de hero. Ele desliza de baixo, mostra nome e preço, e opcionalmente sai antes da cena terminar.
✓ O que FAZER
- ✓Animar translateY de +80 → 0 em 20 frames (spring). Entrada rápida e firme.
- ✓Usar fundo semi-transparente (rgba 0,0,0,0.6) para o texto ser legível sobre qualquer foto.
- ✓Iniciar com Sequence from={fps} — dá 1 s para o espectador ver o produto antes do texto.
✗ O que NÃO fazer
- ✗Texto branco sem fundo sobre foto clara — ilegível dependendo da foto do produto.
- ✗Lower-third no frame 0 — cobre o produto antes do espectador ver.
- ✗Preço em fonte pequena — no mobile (redes sociais) precisa de pelo menos 36px.
⚖️ Cena de comparação — split-screen
A cena de comparação usa split-screen.tsx para mostrar duas imagens lado a lado, ou image-comparison-slider.tsx para revelar progressivamente o "depois" sobre o "antes". Ambas usam clip-path animado para controlar a divisão.
Frame 0–15: entrada das duas imagens
Imagem esquerda desliza da esquerda e direita desliza da direita, ambas com opacity 0→1. O espectador vê as duas aparecerem ao mesmo tempo.
Frame 15–60: linha divisória animada
Uma linha vertical branca separa os dois lados. No slider, ela se move de 30% para 70% revelando progressivamente o "depois".
Frame 60–90: rótulos aparecem
"Antes" e "Depois" (ou "Sem produto" / "Com produto") entram com spring, reforçando a comparação visualmente.
📊 Prova social — stat-counter
A cena de números usa stat-counter.tsx para animar contadores de 0 até o valor real do produto: avaliações, vendas, estrelas. O número "contando" prende o olhar e torna o dado mais memorável do que texto estático.
const frame = useCurrentFrame(); const progress = interpolate( frame, [0, 60], [0, 1], { easing: Easing.out(Easing.cubic), extrapolateRight: "clamp" } ); const value = Math.round(progress * targetValue); // Exemplo: targetValue = 12847 (vendas) // frame 0 → "0", frame 30 → "6.424", frame 60 → "12.847" return <div> <span>{value.toLocaleString("pt-BR")}</span> <span className="text-sm"> vendas</span> </div>;
📊 Dados recomendados para vídeos de produto
- Avaliações: ⭐⭐⭐⭐⭐ 4.8/5 — efeito visual com estrelas preenchendo
- Volume: "12.847 vendas" — número grande impressiona
- Satisfação: "97% recomendam" — porcentagem é rápida de absorver
- Comparativo: "-40% em relação à concorrência" — ancora o preço
📣 End-card e ritmo do vídeo
O end-card é a última cena: apresenta logo, URL, preço final ou QR code. Tudo que estava espalhado nas cenas anteriores converge aqui numa mensagem clara: "onde comprar". O ritmo geral do vídeo deve acelerar levemente em direção ao end-card.
✓ End-card eficaz
- ✓Logo centralizado com spring — identidade final da marca.
- ✓URL ou CTA em fonte grande e cor contrastante.
- ✓Duração de 90–120 frames (3–4 s) — tempo de ler e agir.
✗ End-card que não converte
- ✗Muitas informações ao mesmo tempo — espectador não sabe onde olhar.
- ✗Menos de 60 frames — não há tempo para absorver a URL.
- ✗Fundo igual ao do vídeo — end-card não se diferencia visualmente.
🏁 Resumo do Módulo
Próximo Módulo:
4.3 — Data-Story: gráficos animados + stat-counter + comparação + narrativa de dados.