Conteúdo detalhado
🗺️ Visão geral — quando animar o logotipo
O logotipo animado é o cartão de visita em movimento da marca. A escolha do estilo de animação comunica personalidade: blur-reveal = sofisticação, bounce-drop = energia, glitch = tech/disruptivo, stroke-draw = artesanal/premium.
🎯 Regra de escolha
Antes de escolher a animação, responda: que adjetivo descreve minha marca? — Sofisticada → blur-reveal. Confiável → stroke-draw. Inovadora → glitch-reveal. Jovem → bounce-drop. Use no máximo uma animação de logo por vídeo.
🔍 logo-blur-reveal — focus pull fotográfico
O logo-blur-reveal imita o focus pull de câmera: o logo começa com blur extremo (desfocado como quando a câmera foca em primeiro plano) e vai ficando nítido progressivamente. O nome da empresa aparece com spring após o logo estar completamente focado.
import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion"; // blur de 20px → 0 em 1.5s const blur = interpolate(frame, [0, fps * 1.5], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }); // nome aparece DEPOIS do logo estar nítido const nameProgress = spring({ frame: Math.max(0, frame - Math.round(fps * 1.5)), fps, config: { damping: 12, stiffness: 100 }, }); // aplicar: filter: \`blur(\${blur}px)\`
💡 Dica prática
Para marcas premium, reduza a stiffness para 60 e aumente o damping para 20. O nome da empresa vai aparecer mais lentamente, comunicando luxo e confiança — ao contrário do bounce energético do padrão.
⚡ logo-glitch-reveal — RGB split disruptivo
O logo-glitch-reveal usa a técnica de RGB channel separation: três cópias do logo (vermelha, verde, azul) ficam deslocadas aleatoriamente (Math.sin) e depois "convergem" para o logo limpo. O efeito é de falha técnica resolvida — perfeito para marcas de tecnologia.
// decay: glitch some progressivamente const decay = interpolate(frame, [0, 25], [1, 0], { extrapolateRight: "clamp" }); // canal vermelho: oscilação senoidal × decay const redOffsetX = Math.sin(frame * 7.3) * 15 * decay; const blueOffsetX = Math.sin(frame * 9.2) * 15 * decay; // logo limpo aparece com spring após glitch const cleanOpacity = spring({ frame: Math.max(0, frame - 25), fps, config: { damping: 14, stiffness: 80, mass: 0.6 }, });
✓ Marcas que combinam
- •Startups de tecnologia, cybersecurity, games
- •Canais de YouTube tech/hacking/programming
- •Música eletrônica, eventos EDM, streamers
✗ Marcas que não combinam
- •Bancos, saúde, jurídico — passa sensação de erro
- •Marcas de luxo — o glitch contradiz o posicionamento
- •Conteúdo infantil — pode assustar ou confundir
✏️ logo-stroke-draw — traço SVG desenhado
O logo-stroke-draw usa a técnica de strokeDashoffset para simular um traço SVG sendo desenhado em tempo real. Exige que o logotipo seja SVG puro (não imagem rasterizada). É o mais artesanal e premium dos estilos.
Obter comprimento do path SVG
Em React, pathRef.current.getTotalLength() retorna o comprimento total em pixels do path.
Configurar dasharray = comprimento
strokeDasharray={pathLength} cria um traço que cobre todo o path — o dashoffset controla quanto aparece.
Animar dashoffset de comprimento→0
interpolate(frame, [0, fps*2], [pathLength, 0]) — o traço "se desenha" ao longo de 2 segundos.
💡 Dica prática
Adicione fill="none" no path durante a animação de desenho e use um segundo interpolate para fazer o fill aparecer (fillOpacity 0→1) somente após o traço terminar. O efeito é: desenha o contorno → preenche a cor. Muito mais impactante que só o traço.
🏀 logo-bounce-drop — queda com física
O logo-bounce-drop usa spring() com damping muito baixo para criar o efeito de um objeto caindo de cima e quicando antes de repousar. É o template mais energético e divertido — ideal para marcas jovens e marcas de entretenimento.
import { spring, useCurrentFrame, useVideoConfig } from "remotion"; const dropY = spring({ frame, fps, from: -300, // começa 300px acima to: 0, config: { damping: 6, // baixo = muitos bounces stiffness: 120, // alto = queda rápida mass: 1.2, // leve extra de peso }, }); // Logo "amassa" no bounce usando scaleY const squash = interpolate(Math.abs(dropY), [0, 50], [0.85, 1], { extrapolateRight: "clamp" });
✓ Perfeito para
- •Canais infantis, educação lúdica, games
- •Marcas de esporte, fitness, energia
- •Apps e startups com tom descontraído
✗ Inadequado para
- •Marcas premium, finanças, saúde
- •Contextos formais — prejudica credibilidade
- •Logotipos com muito detalhe — squash distorce
🔀 logo-split-reveal — metades expandem
O logo-split-reveal divide o logotipo horizontalmente ao meio: a metade superior sobe e a inferior desce (ou vice-versa), revelando o fundo — e então as duas metades retornam e se encaixam. É um efeito de "abertura de cortina" aplicado ao próprio logo.
💡 Técnica de clip-path
O split usa clipPath para criar duas versões do mesmo logo — a metade de cima com clip: inset(0 0 50% 0) e a de baixo com clip: inset(50% 0 0 0). As duas são animadas com spring translateY em direções opostas. O logo original permanece estático por baixo como âncora visual.
const splitY = spring({ frame, fps, from: 60, to: 0, config: { damping: 16, stiffness: 100 }, }); // metade superior vai para cima, inferior para baixo style={{ transform: `translateY(-${splitY}px)`, clipPath: "inset(0 0 50% 0)" }} // topo style={{ transform: `translateY(${splitY}px)`, clipPath: "inset(50% 0 0 0)" }} // base
📚 Biblioteca completa de Logo & Branding
Os 9 templates de animação de logotipo — referência rápida com técnica principal:
📌 Resumo do módulo
Próxima Trilha:
Trilha 3 — Combinação: aprender a compor múltiplos templates em vídeos completos e profissionais