Scroll Reveal Heading

A text animation component that splits a heading into words and reveals each one with a staggered fade-and-lift animation as the element scrolls into view. Built with Motion's whileInView and viewport options.

ReactNext.jsClient ComponentReactMotion

Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/scroll-reveal-heading

Registry endpoint: https://ui.mridha.net/r/scroll-reveal-heading.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/scroll-reveal-heading.tsx

3. Import the component

import { ScrollRevealHeading } from "@/components/ui/scroll-reveal-heading";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <ScrollRevealHeading />
    </main>
  );
}

Dependencies

motion

Props

Prop	Type	Default	Description
`text*`	`string`	—	The heading text to animate
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "p"`	`"h2"`	HTML element to render as
`staggerDelay`	`number`	`0.05`	Delay between each word reveal in seconds
`className`	`string`	—	Additional CSS classes

Accessibility

Text is always visible to screen readers regardless of animation state.
Uses semantic heading elements to preserve document structure.
Animation is skipped when prefers-reduced-motion is active.

Performance

Uses IntersectionObserver via Motion's viewport option.
Animation triggers once by default — does not re-animate on re-entry.