This skill should be used when the user asks to "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), vid

Logo Animation Bring a brand mark to life with one clear idea, on brand geometry, and a crisp settle. Animate for web (SVG/Lottie), video intros/outros, or app splash screens, and always ship a static end frame fallback. When to use Build an intro stinger, sign off, app splash, or loader idle loop. Reveal a brand mark on a landing hero or sizzle reel. Draw on an SVG mark, wipe/build it in piece by piece, or morph an icon into a wordmark. Sync the final settle of the mark to a sound logo beat. Core principle Pick ONE technique per logo — draw OR build OR morph — not all at once. Reveals run 0.8–2.5s. Never distort brand geometry; scale and fade are safe, skew and squash usually are not. Respect clearspace (keep the mark's minimum margin clear of motion debris). Always provide a prefers reduced motion path that shows the final mark with no motion. Technique map Technique Best for Mechanism Stroke draw on Line marks, monograms, signatures stroke dashoffset 1→0 Mask wipe / reveal Filled shapes, gradients animate a <clipPath / <mask rect Build on (stagger) Multi piece marks, grids per group opacity+transform, staggered Morph Icon ↔ wordmark, shape→logo GSAP MorphSVG or matched path interpolation Idle loop Loaders, ambient splash seamless cyclic transform (rotate/pulse) Wordmark Logotypes per letter mask/translate stagger Quick start: SVG stroke draw on The fastest on brand web reveal. Each path draws itself, then fills settle in. pathLength="1" normalizes every path to length 1, so one stroke dasharray / offset value works regardless of geometry. Stagger multiple strokes with animation delay . Quick start: build on with stagger (GSAP) Group order matters: reveal the base/container first, then accents, then the wordmark last so the eye lands on the name. Sound logo sync When audio exists, the brand's final settle frame must land exactly on the sonic accent (the "ding"/whoosh peak). Decide the audio first, find the peak timecode, then time the reveal so the mark snaps to full opacity/scale on that frame. A 1.0s reveal landing a 1.2s mnemonic feels premium; a settle that floats free of the sound feels cheap. Add a tiny overshoot and settle (scale 1.04→1.00 over ~0.15s) on the beat for impact. Delivery targets Web, interactive / hero : inline SVG + CSS or GSAP. Smallest payload, crisp at any size, scriptable. Product / app, designer made : Lottie ( .json exported from After Effects via Bodymovin). Use lottie web or @lottiefiles/dotlottie web ; set loop , autoplay , and a poster fallback frame. Video intro/outro : Remotion (React) or After Effects render to ProRes/H.264. Pre render at 2x for crispness. Output checklist Animated mark in the target format (SVG/Lottie/video). Static final frame fallback (SVG or PNG) for reduced motion and posters. One clear technique, reveal ≤2.5s, brand geometry intact, clearspace respected. Sound logo settle aligned to the audio peak (if audio present). Deliver & verify (standalone HTML) Packaged helper ( scripts/ ): scripts/seek shot.sh anim.html 0 1.5 3 freezes the ?t=N harness and screenshots each moment; scripts/contact sheet.sh sheet.png frame .png tiles them for one glance review. See scripts/README.md . Logo animation spans web/SVG/Lottie, video, and app splash. For web/SVG/Lottie delivery use this standalone HTML loop; for a video logo sting, render via the remotion video verify loop instead. For web/SVG/Lottie, ship one .html file that opens directly in a browser — inline SVG markup plus the reveal (CSS or one CDN GSAP <script ), self contained. One file is the right tier. Output contract: One .html file: the inline SVG (or Lottie canvas) + the reveal in inline <style / <script . One animation driver — the CSS @keyframes draw/build, or a single GSAP timeline; not both. Include the freeze harness below, matched to the technique, so any moment can be screenshotted deterministically. Freeze harness — pin a frame for screenshots. Match the mechanism to the technique: Verify loop — render → freeze → screenshot → check: 1. Open the file frozen at start / mid / end of the reveal (≤2.5s): …/logo.html?t=0 , ?t=<dur/2 , ?t=<dur . 2. Screenshot each frozen frame. 3. Check fidelity (matches the mark, one clear technique) and artifacts — brand geometry undistorted, clearspace clear of motion debris, no half drawn strokes left at the end frame, the static final frame is the true logo. 4. Iterate: if any check fails (e.g. a half drawn stroke at ?t=<dur or distorted geometry mid reveal), fix the stroke dashoffset/duration/easing, re render the same ?t=N , and re screenshot to confirm the fix — loop until every frame is clean. Before you finish: 1. Opens standalone in a browser — no console errors, no missing CDN. 2. One technique/driver; ?t=N freezes the exact frame correctly. 3. Screenshotted at start / mid / end — geometry intact, clearspace respected, final frame is the clean mark. 4. prefers reduced motion honored (final static mark shown, no motion) + static end frame fallback shipped. 5. Reveal ≤2.5s; if audio present, the settle lands on the sound logo peak. Reference files references/logo patterns.md — runnable code for every technique: stroke draw on, mask wipe build on, GSAP MorphSVG morph, seamless idle loop, Lottie delivery, plus timing tables (0.8–2.5s), brand clearspace rules, and reduced motion fallbacks.

logo-animation