Mapa da trilha
Conteúdo detalhado
📺 Abertura de Canal
Um bumper completo de 10–15 s que combina animação de logo (T2), fundo starfield/gradiente, entrada de título com divisão de texto e transição cinemática para o conteúdo principal.
Um Series com 4 cenas sequenciais: fundo animado (starfield), animação de logo, entrada de título e transição de saída.
A estrutura de abertura é reutilizável em qualquer canal — troca logo e cores e está pronto.
Series · AbsoluteFill · camadas de cena.
templates/starfield.tsx e gradient-shift.tsx compõem o fundo que existe por toda a abertura.
Fundos animados dão profundidade sem precisar de câmera real — são puramente computacionais.
random semeado · ciclos com interpolate · AbsoluteFill no z=0.
templates/logo-spin-reveal.tsx ou logo-stroke-draw.tsx — o logo entra girando ou se desenhando.
A entrada do logo é o momento de identidade da marca; um spring bem calibrado faz diferença visual.
spring · SVG stroke-dashoffset · timing de 0–30 frames.
templates/cinematic-title-intro.tsx ou title-split.tsx — o nome do canal entra em fatias ou cinemático.
Título e tagline são a segunda camada de identidade; a animação precisa ter caráter.
stagger por letra · translateY + opacity · esperar o logo terminar com Sequence from.
templates/iris-transition.tsx ou fade-through-black.tsx — a abertura fecha elegantemente antes do conteúdo começar.
A transição conecta a abertura ao conteúdo sem corte brusco — é o que diferencia amador de profissional.
clip-path animado · opacidade para preto · timing nos últimos 15 frames.
O componente raiz usa Series para colocar fundo + logo + título + transição em sequência sem calcular offsets manualmente.
Series elimina a aritmética de offset e mantém o código legível quando há 4+ cenas.
Series.Sequence · durationInFrames por cena · ordem = tempo.
🛍️ Vídeo de Produto
Um vídeo de 30–60 s que exibe um produto com movimento ken-burns, identifica nome e preço com lower-third animado, mostra comparação e termina com CTA em end-card.
Sequência: Hero (ken-burns), Identidade (lower-third), Comparação (split-screen), Números (stat-counter), CTA (end-card).
Vídeos de produto seguem uma estrutura persuasiva comprovada — aprender essa ordem é aprender marketing visual.
Series · props de dados · reuso entre SKUs.
templates/ken-burns.tsx — a imagem do produto faz zoom lento enquanto desloca, criando movimento cinemático com foto estática.
Ken-burns transforma qualquer foto parada em cena dinâmica — é a técnica mais usada em vídeos de e-commerce.
scale + translateX/Y via interpolate · overflow hidden · easing suave.
templates/lower-third.tsx — faixa animada no terço inferior com nome do produto e preço entrando por slide.
Lower-thirds são o pão e manteiga de qualquer produção profissional — reutilizáveis em qualquer produto.
translateX de fora da tela · Sequence from para aparecer depois do ken-burns · props de texto.
templates/image-comparison-slider.tsx ou split-screen.tsx — divide o quadro mostrando dois estados do produto.
Comparações visuais são poderosas para mostrar transformação (antes/depois) ou diferenciais do produto.
clip-path animado · linha divisória · timing de revelar lentamente.
templates/stat-counter.tsx — números animados de 0 até o valor final (ex: "4.8★ · 12k avaliações").
Números animados prendem atenção e validam o produto socialmente; são mais persuasivos que texto estático.
Math.floor(interpolate) · formatação com toLocaleString · Easing.out.
templates/end-card.tsx — última cena com URL, QR code ou botão animado direcionando o espectador.
Sem call-to-action o vídeo perde conversão. O end-card garante que o último frame tenha propósito.
scale spring · texto de ação · logo no canto inferior.
📈 Data-Story
Um vídeo que conta uma história com dados: gráficos animados, contadores, comparações e texto em destaque — tudo orquestrado para guiar o espectador pela narrativa dos números.
Cenas: Contexto (o problema) → Dado central → Comparação → Tendência (linha do tempo) → Conclusão.
Dados sozinhos não convencem — a ordem das cenas cria a narrativa que torna o número memorável.
ritmo de 5–8 s por cena · texto + dado juntos · transição suave entre gráficos.
templates/chart-animation.tsx ou line-chart.tsx — barras ou linhas crescem para revelar os dados progressivamente.
Gráfico estático é chato; crescendo frame a frame guia o olho do espectador para o dado mais importante.
height/width via interpolate · stagger entre barras · rótulo aparece quando barra chega.
templates/donut-chart.tsx — fatias animadas via SVG stroke-dasharray, mostrando porcentagens de forma visual.
Proporções são mais fáceis de absorver visualmente em um donut do que em texto — é a linguagem natural dos dados.
stroke-dasharray · stroke-dashoffset animado · legenda de cor.
templates/stat-counter.tsx + text-highlight.tsx — o número "conta" até o valor final enquanto o texto contextualiza.
O número animado é a âncora emocional — o espectador foca nele. O texto em destaque reforça a mensagem.
interpolate com Math.round · background highlight via width animada · timing sincronizado.
templates/comparison-chart.tsx — duas colunas crescem juntas, tornando a diferença visualmente óbvia.
Comparação é o argumento mais forte em data-story; o gráfico precisa revelar a diferença dramaticamente.
stagger entre as duas barras · cor contrastante · rótulo de diferença percentual.
Overlap de opacidade entre cenas — cena A faz fade-out enquanto cena B faz fade-in, criando dissolve suave.
Em data-story os dados precisam fluir — cortes secos quebram o ritmo analítico da narrativa.
Sequence com overlap · dois interpolates de opacidade · duração de 10–15 frames de transição.
📱 Reels / Shorts
Um vídeo vertical 9:16 (1080×1920) para Instagram Reels ou YouTube Shorts — ritmo rápido, textos impactantes, fundo vibrante e lembrete de inscrição, tudo em 30–60 s.
Composition com width:1080, height:1920 — tudo lido via useVideoConfig para que os componentes se adaptem automaticamente.
O formato 9:16 muda as proporções de tudo: fontes maiores, menos texto por cena, margens laterais menores.
useVideoConfig · width/height dinâmicos · centralização vertical.
templates/typewriter-subtitle.tsx ou bounce-text.tsx — texto aparece letra por letra ou com cada palavra pulando.
85% dos Reels são vistos sem som — a legenda animada é o áudio visual que mantém o espectador assistindo.
slice por palavra · stagger por frame · fonte grande (min 60px em 1080px).
templates/glitch-text.tsx — a palavra-chave do Reel pisca com offset de cor por alguns frames, criando impacto.
Glitch chama atenção nos primeiros 3 segundos — o algoritmo do Reels mede retenção, e o início é crítico.
random com seed · translateX curto · duração de 2–4 frames por glitch.
templates/sound-wave.tsx — barras de onda animadas que pulsam ao ritmo do conteúdo, dando energia ao vídeo.
Sound-waves criam a sensação de que há música mesmo sem som — sinal visual que remete a conteúdo energético.
Math.sin para oscilação · random seed por barra · tamanho relativo ao height.
templates/bokeh-circles.tsx — círculos desfocados flutuando, simulando fundo de profundidade de campo fotográfico.
Bokeh dá sofisticação ao fundo sem precisar de câmera — o texto no foreground se destaca naturalmente.
filter blur · opacity variável · translateY lento para flutuar.
templates/subscribe-reminder.tsx — animação de sino + "Inscreva-se" que aparece nos últimos 5 segundos do Reel.
O lembrete de inscrição no momento certo aumenta conversão sem parecer spam — é timing, não intrusão.
Sequence from=totalFrames-150 · shake animation · spring de entrada.