Scroll Reveal

IntersectionObserver-powered fade-in wrapper. Configurable direction (up/down/left/right), distance, duration, delay, and once/repeat mode.

Reveals from the up

Reveals from the left

Reveals from the right

Installation

Run the CLI

$npx particleui-cli add scroll-reveal

Usage

TSX

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

export default function Example() {
  return (
    <ScrollReveal direction="up" delay={100}>
      <div className="rounded-xl border p-6">
        <h3 className="font-semibold">Appears on scroll</h3>
        <p className="text-sm text-muted-foreground mt-1">Fades in from below.</p>
      </div>
    </ScrollReveal>
  )
}

Props

Prop	Type	Default	Required
direction	RevealDirection	`"up"`	no
distance	number	`24`	no
duration	number	`600`	no
delay	number	`0`	no
once	boolean	`true`	no

Details

Source filecomponents/ui/scroll-reveal.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—