Logo Animation

Logo Animation Skill

Build interactive logo animations through a collaborative, iterative design process. The user describes what they want, you build a live preview they can play/loop/tweak, and you iterate together until it's perfect. Then export as a production-ready component.

Why This Exists

Logo animation tools are either too complex (After Effects, Rive) or too generic (AI logo generators). This skill turns Claude into a real-time motion design partner: the user describes movements in natural language, you build them as live HTML previews, and you iterate together. No design skills needed.

Core Philosophy

1. Playful but not chaotic — Animations should feel alive and fun without being overwhelming
2. Each letter is an actor — Give individual letters unique movements, personality, and purpose
3. Physics sell the illusion — Overshoot, bounce, settle. Never just linear A→B transitions
4. Iterate fast — Build rough, show it, refine based on feedback. Don't over-architect v1

Workflow

Phase 1: Understand the Logo

Before writing any code, clarify:

1. The text — What's the full text? What's the final form? (e.g., "guessmyNFT" → "gm" + "NFT" stacked)
2. The font — Do they have a specific font? If not, offer 4-6 options with a visual comparison tool. Consider the brand personality:

• Playful/gaming → Luckiest Guy, Fredoka, Rubik Bubbles, Baloo 2
• Professional/clean → Clash Display, Satoshi, General Sans
• Bold/impactful → Lilita One, Archivo Black
• Retro/arcade → Bungee Shade, Press Start 2P

1. The vibe — What should it feel like? "Minimal but playful", "energetic", "premium", "fun and chaotic"
2. Reference images — Ask for visual references if the user has them. They reveal more than words.

Phase 2: Build the Font Picker (if no font chosen)

Create an HTML page with:

• 4-6 font options displayed as cards showing the full logo text
• Click to select → updates a live animation preview below
• Play/Reset/Loop buttons
• Each card shows the font name + a short description of its personality

Use Google Fonts for web-safe display fonts. Load them via the CSS import method.

Phase 3: Build the Animation Playground

Create a single HTML file with:

Structure:
├── .stage (dark background, rounded corners, overflow:hidden)
│   ├── .scene (relative positioned container, fixed width)
│   │   ├── .letter (absolutely positioned, one per character)
│   │   ├── .nft-final (the final composed element)
│   │   └── effect layers (particles, glow, shimmer)
├── Controls (Play, Reset, Loop buttons)

Critical implementation details:

• Letters are absolutely positioned — Each letter is a ` with position: absolute`. This gives full control over individual movement.
• Measure actual widths — Use offsetWidth on each rendered letter. Never estimate widths from font-size ratios — different letters have different widths.
• Use CSS transitions, not keyframe animations — Transitions give you per-phase control. Apply them dynamically via JS: set the transition property, then set the target transform.
• Cubic bezier curves are everything:
• cubic-bezier(0.4, 0, 0.2, 1) — standard ease
• cubic-bezier(0.34, 1.56, 0.64, 1) — bounce/overshoot (the "playful" curve)
• cubic-bezier(0.34, 1.2, 0.64, 1) — subtle overshoot
• cubic-bezier(0.9, 0, 1, 0.5) — fast slam (for impacts)
• Phase timing with setTimeout chains — Each animation phase is a setTimeout. This is more controllable than CSS animation-delay for complex sequences.

Phase 4: Iterate

This is where the magic happens. The user will request changes like:

• "Make the G touch the M before bouncing back"
• "The letters are too far apart"
• "NFT should land more to the right"
• "Make it feel more like a hammer"

How to handle spatial feedback:

• Use str_replace for small tweaks (gap values, position offsets, timing)
• Rebuild the file for structural changes (new animation phases, new effects)
• Always present_files after every change so the user can test immediately

Common adjustments and what to change:

• "Letters too far apart" → Adjust the gap variable in measureAndPlace()
• "X is cut off" → Increase stage height or reduce font-size
• "Not centered" → Check the cx (center X) calculation and ensure you're measuring actual rendered widths, not estimates
• "Too fast/slow" → Adjust transition duration values
• "More/less bounce" → Adjust the cubic-bezier overshoot value (the second number > 1 = more bounce)

Phase 5: Add Effects

Layer effects AFTER the core animation is solid. Available effects:

Screen Shake

@keyframes screenShake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 2px); }
  20% { transform: translate(3px, -3px); }
  /* ... decreasing intensity ... */
  100% { transform: translate(0, 0); }
}

Trigger by adding/removing a .shake class on the stage element.

Sparkle Particles

Spawn `` elements dynamically at impact points. Each particle:

• Random size (3-8px), random color from palette, border-radius: 50%
• Flies outward using transform: translate + rotate + scale(0.1)
• Box-shadow for glow effect
• Self-removes via setTimeout after animation completes

Gold Shimmer Sweep (on text)

Use background-clip: text with a gradient that includes a bright highlight band:

background: linear-gradient(90deg, baseColor 0%, baseColor 35%, highlight 50%, baseColor 65%, baseColor 100%);
background-size: 300% 100%;

Animate background-position from 100% to -100%. This makes the shine sweep only appear on the letter shapes, not a rectangle.

Breathing Glow

A blurred radial gradient div behind the logo that pulses with scale + opacity:

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

Letter Shatter

When a letter needs to "break apart":

1. Hide the original letter (opacity: 0, instant)
2. Spawn 4-6 fragment divs at the same position, each containing the same letter character at different sizes
3. Each fragment flies in a random direction with rotation + gravity bias
4. Fragments fade out and self-remove

Phase 6: Export

Once the animation is locked, export as:

React Component — Convert the HTML/CSS/JS into a single React functional component:

• All CSS as a template literal injected via useEffect (or CSS modules)
• All DOM manipulation via refs
• Props: autoPlay, delay, loop, onComplete, className
• Namespace all CSS classes (e.g., .gmnft-letter not .letter) to avoid conflicts
• Use useCallback for animation functions to prevent unnecessary re-renders

Standalone HTML — The playground file itself is already production-ready for non-React projects.

Animation Patterns Reference

Read references/patterns.md for a catalog of reusable animation patterns including:

• Roll & knock (letter bowling)
• Hammer strike (windup → slam → hold → shatter)
• Scatter (letters flying in different directions)
• Drop & bounce (gravity with spring physics)
• Shimmer sweep (premium logo reveal)
• Breathing glow (ambient life)

Common Pitfalls

1. Don't estimate letter widths — Always measure with offsetWidth. "m" and "i" are very different widths.
2. Don't use animation for sequenced phases — Use transitions + setTimeout. Animations can't be easily chained with different targets.
3. Don't forget overflow: hidden — On the stage, so scattered letters don't appear outside the viewport.
4. Don't hardcode positions — Always calculate from measurements. Hardcoded px values break on different fonts/sizes.
5. Don't add effects before the motion is right — Effects amplify good animation but can't save bad motion.
6. Don't over-animate — If the user says "playful but not crazy", that means 1-2 signature moments (like an impact + shatter), not every letter doing something wild.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: karlostoteles
• Source: karlostoteles/animated-logo-skill
• License: MIT

Install and usage instructions live in the source repository linked above.