text-to-lottie

Create, edit, and verify Lottie JSON animations for the Skia Skottie player.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill text-to-lottie-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: text-to-lottie
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/text-to-lottie
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill text-to-lottie-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Hand-authoring Lottie/Bodymovin JSON animations is error-prone: invalid keyframes, missing fonts, wrong easing, and renderer incompatibilities produce blank canvases or broken motion. This Skill turns natural-language prompts into renderable, verified Lottie scenes for the local Skia Skottie player. ## Core Features & Use Cases - Prompt-to-Lottie authoring: Generate logo animations, kinetic typography, lower thirds, loaders, icons, UI microinteractions, diagrams, data/stat charts, product promos, and camera/scene motion as valid Lottie JSON. - Renderer-safe verification: Validate JSON, pin exact frames with ?frame=N, and inspect scenes in the official Skottie player to catch blank canvases, missing assets, bad easing, and SVG artifacts. - Design and motion quality gates: Apply design-taste and motion-taste references covering composition, typography, color restraint, easing anchors, chapterization, and transition grammar. - Use Case: Ask for a premium KPI stat card with three metrics; the Skill authors lottie.json with slots and controls.json, ships the required font, and verifies frames 0, midpoint, and op - 1 render cleanly in Skottie. ## Quick Start Create a Lottie animation of our logo with a clean draw-on reveal and verify it in the Skottie player.

Frequently Asked Questions about text-to-lottie

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Lottie animation from a text prompt?

Describe the scene, style, and output format in natural language. The Skill routes the prompt to a recipe reference, authors the Lottie JSON under public/projects/<project>/<scene-N>/lottie.json, and verifies it renders in the Skia Skottie player.

How do I animate an SVG logo as Lottie?

Provide the SVG file and request the animation. The Skill preserves the viewBox, normalizes styling, handles fill rules and intersections, converts the artwork into Lottie shape layers, and verifies the settled frames against the source artwork in Skottie.

Why does my Lottie text render blank in Skottie?

Blank text usually means the font is missing or mismatched. Place a .ttf, .otf, or .ttc next to lottie.json, declare it in fonts.list with fFamily matching the font's embedded family name, and ensure text slots use "a": 1 with a keyframed text document.

Does Skottie support Lottie expressions and motion blur?

No. Expressions, blur, bloom, glass, true 3D, and displacement are renderer-risky in Skottie. The Skill bakes counters, particles, and orbit math into keyframes and approximates effects with vector shapes, stacked fills, or baked raster assets.

When should a Lottie scene use a transparent background?

Logos, icons, loaders, overlays, lower thirds, and SVG-derived assets default to transparent output. Full-frame standalone compositions include a visible background layer with a bgColor slot and a matching controls.json entry.