Introduction

Stagger is an AI loading animation generator for React developers. Describe what you need in plain English, and Stagger generates a self-contained TSX component using Framer Motion and Tailwind CSS.

Every component is:

  • A single standalone TSX file
  • Built with motion/react (Framer Motion) and Tailwind CSS
  • Fully typed with TypeScript
  • Accessible (respects prefers-reduced-motion)
  • Under 100 lines, copy-paste ready

Three ways to use Stagger

  1. Generate: describe the animation you want, preview it live, copy the code
  2. Library: browse 50 curated animations across 10 categories, click to copy or remix
  3. Brand kits: define your brand colors so every generated animation matches your app