/wiggle-claude-skill

name: wiggle
description: Create animated logo files (Lottie JSON, GIF, MP4) from static logo images. This skill should be used when users provide a logo image (PNG/SVG/JPG) and request any kind of logo animation, motion graphics, animated logo effect, waveform animation, bouncing logo, rotating logo, pulsing logo, wiggling logo, or ask to "animate my logo" or "make my logo move". Outputs standalone animation files (not React/HTML artifacts). Generates Lottie JSON with automatic GIF/MP4 rendering, perfect loop validation, and professional motion design patterns.
license: Complete terms in LICENSE.txt

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](#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](#animation-pattern-quick-reference) below for common effects, or [references/detailed_examples.md](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