Skip to content
blaze-motion
REACT 19 MOTION ENGINE14 Presets · Zero Wrappers

Spread. Don't Wrap.
Pure React Motion.

Say goodbye to messy wrapper components polluting your DOM. blaze-motion gives you 97 native animated HTML primitives and 14 production presets you spread directly into your elements. You own config.ts.

Explore 14 PresetsDocumentation

Add to your shadcn project in seconds:

npx shadcn@latest add https://motion.asmitsah.dev/r/motion.json
Next.js 16 + App Router
Tailwind CSS v4 Native
Auto Reduced Motion
playground.tsx · live preview
Above Fold Safe

slideUp

Spread Preset

Transforms Y axis with zero opacity shift for optimal LCP

duration: 0.85sZero Wrapper
<H2 {...slideUp} className="text-h2">Next Gen Motion</H2>
fadeUppresetfadeDownpresetfadeLeftpresetfadeRightpresetslideUppresetslideDownpresetslideLeftpresetslideRightpresetzoomInpresetzoomOutpresetstaggerpresetblurInpresetpulseGlowpresettiltHoverpreset
Zero Wrapper TaxClean DOM
97 Animated HTML ElementsNative Tags
Spread-First ArchitectureSimple JSX
shadcn Registry NativeCopy-Paste
Centralized config.tsFull Control
LCP & SSR SafePerformance
Auto Reduced-Motion KillA11y Floor
React 19 & Next 16 ReadyLatest Stack
ARCHITECTURE

Engineered for developers who hate DOM pollution.

Most animation libraries force you to nest 5 layers of wrapper components. blaze-motion spreads straight into your tags so your layout never breaks.

The Anti-Wrapper Engine

Compare DOM footprint and developer ergonomics

1 HTML Element in DOM · CSS Grid / Flexbox 100% Intact
<H2 {...fadeUp} className="text-h2 font-bold">
Modern React Title
</H2>
Presets spread as props: initial, animate, whileInView, transitionZero runtime wrapper tax

Centralized config.ts

One file controls site-wide physics

Instead of scattering timing numbers across 50 files, every preset reads from your own config.ts.

travel.md:
28px
duration.base:
0.85s
Live Physics Target
lib/motion/config.ts · 100% Yours

LCP & At-Fold Safety

The smart prefix architecture

Google Chrome's LCP algorithm penalizes elements rendered at opacity: 0. blaze-motion categorizes presets by prefix so you never hurt SEO:

slide* / zoom*

Above-the-fold safe

Pure transform. 100% opacity on SSR.

fade* / stagger

Below-the-fold entrance

Opacity gated for smooth viewport triggers.

Core Web Vitals friendly by design

97 Native HTML Elements

Every standard tag exported and motion-ready

Zero SVG Overhead

Import exactly the tag you need directly from @/lib/motion. Capitalized PascalCase aliases prevent global scope collisions and preserve semantic HTML.

<Div>
<Section>
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
<P>
<Span>
<Button>
<Ul>
<Li>
<Article>
<Aside>
<Nav>
<Header>
<Footer>
<Main>
<Form>
<Input>
<Label>
Showing 22 of 97 elements
import { Div, Section, H2, Button } from "@/lib/motion";
INTERACTIVE LABORATORY

Test every preset in the live sandbox.

Click any preset to see its motion curve, inspect target properties, and copy the ready-to-spread JSX.

Preset categories

slideUp

preset
Docs

slideUp in Action

Travels up into its resting position over a short offset, animating the y transform and nothing else.

Interpolation Targets:y: travel.sm → rest.y (16 → 0)
<Section {...slideUp}>Your content</Section>
INTEGRATION WORKFLOW

Three steps. In your codebase in 30 seconds.

Built as a copy-paste shadcn registry distribution. The code lives in your repo at your paths.

Package Manager:
01Terminal Pull

Run the CLI

Downloads the core engine, 14 presets, and 97 element exports directly into your lib/motion/ folder.

~4KB gzipped100% Type-safe
pnpm dlx shadcn@latest add https://motion.asmitsah.dev/r/motion.json

Official shadcn registry distribution

02app/layout.tsx

Mount the Provider

Wrap your root layout with <MotionProvider>. It asynchronously loads motion features and respects OS reduced-motion settings.

Lazy loaded0ms blocking time
// app/layout.tsx
import { MotionProvider } from "@/lib/motion";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <MotionProvider>{children}</MotionProvider>
      </body>
    </html>
  );
}
03JSX Spread

Spread onto Elements

Import capitalized HTML elements and spread presets directly. No wrappers, no extra `div` layers, and complete layout fidelity.

Zero wrapper nodesSemantic HTML
// components/feature-hero.tsx
import { Div, H1, P } from "@/lib/motion";
import { fadeUp } from "@/lib/motion/presets/fade-up";
import { slideUp } from "@/lib/motion/presets/slide-up";

export function FeatureHero() {
  return (
    <Div {...slideUp} className="container py-12">
      <H1 {...slideUp} className="text-h1 font-bold">
        Next-Gen Experience
      </H1>
      <P {...fadeUp} className="text-lead text-ink-soft">
        Animated seamlessly with zero wrapper divs.
      </P>
    </Div>
  );
}

Your config.ts is 100% yours and never overwritten

When you pull updated presets, your custom timing values, easing curves, and travel tokens remain permanently preserved.

Consumer-Owned Architecture
FREQUENTLY ASKED QUESTIONS

Frequently asked technical details.

Everything you need to know about the preset-spread engine, SSR guarantees, and accessibility.

Wrapper components add unnecessary <div> elements into your DOM tree. This breaks CSS Grid direct-child relationships (subgrid, auto-fit), breaks CSS flexbox alignment, and bloats your bundle. By spreading props directly onto <H2 {...fadeUp}>, your markup remains 100% semantic, single-layered, and clean.

READY TO SHIP IN YOUR PROJECT

Stop wrapping divs.
Start spreading motion.

Install the complete motion engine, 14 production presets, and 97 animated HTML elements directly into your repository with one command.

pnpm dlx shadcn@latest add https://motion.asmitsah.dev/r/motion.json
Explore All PresetsRead Documentation
Zero wrapper components, 100% pure JSX spread!