Quickstart

Generate your first loading animation in under 30 seconds.

1. Sign up

Create a free account at stagger.dev/sign-up. Free accounts get 10 generations per month.

2. Write a prompt

Go to the Generate page. Describe the animation you want:

• “three dots bouncing with stagger delay”
• “skeleton loader for a chat message”
• “pulsing ring for file upload progress”
• “shimmer effect sweeping left to right”

3. Preview and iterate

Click Generate. In 3-8 seconds, you will see a live preview. Toggle between dark and light backgrounds. Click Regenerate for a different variation.

4. Copy the code

Click “Copy TSX” to copy the component to your clipboard. Paste it into your React project. The component has zero dependencies beyond react and motion/react.

5. Use in your app

Every component accepts className, color, size, and speed props for customization.