Lottie Animator

Quick start

Install the skill, then ask Claude Code for motion in plain language:

/plugin marketplace add obeskay/lottie-animator-skill
/plugin install lottie-animator

Animate this SVG with a premium entrance and a seamless loop.
Keep the path clean, use violet and amber accents, and export Lottie JSON.

Preview everything locally:

open assets/preview-embedded.html

The workflow

The skill keeps the process focused: understand the vector, choose one motion idea, stage the hero, then inspect the loop before shipping it.

Examples

Demo	What it shows
rocket-animated.json	Bounce, scale, particles
chimp-walk-pro.json	Frame-by-frame character motion
panda-loader.json	A friendly loading loop
morphing-star.json	Scale, rotation, orbit, easing

Validate every example with the included smoke test:

python3 scripts/validate_lottie.py

The check covers JSON structure, timing, canvas dimensions, and layer ranges. Then open the result and inspect the first, middle, and final loop states.

Install

Claude Code plugin

git clone https://github.com/obeskay/lottie-animator-skill.git
claude --plugin-dir ./lottie-animator-skill

Use the skill directly

Copy skills/lottie-animator/ into your skills directory. The detailed references live beside the skill:

• Lottie structure
• SVG → Lottie
• Motion personality
• Professional techniques

How it works

The skill uses a compact motion brief before touching keyframes:

Emotion      → what should this feel like?
Personality  → playful, premium, corporate, or energetic
Hero         → position, scale, rotation, or opacity
Timing       → entrance, settle, loop
Details      → secondary accents that support the hero

It supports draw-on paths, morphing, trim paths, loaders, staggered entrances, character rigs, frame-by-frame cycles, and GSAP/Lottie integration.

Design language

The project uses a focused visual system:

Obsidian	Electric violet	Amber
#090D16	#A855F7	#F59E0B

Dark surfaces keep the work legible. Violet carries the hero motion. Amber marks transitions, timing, and energy.

Contributing

Keep examples small, readable, and previewable. Run the validator before opening a pull request.

See CONTRIBUTING.md.

License

MIT — see LICENSE.