Motion Provider

GSAP context, ScrollTrigger setup, and FOUC-safe motion styles. Install first — every Animation component below requires this wrapper.

One-time setup

Wrap your root layout with MotionProvider, import void styles in globals.css, then add Animation components anywhere inside the provider tree.

Installation

Add the motion provider component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/motion-provider.json

Usage

Wrap your root layout with MotionProvider, import void styles in globals.css, then add Animation components (FadeIn, TextReveal, RevealOnScroll, etc.) anywhere inside the provider tree.

// app/layout.tsx
import { MotionProvider } from "@/void/provider/motion-provider"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MotionProvider>{children}</MotionProvider>
      </body>
    </html>
  )
}

Examples

globals.css

Import void motion styles once.

Place the void styles import after your Tailwind import in src/app/globals.css.

Code

@import "tailwindcss";
@import "../void/styles.css";

Root layout

Single MotionProvider at the app root.

Every Animation component must render inside this provider. Nested providers are unnecessary.

Code

// app/layout.tsx
import { MotionProvider } from "@/void/provider/motion-provider"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MotionProvider>{children}</MotionProvider>
      </body>
    </html>
  )
}

Mount-trigger components

FadeIn, TextReveal, BlurInText, etc. — import and wrap content. No scroll runway.

See individual component pages for live previews with replay.

Code

import { FadeIn } from "@/void/scroll/fade-in"
import { TextReveal } from "@/void/text/text-reveal"

export function Hero() {
  return (
    <>
      <FadeIn duration={1.2}>
        <h1>Hello</h1>
      </FadeIn>
      <TextReveal split="word">Beautiful motion.</TextReveal>
    </>
  )
}

Scroll-trigger components

RevealOnScroll, ParallaxScroll, scrub components — pass laneHeightVh on short pages.

Scroll components need page scroll distance. Use laneHeightVh when the section is shorter than the viewport.

Code

import { RevealOnScroll } from "@/void/scroll/reveal-on-scroll"

export function Feature() {
  return (
    <RevealOnScroll laneHeightVh={100} preset="scrollReveal">
      <section className="rounded-xl border bg-card p-8">
        Reveals while scrolling
      </section>
    </RevealOnScroll>
  )
}

data-animate (zero wrapper)

MotionProvider includes DataAttrObserver for attribute-driven motion.

Useful for CMS content or markup you cannot wrap in React components.

Code

<div
  data-animate="fadeInUp"
  data-delay="0.1"
  data-trigger="view"
  className="rounded-xl border bg-card p-6"
>
  Animated via data attributes
</div>

Install Animation components

Each component is a separate shadcn registry item.

Browse the Animations category — every item lists its import path and usage on its own page.

Code

# motion-provider first
npx shadcn@latest add https://yami.ui.unsanity.ai/r/motion-provider.json

# then pick components
npx shadcn@latest add https://yami.ui.unsanity.ai/r/fade-in.json
npx shadcn@latest add https://yami.ui.unsanity.ai/r/text-reveal.json
npx shadcn@latest add https://yami.ui.unsanity.ai/r/reveal-on-scroll.json