blaze-motion

Motion registry · built on motion.dev

One file decides how your whole app moves.

Install cold, wrap anything, ship motion that feels designed — not decorated. Every primitive derives from a single feel object you own.

npx shadcn add https://motion.asmitsah.dev/r/all.json
See it moveStar on GitHub
FIG. —·ease · the curve
ease
0.22, 0.61
 
0.36, 1
base
0.55s
rise
28px

01Install

Install cold. It just moves.

One command lands the whole engine — tokens, provider, every primitive — into your project. No config, no setup. Mount it once; everything around it stays fast and server-rendered.

Install · works todayno config, no setup
Everything at once
npx shadcn add https://motion.asmitsah.dev/r/all.json

Resolves for anyone today — no components.json entry, no prior setup. One command lands the whole engine — the tokens, the provider, and every primitive — into your repo, editable.

Any single component
npx shadcn add https://motion.asmitsah.dev/r/slide.json

Every primitive installs on its own — swap slide for any name. It pulls the shared engine in automatically.

Repeat users — register once
npx shadcn registry add @blaze-motion=https://motion.asmitsah.dev/r/{name}.json
npx shadcn add @blaze-motion/all

Register the @blaze-motion namespace once, then add by shorthand across every project.

02Wrap

Wrap it. That's the API.

No keyframes, no per-element setup. Wrap a card, a heading, a button — it becomes your layout element and forwards your styles, so there's no throwaway wrapper. Every panel below is live, running on this page.

Real primitives · running on this page

FIG. 01·Slide
slides in on view
<Slide direction="up">
  <Card />
</Slide>
Your card
FIG. 02·Fade
fades in on mount
<Fade direction="none">
  <Stat />
</Fade>
99.9%uptime
FIG. 03·Fade · reveal
rises in on view
<Fade direction="up" trigger="inView">
  <h3>Tuned once.</h3>
</Fade>
Tuned once.

03Tune

Change one value. The whole app re-feels.

Duration, ease, rise, stagger — all of it flows from one feel object. Nudge a number and every animation retunes at once. Drag it live below. Per-instance tweaks still win when you want them.

lib/motion.ts
// lib/motion.ts — the whole engine's feel, in one place.
export const feel = {
  duration: { fast: 0.2, base: 0.55, slow: 0.8 },
  ease: [0.22, 0.61, 0.36, 1],
  rise: 28,
  inView: 0.3,
  stagger: 0.08,
  // …one object; every primitive derives from it.
} as const;

The source lands in your project, yours to edit — not a dependency you can only configure from the outside. Change it, and the update propagates to every primitive at once. Drag it below to watch the whole set re-tune live.

lib/motion.ts
export const feel = {
  duration: { fast: 0.2, base: 0.55, slow: 0.8 },
  ease: [0.22, 0.61, 0.36, 1],
  rise: 28,
  inView: 0.3,
  stagger: 0.08,
} as const;
FIG. 00·feel · live
  • Deploy succeeded550ms
  • New comment on PR #42550ms
  • Build passed — 4 checks green550ms
  • Invite accepted550ms

A tuned core that earns its place.

Not a catalog of effects — a small, considered set you wrap around your own markup. Every panel below is a real, running instance.

FIG. 01·Fade
opacity 0 → 1
FIG. 02·Fade · reveal
y +16 → 0
FIG. 03·Stagger
One
Two
Three
FIG. 04·CinematicImage
Long-exposure light trails settling into a single streak
FIG. 05·MotionProvider
LazyMotion · strict · domAnimation
MotionConfig · reducedMotion="user"
your app

Mounted once in the root layout.

More effects. Same engine, same feel.

Entrance, hover, stagger, and text — every one tuned from the same feel object. Hover, click, or flip to Code on any panel.

FIG. 06·SpringPop
scale 0.8 → 1
FIG. 11·SiblingDimming
Hover a tile
1
2
3
4
5
6
FIG. 12·RadialStagger
Click a tile
FIG. 13·TextReveal
Long-exposure headlights and taillights drawn into settling streaks of red and white light on a dark road

FIG. 07·Settle

scale 1.1 → 1.0 · 0.8s · ease-out

Boring where it counts.

The flashy part is optional. The discipline isn't — here's what's behind it.

Server-first by design
One client boundary and that's it. Everything you build around it stays fast and server-rendered — you add motion, not overhead.
One dependency, that's the deal
Just the motion.dev package under the hood. Nothing smuggled in behind it.
Ships light on purpose
Loads only the animation features it needs, not the whole library. Your bundle barely notices.
Respects 'reduce motion'
Honors the OS setting for everyone — motion gracefully becomes a clean fade. No motion sickness.
Calm is the default
Subtle out of the box. It reads as designed, not decorated — you turn the dial up, it never shouts first.
Slots into your layout
Every primitive becomes your real grid or flex child instead of wrapping one in a throwaway element.
You own every line
The source lands right in your project — yours to read, edit, and retune. No black box, no lock-in.

Open source. MIT. Genuinely yours.

No black box, no lock-in — the source lands in your project and stays there. If it saves you an afternoon, drop a star.

blaze-000/blaze-motionStar on GitHubView on GitHub

Docs, built like the rest of it.

Grouped sidebar, live Preview / Code, and a props table per component — plus a copy-ready format so the AI in your editor reads it as fast as you do.