Motion React components
Every component here is animated with Motion (motion/react) from one small set of springs, curves and durations, so they feel related when you put them side by side.
The values below are read from motion.ts, the file the shadcn CLI adds to your project with your first component.
79 of the 109 components in Eased UI use Motion; the 10 here are ones where the movement is what you notice.
The springs and timings
| Name | Value | Used for |
|---|---|---|
| snappy | Spring, stiffness 520, damping 38 | Presses, toggles, indicators, text swaps and rolling digits |
| smooth | Spring, 400ms visual duration, no bounce | Height and layout changes and panels, where an overshoot would look wrong |
| bouncy | Spring, stiffness 400, damping 26 | Shape morphs and playful reveals only, never an exit |
| enter | 200ms, cubic-bezier(0.16, 1, 0.3, 1) | Things that appear |
| exit | 150ms, cubic-bezier(0.7, 0, 0.84, 0) | Things that leave, in 75% of the enter time, easing in |
| reducedFade | 100ms, opacity only | What movement becomes when the visitor asks for reduced motion |
10 components, running
Tabular digits that roll in the direction of change, formatted with Intl.NumberFormat for any locale.
npx shadcn add https://eased.dev/r/number-roll.jsonA pill that rises after a destructive action with a draining countdown ring.
npx shadcn add https://eased.dev/r/undo-pill.jsonChange a label, status or short value with y + blur, and spring the width to fit, so neighbours glide instead of jumping.
npx shadcn add https://eased.dev/r/text-swap.jsonA single-choice segmented control whose thumb glides to the selection on a spring.
npx shadcn add https://eased.dev/r/segmented.jsonA heart that pops to 1.25 with a ring and eight sparks when liked, deflates quietly when unliked, and rolls its count.
npx shadcn add https://eased.dev/r/like-button.jsonA file tree whose folders open on a height spring as the chevron turns, both interruptible.
npx shadcn add https://eased.dev/r/tree.jsonAn area chart that draws in once and morphs to new data from the shape on screen while its scale springs.
npx shadcn add https://eased.dev/r/area-chart.jsonA scroll-snap carousel with native momentum, mouse drag and arrow keys.
npx shadcn add https://eased.dev/r/carousel.jsonLoading placeholders with one page-wide shimmer: every skeleton shares a highlight and a phase, so a single band sweeps across them all.
npx shadcn add https://eased.dev/r/skeleton.jsonA product tour whose scrim cutout springs between targets, morphing size and concentric radius while the tooltip re-anchors.
npx shadcn add @eased-pro/spotlight-tour
Why these move the way they do
The components directory sorts by what a component is. This page is about how they move: which spring each kind of change uses, and what happens when someone has asked their system for less motion. Motion docs
How to install
1.Add a component with the shadcn CLI:
npx shadcn add https://eased.dev/r/number-roll.json2.The springs come with it, so your own components can move the same way: Motion docs
import { snappy } from "@/components/eased/lib/motion";
Questions
Is this Framer Motion?
It is Motion, the library that used to be called Framer Motion, imported from motion/react. Each component lists it as an npm dependency, so the CLI installs it.
What happens under reduced motion?
Every animated component has a reduced branch: movement becomes a short opacity fade or nothing, and loops stop. The setting is read after hydration, so reduced-motion visitors don't get a hydration mismatch.
Why do exits run faster than entrances?
Something that appears is something to look at; something that leaves is in the way. So exits take at most three quarters of the enter time, ease in, and never overshoot.
Can I use the springs in CSS too?
Yes. The stylesheet has each spring as a linear() curve with a matching duration variable, sampled from the same physics, so a CSS transition and a Motion animation with the same name feel the same.