Image
Get started

From the creators of Motion

You and your agent.
Designing together.

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
0%20%40%60%80%100%
opacity
transform
scale
color
EaseSpring
Duration
0.8s
Bounce
0.6
> 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

W390×H844
> 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.

localhost:3000
Adapting for viewport…
Generating variants…
Tasks
Adapt for iPhone
Generate variants
Rewrite hero copy
section.featuresThree distinct variants please
Drafting three directions and generating each.
Working…
Reply in this task…
> From the creators of Motion

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
> Install

Edit precisely.
Apply intelligently.
Ship faster.

One-time purchase. All future updates included.

Get CSS StudioLearn more about CSS Studio