Real components animate with your exact token values as you edit.
The live preview is the center panel of the token editor. It shows real React components animating with the exact values from the property sliders - updating on every change, replaying from initial state each time. It bridges the gap between a number on a slider and the physical feel of the animation.
| What | How it works | Why it matters |
|---|---|---|
| Button | Most common interaction surface with frequent press + hover state transitions. | Checks small-scale response and catches abrupt timing immediately. |
| Card | Heavier element that should feel grounded and natural during enter motion. | Validates mid-size component timing and easing quality. |
| Modal | Large surface; too-fast values feel jarring, too-slow values feel blocked. | Confirms large-scale transitions still feel intentional. |
| Toast | Ephemeral feedback that must read fast and not distract. | Validates short-lived UI and perceived responsiveness. |
| List item | Used as repeated elements where staggered flow and rhythm are visible. | Exposes sequence issues and spring/timing mismatch. |
When a slider value changes, a counter increments. This counter is used as the React key prop on the preview wrapper component. React sees the key change, unmounts the old component completely, and mounts a fresh one - triggering Framer Motion's initial state from scratch. This approach was chosen because: