CSS Studio. You and your agent. Designing together.

2 min read Original article ↗

From the creators of Motion

A design tool with an AI twist. Edit with sliders. Iterate with variants. Adapt to mobile in one click. Your existing AI agent writes it all, directly to your codebase.

> CSS animations

Keyframes. Springs. Scroll-linked.

A real timeline editor, physics-driven springs, and scroll-linked animations. Applied as hardware accelerated CSS animations.

Learn about animations

0.42sbounce-inDuration0.6s

> Variants

One click.
Multiple directions.

Select an element and click to generate variants. Each alternative will push design or copy in a different direction, grounded in your existing design system.

  1. Generate Create a handful of alternatives from one prompt.
  2. Iterate Add notes or generate again from a favourite.
  3. Accept Commit the winner, discard the rest.

Learn about variants

> Responsive design

Every screen. Every breakpoint.

Jump between presets or dial in any width × height. Every change writes to the right breakpoint, or ask the agent to adapt the layout to mobile with one click.

> Tasks

Work in parallel.

Every chat, set of edits, variant generation, or mobile adaptation, is a separate task handled by its own background subagent. Each task can be reverted independently, and no long-running task blocks your workflow.

Tasks

Adapt for iPhone

Generate variants

Rewrite hero copy

section.featuresThree distinct variants please

Drafting three directions and generating each.

Working…

We know interface design.

Motion is trusted by Framer and Figma to power animations in 100,000s of websites.

  • 40M+Weekly npm downloads
  • 30k+GitHub stars