lottie-animator

┌──────────────────┐          ┌──────────────────┐          ┌──────────────────┐
│                  │          │                  │          │    ✨    ✨      │
│    📄 SVG        │    →     │   🤖 Claude +    │    →     │   🚀             │
│    (static)      │          │   Lottie Skill   │          │  🔥 (animated!)  │
│                  │          │                  │          │  💨              │
└──────────────────┘          └──────────────────┘          └──────────────────┘
     rocket.svg                  "Animate this!"              rocket-animated.json

# Open the live preview page
open assets/preview-embedded.html

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2">
  <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
  <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
  <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
  <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
</svg>

You: Create a fun rocket launch animation - bounce before launch,
     add flames, smoke particles, and twinkling stars!

┌────────────────────────────────────────────────────────────────┐
│  ✅ Motion Philosophy: Playful + Energetic                     │
│  ✅ Animation: 60fps, 90 frames (1.5s loop)                    │
│  ✅ Layers generated:                                          │
│     • Rocket body with bounce entrance (bezier overshoot)      │
│     • Gradient flame with scale flicker                        │
│     • 2x smoke particles (fade + expand + drift)               │
│     • 3x stars (pop-in + rotate + twinkle)                     │
│  ✅ Output: rocket-animated.json (4.2KB)                       │
└────────────────────────────────────────────────────────────────┘

Frame 0-15:   🚀 Rocket bounces in (scale 0→115→100 with overshoot)
Frame 15-25:  🔥 Flames ignite, anticipation wobble
Frame 25-90:  ⬆️  LAUNCH! Rocket flies up with easing
Frame 25-75:  💨 Smoke particles expand and fade
Frame 50-90:  ✨ Stars pop in, rotate, and twinkle

# Add the marketplace
/plugin marketplace add obeskay/lottie-animator-skill

# Install the plugin
/plugin install lottie-animator

# Clone the repository
git clone https://github.com/obeskay/lottie-animator-skill.git

# Use with Claude Code
claude --plugin-dir ./lottie-animator-skill

"Animate this SVG logo"
"Create a Lottie animation"
"Generate motion graphics for my icon"
"Make a bounce/wiggle/pulse effect"
"Create an entrance/loading/loop animation"

Frame-by-Frame Walk Cycle:
┌─────┬─────┬─────┬─────┬─────┬─────┐
│Pose1│Pose2│Pose3│Pose4│Pose5│Pose6│ ← Each pose is a separate layer
├─────┼─────┼─────┼─────┼─────┼─────┤
│ 0-6 │6-12 │12-18│18-24│24-30│30-36│ ← ip/op frame ranges
└─────┴─────┴─────┴─────┴─────┴─────┘

Layers (7):
├── Stars ×3 (pop-in + rotate + twinkle)
├── Smoke ×2 (fade + expand + drift)
├── Flame (gradient + scale flicker)
└── Rocket Body (bounce entrance → launch)

Techniques:
• Scale overshoot (bezier 0.34, 1.56) for bounce
• Staggered star timing (frame 50, 55, 60)
• Gradient fill for realistic flame
• Ease-out curve for launch deceleration

Layers (5):
├── Shadow (parent for all poses, scale pulse)
├── Pose 1 - Contact Left  (ip: 0,  op: 9)
├── Pose 2 - Passing Left  (ip: 9,  op: 18)
├── Pose 3 - Contact Right (ip: 18, op: 27)
└── Pose 4 - Passing Right (ip: 27, op: 36)

Techniques:
• Frame-by-frame (4 poses × 9 frames = 36 total)
• Shadow as parent layer (moves all children)
• Stroke + fill for outline style
• 60fps, 0.6s seamless loop

{
  "s": {
    "a": 1,
    "k": [
      {"t": 0, "s": [0, 0], "o": {"x": [0.34], "y": [1.56]}, "i": {"x": [0.64], "y": [1]}},
      {"t": 20, "s": [110, 110]},
      {"t": 35, "s": [100, 100]}
    ]
  }
}

npm install lottie-react

import Lottie from 'lottie-react';
import rocketAnimation from './rocket-launch.json';

export default function LaunchButton() {
  return (
    <Lottie
      animationData={rocketAnimation}
      loop={false}
      style={{ width: 200, height: 200 }}
    />
  );
}

npm install vue3-lottie

<template>
  <Vue3Lottie :animationData="rocket" :loop="true" />
</template>

<script setup>
import { Vue3Lottie } from 'vue3-lottie'
import rocket from './rocket-launch.json'
</script>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest"></script>

<lottie-player
  src="rocket-launch.json"
  background="transparent"
  speed="1"
  loop
  autoplay>
</lottie-player>

npm install lottie-react-native

import LottieView from 'lottie-react-native';

export default function Animation() {
  return (
    <LottieView
      source={require('./rocket-launch.json')}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

# Fork and clone
git clone https://github.com/YOUR_USERNAME/lottie-animator-skill.git

# Create feature branch
git checkout -b feature/amazing-feature

# Commit and push
git commit -m 'Add amazing feature'
git push origin feature/amazing-feature

# Open PR

"Animate my logo with a playful bounce"