Wiggle Logo Animator

Create professional logo animations using Lottie JSON format. Ingest existing logos (PNG/SVG/JPG) or generate simple text-based logos, then animate them with professionally-crafted motion patterns. Output includes Lottie JSON with automatic GIF preview rendering and optional MP4 export.

When to Use This Skill

Trigger this skill when users request:

• "Animate my logo" / "Create a logo animation"
• "Make my logo wiggle/bounce/rotate/pulse"
• "Animated waveform effect for my logo"
• "Motion graphics for my brand logo"
• "Lottie animation for my brand"
• Logo entrance, loop, or loading animations
• Any animation effect applied to a provided logo image

Important: This skill outputs standalone animation files (Lottie JSON, GIF, MP4), NOT interactive React/HTML artifacts. If user wants an interactive tool or web component, defer to artifacts-builder skill.

Core Workflow

1. Define Motion Philosophy (30 seconds - MANDATORY!)

Before creating any animation, answer these three questions:

1. What personality does this brand have? (playful, professional, bold, elegant, innovative, trustworthy)

2. What emotion should the animation evoke? (excitement, trust, creativity, confidence, curiosity)

3. What motion metaphor fits? (organic growth, mechanical precision, energetic burst, elegant reveal, rhythmic pulse)

Example: "Canva = Creative tool brand → Playful energy + organic growth → Simultaneous entrance with pulse"

See Animation Philosophy section below for detailed framework.

2. Analyze Logo Structure (30 seconds - MANDATORY!)

Before creating animation, understand what you're working with:

# For SVG logos - identify elements
python scripts/extract_svg_elements.py logo.svg --list

Quick decision tree:

Logo has text?
  ├─ YES → Read references/text_animation_guide.md FIRST
  └─ NO  → Continue with standard workflow

Multiple elements (icon + text)?
  ├─ YES → Extract separately, decide timing (simultaneous vs staggered)
  └─ NO  → Animate as single unit

SVG or PNG?
  ├─ SVG → Can extract elements cleanly
  └─ PNG → Limited to single-logo animations

3. Prepare Assets

# Single logo (simple animation)
python scripts/prepare_logo.py logo.png --max-size 500 --optimize
# Creates: logo_optimized.png (30-50KB) + logo_base64.txt

# Multi-element logo (extract FIRST, then convert)
python scripts/extract_svg_elements.py logo.svg --output-dir ./elements/
python scripts/prepare_logo.py elements/icon.svg --max-size 200
python scripts/prepare_logo.py elements/text.svg --max-size 250

Size guidelines:

• Full logo (single): 500-600px
• Icon elements: 100-200px
• Text elements: 200-300px

4. Create Lottie JSON Animation

Use EXTERNAL references during development:

{
  "v": "5.7.4",
  "fr": 60,
  "ip": 0,
  "op": 180,
  "w": 800,
  "h": 800,
  "layers": [{
    "ind": 1,
    "ty": 2,
    "nm": "Logo",
    "refId": "logo_image",
    "ks": {
      "o": {
        "a": 1,
        "k": [
          {"t": 0, "s": [0], "e": [100], "i": {"x": [0.42], "y": [1]}, "o": {"x": [0.58], "y": [0]}},
          {"t": 60, "s": [100]}
        ]
      }
    }
  }],
  "assets": [{"id": "logo_image", "w": 512, "h": 512, "p": "logo_optimized.png", "e": 0}]
}

Critical: Use "e": 0 (external reference) during development to avoid Cairo memory errors.

See Animation Patterns below for common effects, or references/detailed_examples.md for full code examples.

5. Validate

# Check Lottie structure (warns about large embedded assets)
python scripts/validate_lottie.py logo_animation.json

# Check loop quality (if creating looping animation)
python scripts/validate_loop.py logo_animation.json

6. Render

# RECOMMENDED: Preview first (renders only first N frames) - saves time!
python scripts/render_lottie.py logo_animation.json preview.gif --preview-frames 60

# Alternative: Test render mode (200x200, 15fps with confirmation prompt)
python scripts/render_lottie.py logo_animation.json logo.gif --test-render

# If preview looks good → Render full animation
python scripts/render_lottie.py logo_animation.json logo.gif

# Optional: MP4 export (better compression than GIF)
python scripts/render_lottie.py logo_animation.json logo.mp4

# Optional: Batch export all formats
python scripts/batch_export.py logo_animation.json ./output gif,mp4,json

Important notes:

• Assets are resolved relative to the Lottie JSON file location (not current working directory)
• Asset validation runs automatically before rendering
• Output verification detects blank/corrupted files
• Use --preview-frames N to render only first N frames for quick validation

7. Optional: Embed for Distribution

After successful rendering, optionally convert to embedded base64 for standalone distribution:

// Replace external reference with base64 from logo_base64.txt
"assets": [{"id": "logo_image", "p": "data:image/png;base64,...", "e": 1}]

Note: Keep external version for future edits/rendering!

Animation Philosophy

The Two-Phase Approach

Phase 1: Define Philosophy (think before implementing)

1. What personality does this brand have?
2. What emotion should the animation evoke?
3. What motion metaphor fits?

Phase 2: Express Through Technical Choices

• Choose properties that express philosophy (position/scale/rotation/opacity)
• Select easing that matches personality (ease-out=confident, bounce=playful)
• Set timing that aligns with emotion (fast=energetic, slow=elegant)

Philosophy Examples

"Confident Professionalism"

• Philosophy: Trustworthy, established, competent
• Expression: Slow ease-out fade (0→100% opacity) + gentle scale (95%→100%)
• Timing: 2s duration, no overshoot
• Example: references/real-world-examples/slack-hover-pinch.json

"Playful Energy"

• Philosophy: Fun, approachable, memorable
• Expression: Bounce entrance with overshoot
• Timing: 1s duration, back easing (0.6/-0.28)
• Example: references/real-world-examples/reddit-hover-pinch.json

"Audio/Speech Brand"

• Philosophy: Sound, rhythm, waveforms, dynamic
• Expression: Vertical waveform with dense keyframes (30-45 keyframes, 60fps)
• Timing: 3s loop, organic easing (0.25/0.75)
• Critical: See "Organic/Continuous Motion" in Motion Types section below

More examples in references/preset_library.md and references/animation_theory.md.

Motion Type Quick Reference

Choose motion type based on brand personality:

Static/Corporate Motion

Professional brands (B2B, finance, legal)

Parameters:

• Keyframes: 8-12 (sparse, deliberate)
• Easing: 0.42/0.58 (standard ease-in-out)
• FPS: 30
• Duration: 1.5-2s

Use for: Corporate logos, B2B brands, professional presentations

Organic/Continuous Motion

Audio, music, speech AI, nature brands

Parameters:

• Keyframes: 25-45 ← Critical for smoothness
• Easing: 0.25/0.75 (softer, more organic)
• FPS: 60 ← Essential for fluidity
• Duration: 3s

Use for: Audio apps, music platforms, speech AI, organic products

Example: Vertical bar waveform pattern in references/detailed_examples.md

Bold/Attention-Grabbing

Startups, social media, marketing

Parameters:

• Keyframes: 15-25
• Easing: 0.34/1.56 (playful bounce) or 0.6/-0.28 (back overshoot)
• FPS: 60
• Duration: 0.8-1.5s

Use for: Startup logos, social media intros, marketing campaigns

Cinematic/Complex

Premium brands, film production

Parameters:

• Keyframes: 50-120
• Ea