Summary

This project offers a React-based control surface and Lottie player designed for generating production-ready Lottie animations using Large Language Models like Claude Code or Codex. It streamlines the animation creation process by allowing users to translate text prompts into playable Lottie files, providing live preview and rapid iteration capabilities.

How It Works

The system utilizes LLMs to generate Lottie animation JSON (public/lottie.json) from text descriptions via a "text-to-lottie" skill. A React application, built with shadcn/ui and TypeScript, serves as the control surface. Animations are rendered in real-time using a Skia CanvasKit (Skottie) player, with the development server providing hot-reloading for immediate visual feedback as the JSON file updates.

Quick Start & Requirements

Installation can be done via npx skills add diffusionstudio/lottie. Alternatively, manual setup involves running npm install (which copies the necessary CanvasKit WASM binary) followed by npm run dev. Prerequisites include Node.js and an LLM agent capable of supporting skills. The project requires the CanvasKit WASM binary, which is automatically copied to the public/ directory during the postinstall script.

Highlighted Details

• Generates "production-ready Lottie animations" directly from text prompts.
• Features a live, full-screen Lottie player powered by Skia CanvasKit (Skottie).
• Integrates with LLMs (Claude Code/Codex) for AI-driven animation creation.
• Includes hot-reloading for rapid iteration and previewing changes.

Maintenance & Community

No specific details regarding contributors, sponsorships, community channels (like Discord/Slack), or roadmaps were found in the provided README snippet.

Licensing & Compatibility

The license type and compatibility notes for commercial use or closed-source linking are not specified in the provided README snippet.

Limitations & Caveats

The CanvasKit WASM binary is not committed to the repository and must be manually copied using npm install or node scripts/copy-canvaskit.mjs. The project's animation generation capability is dependent on the availability and performance of external LLM agents.