Introducing Motion UI

All teams want their website to feel like the products they admire. Motion that's smooth, responsive, and never overbearing. The kind of motion that conveys a feeling without a user reading a word of copy.

Wanting and doing are two different things. Animation is tough for humans and agents alike to get right, and in the face of a deadlines it's often the first thing that gets cut.

Animation can even be risky. Get it wrong, and the whole site feels cheaper, or performance can tank.

This is where Motion UI comes in.

Motion UI is a library of animated components for React, easily adaptable to your design via the Motion+ MCP, our one-click Adapt with AI prompt builder, or via shadcn for tokenless installation.

Additionally, every section carries a MotionScore performance grade so you can assess its render cost at a glance.

Your design system, not ours

Motion UI is deliberately white-label. The whole kit is authored against shadcn's semantic token vocabulary: bg-background, text-muted-foreground, --primary and so on. No hardcoded hex values, no bundled fonts, no parallel token system to maintain.

That has a lovely consequence. If you already have a shadcn project, Motion UI inherits your brand the moment it lands. Your colours, your corners, your fonts. We test every section against a stock shadcn theme, in light and dark, to make sure it installs with zero configuration.

Don't use shadcn or Tailwind? No worries - the Adapt for AI button builds a prompt for your agent, instructing it how to install and adapt the component to your existing design. Or, the Motion AI Kit lets your agent source Motion UI code directly via the MCP.

Performance first

Many component libraries leave performance as an afterthought, or perhaps even a neverthought. If it runs on the author's laptop then that's that.

MotionScore is our S-F grading methodology for an animation's impact on the browser's render pipeline.

Compositor-only animations get an S, whereas paint-triggering animations get a C, and so on. Every Motion UI section and component is checked with MotionScore for Agents.

Just like our Motion Examples catalogue, we're never going to ship D or F animations, or infinitely-running animations without viewport-detection guards.

With visible MotionScore grades, we're incentivised to keep scores up, while you know at a glance which components will perform best and which should be used judiciously according to your audience.

Theming feeling

Here's the part I'm most excited about. Design systems are commonly used for colour, layout and type, but it feels like it's less common to use them for Motion feel.

Motion UI ships with a motion.theme.ts. Here, five transitions are named by purpose: snap for instant feedback, ui for menus and reveals, gentle for large surfaces, lively for celebratory moments, and ambient for continuous background motion.

By default, each is a physics-backed spring for smooth interruptions, but you're able to tweak each, replace with your own springs, or swap for a traditional time-based easing curve.

Every Motion UI animation is based on this file. Edit the file and every section you've installed retunes together: stiffer and snappier for a productivity tool, softer and more editorial for a content site. One file, and your whole site changes how it feels.

It also gives you a proper reduced-motion story. Set reducedMotion: "calm" and transforms disappear while opacity fades remain, respecting the visitor without flattening the design.

How do I get Motion UI?

Motion UI is included in Motion+, our one-time fee, lifetime membership. If you're already a member, you have it right now: browse the catalogue at motion.dev/ui and add your first section via Motion AI Kit, the Adapt with AI button, or via the shadcn CLI.

npx shadcn@latest add @motion/hero-parallax-layers

The install guide walks through the registry setup in a few minutes. Sections compose Motion+ components like Carousel and AnimateNumber, so the same membership covers the whole stack.

This is the biggest thing we've ever added to Motion+, and it's a living catalogue: new sections and categories will keep landing, and your membership covers those too.

Let us know what you ship with it.