Conteúdo detalhado
🗺️ Visão geral — intros, outros e lower-thirds
Intros e outros são os primeiros e últimos frames que o espectador vê. Um intro fraco perde visualizações nos primeiros 5 segundos. Um outro sem call-to-action perde inscrições e cliques. Esses templates resolvem os dois lados.
🎯 Conceito central
Todos esses templates usam o mesmo padrão: spring() para entradas com física natural + interpolate() para saídas suaves. A diferença está no quê anima — texto, sublinhas, anéis, partículas.
🎞️ cinematic-title-intro — spring + sublinha
O cinematic-title-intro é o template de abertura mais usado: título sobe com física de mola (spring()), uma sublinha se expande da esquerda para direita, e o subtítulo faz fade in com delay. Resultado cinematográfico com ~50 linhas de código.
const titleY = spring({ frame, fps, from: 50, to: 0, durationInFrames: 40, config: { damping: 14, mass: 0.8 }, }); const underlineWidth = interpolate( frame, [20, 50], [0, 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const subtitleOpacity = interpolate( frame, [40, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } );
💡 Dica prática
Troque a cor do underline para a cor da sua marca. Com uma linha de mudança no gradient você tem um intro completamente personalizado. Combine com fade-through-black antes para entrada do preto cinematográfica.
⏱️ countdown-intro — anel 3-2-1-GO!
O countdown-intro usa um anel SVG com strokeDasharray animado para mostrar o progresso de cada segundo, enquanto o número no centro muda de 3 → 2 → 1 → GO com spring de escala.
const circumference = 2 * Math.PI * 70; const ringProgress = (frame % fps) / fps; const dashOffset = circumference * ringProgress; // GO! com spring de escala const goScale = spring({ frame: Math.max(0, frame - totalCountdownFrames), fps, config: { damping: 8, stiffness: 100 }, }); // SVG: anel gira -90deg (topo = início) <svg style={{ transform: "rotate(-90deg)" }}> <circle stroke="#3b82f6" strokeDasharray={circumference} strokeDashoffset={dashOffset} /> </svg>
✓ Contextos ideais
- •Streams ao vivo (intervalo antes do início)
- •Tutoriais técnicos com introdução energética
- •Vídeos de esporte, jogos, desafios cronometrados
✗ Evite em
- •Conteúdo corporativo sério / formal
- •Vídeos emocionais ou narrativos
- •Quando o próprio conteúdo já tem introdução forte
📋 lower-third — barra nome/título
O lower-third é o overlay clássico de TV: uma barra aparece no terço inferior do frame com nome e cargo/função. Em jornalismo e entrevistas é padrão; em YouTube é um diferencial de profissionalismo.
Barra desliza da esquerda
Um elemento translateX(-100% → 0) com spring entra do limite esquerdo do frame.
Texto aparece com delay
Nome e cargo fazem opacity fade in após a barra estar visível — evita texto aparecendo antes do container.
Barra sai para a esquerda
Próximo ao fim da composição, a barra faz o caminho reverso com interpolate suave.
💡 Dica prática
Use lower-third com <Sequence from={fps * 3} durationInFrames={fps * 4}> para exibir a barra apenas em determinado trecho do vídeo. O useCurrentFrame() dentro da Sequence começa do zero — sem cálculos de offset manual.
🔔 end-card + subscribe-reminder — conversão
O end-card exibe um card de call-to-action no fim do vídeo com botões de inscrição. O subscribe-reminder é um overlay flutuante que pode aparecer em qualquer momento — ambos são armas de conversão para canais YouTube.
// Aparece no frame 90, fica 3s, some const showAt = fps * 3; const hideAt = fps * 6; const opacity = interpolate( frame, [showAt, showAt + 10, hideAt - 10, hideAt], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const translateY = spring({ frame: Math.max(0, frame - showAt), fps, config: { damping: 12 }, from: 60, to: 0, });
✓ Boas práticas
- •Exibir subscribe-reminder na metade do vídeo
- •End-card com 20s de duração (padrão YouTube)
- •Manter o cloche visual curto e objetivo
✗ Erros comuns
- •Exibir subscribe-reminder muito cedo (antes de 30s)
- •End-card com mais de 4 elementos — confunde
- •Cores que conflitam com o conteúdo por trás
💬 quote-card + title-split — impacto visual
O quote-card exibe uma citação com autor em destaque — ótimo para vídeos de motivação, entrevistas e destaques de aula. O title-split divide o título em dois blocos que se encontram no centro — efeito dramático para aberturas.
💡 title-split na prática
O truque do title-split é simples: dois spans, um com translateX(-80 → 0) e outro com translateX(80 → 0), ambos animados com spring no mesmo frame. O encontro no centro cria tensão visual que o espectador sente mesmo sem notar a mecânica.
const progress = spring({ frame, fps, config: { damping: 18, stiffness: 90 } }); // Metade esquerda vem da esquerda const leftX = interpolate(progress, [0, 1], [-80, 0]); // Metade direita vem da direita const rightX = interpolate(progress, [0, 1], [80, 0]);
📚 Biblioteca completa de Intro & Outro
Os 9 templates desta categoria — referência rápida:
📌 Resumo do módulo
Próximo Módulo:
2.9 — Logo & Branding: 9 animações de logotipo para identidade visual