Stagger
DocsSign inGet started

Custom motion graphics
for

Describe what you need. Get production-ready Motion components tailored to your brand. Loaders, icons, hero effects, and more.

Start generating freeBrowse 100+ components
Loaders
Icons
AaHero BG
HelloHero Text

Not templates. Custom components built for you.

Every generation is unique to your prompt and brand. Not a theme selector. Not a component library you configure. Actual custom code, every time.

Brand-matched

Upload your brand kit. Every generation uses your colors, your style, your vibe. No manual theming.

Production ready

Accessible by default. Reduced motion support. TypeScript. Under 150 lines. No runtime dependency on Stagger.

Works everywhere

Export as React, Vue, Svelte, Angular, vanilla JS, or pure CSS. One prompt, six frameworks.

Prompt to component in seconds

1

Describe

Tell us what you need. “Upload status icon with success and error states” or “aurora background for my landing page.”

2

Preview

See it live with interactive controls. Toggle icon states, switch status modes, test on different backgrounds.

3

Ship

Copy the TSX, paste into your project. Zero lock-in, zero runtime dependency. It's your code.

100+ components, ready to use

Every component meets production standards. Accessible, typed, branded. Use as-is or remix with a prompt.

Loaders

51

Skeletons, spinners, dots, progress bars, shimmer effects, AI states, chat indicators

Skeleton loaders for dashboardsTyping indicators for chatUpload progress rings

Icons

24

State-toggle icons and status icons with full state machine animations

Menu/close toggleUpload status with success/errorPlay/pause for media

Hero Backgrounds

15

Ambient animated backgrounds for landing pages and hero sections

Gradient mesh for SaaSStarfield for gamingAurora glow for creative agencies

Hero Text

11

Animated text effects for headlines and hero copy

Typewriter for dev portfoliosBlur reveal for launchesBounce-in for events
Browse the full library

Built for real products

SaaS dashboards

Skeleton loaders that match your data layout. Status icons for async operations. Loading states that feel intentional.

Marketing sites

Hero backgrounds that set the mood. Text effects that grab attention. All brand-matched to your colors.

Developer tools

Terminal-style typewriters. Grid pulse backgrounds. Toggle icons for every settings panel.

Mobile apps

Lightweight animations under 100 lines. Reduced motion support built in. Accessible by default.

Generate from your IDE

Use the Stagger MCP server with Claude, Cursor, or any MCP-compatible tool. Generate loaders, icons, and hero effects without leaving your editor.

> generate a save-to-cloud status icon
> with my brand colors
Generated: CloudSaveStatusIcon (4 states)
idle / loading / success / error

Simple pricing

Start free. Upgrade when you need more generations and brand kits.

Free

$0forever
  • 10 generations per month
  • 1 brand kit
  • Full library access
  • Copy-paste TSX output
Get started

Pro

$19/mo
  • 1,000 generations per month
  • 3 brand kits
  • MCP access
  • Priority generation
Start Pro

Studio

$49/mo
  • 3,000 generations per month
  • Unlimited brand kits
  • API access (500/mo)
  • Dedicated support
Start Studio