Quick start with Motion for AI

Motion for AI is a suite of powerful development tools that make animation easier than ever.

• Generate CSS spring and bounce easing curves

• Visualise spring and cubic bezier curves

• Vibe code with Framer, Figma and v0

• Provide your LLM full Motion documentation

• Advanced Motion rule sets

In this quick start guide we'll take a brief overview of all of these.

Generate CSS via LLM

By installing the Motion MCP server, your LLM gains the ability to generate CSS linear() easing curves to create springs or other custom easing curves.

Generate a CSS spring that's quite bouncy

600ms linear(0, 0.0121 /* ... */)

Learn more about CSS generation

Visualise springs and easing curves

You can visualise springs and easing curves by selecting a spring/easing definition and asking your LLM to "visualise" it.

Or by giving a prompt like "visualise a stiff spring" or "visualise the CSS ease-out curve".

This is useful for both humans and models with vision to better understand animation settings.

Learn more about visualisation

Documentation

Load the full Motion documentation into your LLM either via our Motion MCP server or dedicated llms.motion.dev website.

Learn more about documentation for LLMs

Vibe coding

Vibe coding is a fun no-code or code-lite way to hack on Motion animations.

Between Framer's Workshop, Figma Make, and v0 by Vercel, there are a number of ways to get into it for both designer and developer-minded people.

Learn more about vibe coding with Motion

Rules

Turn your LLM into an animation expert with the Motion+ rules.

• Best practises for when and how to add will-change.

• Coding styles to improve per-frame performance.

• When to animate transform vs independent transforms.

Learn more about rules