Introduction

What Motif is, and how tokens and recipes fit together.

What Motif is

Motif is a motion design system for React apps. You pick a motion personality with 3 knobs. A kit of 11 real interactions updates live. Then you export tokens and code that you own: no runtime package, no lock-in.

It works like shadcn/ui, but for motion. The output is plain files in your repo. You can read them, change them, and check them in.

The model

Motif has 4 layers. Each one comes from the layer before it.

1. Knobs. Energy, Bounce, and Distance, each from 0 to 1. A preset is a saved set of knob positions.
2. Tokens. The knobs generate every motion value: 3 springs, 4 durations, 3 easings, 3 distances, 2 scales, and the stagger. See Tokens.
3. Recipes. 11 named interactions (press, toggle, lift, overlay, notify, menu, tooltip, drawer, reveal, switch, expand). A recipe refers to tokens only. It never holds a raw number, except 0 and 1. See Interactions.
4. Exports. JSON, CSS variables, Motion variants, and MOTION.md, a rules file for AI coding agents. See Export.

Because recipes refer to tokens, one change to a knob changes every interaction the same way. That is how an app's motion stays consistent.

This site is the demo

This site runs on its own tokens. Open the preset menu in the header and pick Calm, then Playful. Every hover, button press, menu, and page transition on the site changes with it.

Where to go next

• Playground: tune the knobs and export.
• Knobs: what each knob controls.
• AI rules: give your coding agent the rules, so new components move the same way.