Generate CSS springs and easings

Motion for AI makes it possible for your LLM to generate CSS springs and other easing functions using Motion itself, directly in your code editor.

Make a CSS spring curve, snappy but bouncy

// LLM receives:
500ms linear(0, 0.009, 0.035 2.1%, /* ... */)

The linear() easing function can create all kinds of easing curves that were previously impossible with CSS, like spring and bounce effects.

The downside to linear() is its maintainability. With Motion, it's usually easy to write and understand this kind of animation:

{ type: "spring", bounce: 0.2 }

However, with CSS and linear(), you need to visit a generation tool to output a property that looks like this:

linear(
  0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
  1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
  1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
  0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
)

Tweaking this animation involves bouncing back and forth between your code editor and the curve generator tool. But Motion allows you to do this directly in your editor.

Install

CSS easing generation is provided via Motion for AI's MCP server. Automatically add to Cursor:

Or add the following to your editor's MCP JSON settings:

{
  "mcpServers": {
    "motion": {
      "command": "npx",
      "args": ["motion-ai"]
    }
  }
}

The exact process differs by editor, but here are the MCP docs for popular apps:

• VS Code

• Cursor

• Windsurf

• Claude Desktop

• Claude Code

Usage

Once installed, you can now give your LLM commands like "generate a CSS spring that is very bouncy" and it'll either reply with a linear() easing curve or insert it directly into your code.

Springs

For CSS generation, Motion's springs are defined with two parameters, visualDuration and bounce.

Ask the LLM to generate a spring that "lasts 0.2 seconds and is very bouncy" will generate a CSS animation that appears to take 0.2 seconds to reach its target value, with oscillation taking place after this duration. This makes it easy to compose the spring animation with other time-based animations, and to tweak the bounciness without having to change the duration of the spring to compensate.

Motion+ users can also visualise the spring to iterate to their liking.

Bounce

Not to be confused with the bounciness of a spring, a bounce easing function can make something look like it's bouncing against a hard surface.

Ask to "generate a bounce easing curve" or similar. It will default to longer durations, like 1 second, as this makes for more realistic gravity-like motion.

You can ask it to feel heavier or lighter and it will adjust the time accordingly.