README

Lottie Editor

A fully-featured Lottie animation editor and player built with React, TypeScript, Tailwind CSS, and shadcn/ui.

🚀 Quick Start

The app is currently running at: http://127.0.0.1:3001

Build and Serve

bash

npm install
npm run build
npx http-server dist -p 3001

Development (requires fixing file watchers)

bash

npm run dev

✨ Features

Visual Canvas Editor - Draw and edit shapes with drag & drop
Tool Palette - Rectangle, Circle, Line, Text, Pen, Star, Heart, Triangle, Hexagon
Properties Panel - Edit position, size, colors, opacity, rotation, scale
Timeline & Keyframes - Create animations with frame-by-frame control
Animation Player - Preview with playback controls and speed adjustment
Import/Export - 100% Lottie JSON format compatible
Pre-made Examples - Basic Shapes, Loading Spinner, Flying Bird, Talking Head

📖 Usage Guide

1. Load an Example

Click any example button in the header to load a pre-made animation:

Basic Shapes - Rotating square, bouncing circle, scaling triangle
Loading Spinner - Animated rotating loader
Flying Bird - Bird with flapping wings animation
Talking Head - Animated face with blinking eyes and moving mouth

2. Create Shapes

Select a tool from the left palette
Click and drag on canvas to draw
Or drag a shape directly from palette to canvas

3. Edit Properties

Click to select any shape
Use the right properties panel to adjust:

- Position (X, Y) - Size (Width, Height, Radius) - Colors (Fill, Stroke) - Stroke Width - Opacity - Rotation - Scale

4. Add Animations

Use the timeline at the bottom
Click on frames to add keyframes for any property
Expand shape tracks to see all animatable properties
Click keyframe dots to add/remove keyframes

5. Preview & Export

Switch to Preview tab to see the final Lottie animation
Use playback controls (Play, Pause, Reset)
Adjust playback speed
Click Export to download as Lottie JSON

🎨 Animatable Properties

All shapes support animation for:

Position (x, y)
Rotation
Scale (x, y)
Opacity
Size properties (width, height, radius)

🔧 Tech Stack

React 18 + TypeScript
Vite - Lightning fast build tool
Tailwind CSS - Utility-first styling
shadcn/ui - Beautiful UI components
lottie-web - Lottie animation playback
@dnd-kit - Modern drag and drop
lucide-react - Icon library

📁 Project Structure

shell

src/
├── components/
│   ├── editor/
│   │   ├── Canvas.tsx           # Main drawing canvas
│   │   ├── Editor.tsx           # Main editor layout
│   │   ├── PropertiesPanel.tsx  # Shape property editor
│   │   ├── Timeline.tsx         # Animation timeline
│   │   └── ToolPalette.tsx      # Drawing tools
│   ├── lottie/
│   │   └── LottiePlayer.tsx     # Lottie playback component
│   └── ui/                      # shadcn/ui components
├── data/
│   └── examples/                # Pre-made animations
├── lib/
│   ├── lottieConverter.ts       # Convert to/from Lottie format
│   └── utils.ts
└── types/
    └── lottie.ts                # Lottie format TypeScript types

🎭 Example Animations

The editor includes 4 pre-made Lottie-compatible animations:

basicShapes.json - Demonstrates rotation, bounce, and scale animations

loadingSpinner.json - 8-bar rotating spinner with opacity fade

flyingBird.json - Bird with wing flapping and movement across screen

talkingHead.json - Animated character with blinking and mouth movement

💾 Lottie Compatibility

This editor generates 100% standard Lottie JSON that works with:

LottieFiles - Upload and share
After Effects - Import via Bodymovin plugin
Mobile Apps - iOS (Lottie-iOS) and Android (Lottie-Android)
Web - lottie-web, @lottiefiles/react-lottie-player
React Native - lottie-react-native

🐛 Known Issues

File watcher limit error in dev mode (fixed by serving built files)
Some complex SVG paths may not convert perfectly to Lottie format

📝 License

MIT