# Logo Animation

> Build interactive, production-grade logo animations using pure CSS/JS with a collaborative design workflow. Use this skill whenever the user wants to create a logo animation, animated text transition, brand intro animation, landing page logo reveal, or any text-based motion design. Also trigger when users mention "animate my logo", "logo reveal", "text animation", "brand animation", "landing page…

- **Type:** Skill
- **Install:** `agentstack add skill-karlostoteles-animated-logo-skill-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [karlostoteles](https://agentstack.voostack.com/s/karlostoteles)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [karlostoteles](https://github.com/karlostoteles)
- **Source:** https://github.com/karlostoteles/animated-logo-skill/tree/main/skill

## Install

```sh
agentstack add skill-karlostoteles-animated-logo-skill-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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
3. **The vibe** — What should it feel like? "Minimal but playful", "energetic", "premium", "fun and chaotic"
4. **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
```css
@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:
```css
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:
```css
@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](https://github.com/karlostoteles)
- **Source:** [karlostoteles/animated-logo-skill](https://github.com/karlostoteles/animated-logo-skill)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-karlostoteles-animated-logo-skill-skill
- Seller: https://agentstack.voostack.com/s/karlostoteles
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.