Scroll Reveal

Elements animate into view when they enter the viewport, with 6 animation presets.

npx uniqueui add scroll-reveal

Preview

fade-up

Scroll to reveal

scale

Scroll to reveal

blur

Scroll to reveal

Usage

import { ScrollReveal, ScrollRevealGroup } from "@/components/ui/scroll-reveal";

export default function Example() {
  return (
    <div className="p-10 text-white">
      <ScrollRevealGroup
        animation="fade-up"
        staggerDelay={0.15}
        className="grid grid-cols-1 md:grid-cols-3 gap-4"
      >
        {["fade-up", "scale", "blur"].map((preset) => (
          <div
            key={preset}
            className="p-6 rounded-lg bg-neutral-900/50 border border-neutral-800 text-center"
          >
            <div className="text-lg font-semibold mb-1 text-neutral-200">{preset}</div>
            <p className="text-neutral-500 text-xs">Scroll to reveal</p>
          </div>
        ))}
      </ScrollRevealGroup>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	The DOM elements to animate into view upon scrolling.
`className`	`string`	Styling classes mapping to the outer tracking viewport.
`animation`	`AnimationPreset`	The specific animation choreography preset (e.g. 'fade-up', 'scale-in').
`delay`	`number`	Delay in seconds before the animation begins.
`duration`	`number`	Duration in seconds for the reveal animation.
`threshold`	`number`	Intersection ratio (0-1) required to trigger the reveal.
`once`	`boolean`	Whether the element should hide and re-animate when scrolled out and back in.