Detailed content
🗺️ Overview — when to animate the logo
The animated logo is the business card in motion of the brand. The choice of animation style communicates personality: blur-reveal = sophistication, bounce-drop = energy, glitch = tech/disruptive, stroke-draw = handcrafted/premium.
🎯 Selection rule
Before choosing the animation, answer: what adjective describes my brand? — Sophisticated → blur-reveal. Reliable → stroke-draw. Innovative → glitch-reveal. Young → bounce-drop. Use at most one logo animation per video.
🔍 logo-blur-reveal — photographic focus pull
O logo-blur-reveal imitates the focus pull camera: the logo starts with extreme blur (out of focus, as when the camera focuses on the foreground) and gradually becomes sharp. The company name appears with a spring animation after the logo is completely in focus.
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)\`
💡 Practical tip
For premium brands, reduce the stiffness to 60 and increase the damping to 20. The company name will appear more slowly, communicating luxury and confidence — unlike the default's energetic bounce.
⚡ logo-glitch-reveal — disruptive RGB split
O logo-glitch-reveal uses the technique of RGB channel separation: three copies of the logo (red, green, blue) are randomly offset (Math.sin) and then "converge" into the clean logo. The effect suggests a technical glitch being resolved—perfect for tech brands.
// 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 }, });
✓ Brands that are a good fit
- •Tech startups, cybersecurity, games
- •Tech/hacking/programming YouTube channels
- •Electronic music, EDM events, streamers
✗ Brands that aren't a good fit
- •Banks, healthcare, legal — gives the impression of an error
- •Luxury brands — the glitch contradicts their positioning
- •Children’s content — may scare or confuse
✏️ logo-stroke-draw — drawn SVG stroke
O logo-stroke-draw uses the technique of strokeDashoffset to simulate an SVG stroke being drawn in real time. Requires the logo to be a pure SVG (not a raster image). This is the most handcrafted and premium of the styles.
Get the SVG path length
In React, pathRef.current.getTotalLength() returns the total length of the path in pixels.
Set dasharray = length
strokeDasharray={pathLength} creates a stroke that covers the entire path — dashoffset controls how much is visible.
Animate dashoffset from length → 0
interpolate(frame, [0, fps*2], [pathLength, 0]) — the stroke "draws itself" over 2 seconds.
💡 Practical tip
Add fill="none" on the path during the drawing animation and use a second interpolate to make the fill appear (fillOpacity 0→1) only after the stroke is finished. The effect is: draw the outline → fill in the color. Much more impactful than just the outline.
🏀 logo-bounce-drop — physics-based drop
O logo-bounce-drop uses spring() with damping too low to create the effect of an object falling from above and bouncing before coming to rest. It’s the most energetic and fun template — ideal for youth brands and entertainment brands.
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" });
✓ Perfect for
- •Children's channels, playful learning, games
- •Sports, fitness, and energy brands
- •Apps and startups with a casual tone
✗ Unsuitable for
- •Premium, finance, and health brands
- •Formal contexts — harms credibility
- •Highly detailed logos — squash distorts them
🔀 logo-split-reveal — halves expand
O logo-split-reveal splits the logo horizontally in half: the top half moves up and the bottom half moves down (or vice versa), revealing the background—and then both halves return and fit together. It’s a “curtain opening” effect applied to the logo itself.
💡 Clip-path technique
The split uses clipPath to create two versions of the same logo — the top half with clip: inset(0 0 50% 0) and the bottom one with clip: inset(50% 0 0 0). Both are animated with spring translateY in opposite directions. The original logo remains static underneath as a visual anchor.
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
📚 Complete Logo & Branding Library
The 9 logo animation templates — quick reference with the main technique:
📌 Module summary
Next Track:
Track 3 — Composition: learn to combine multiple templates into complete, professional videos