Scroll Reveal · paneui

Scroll down — cards reveal every time they enter

Dinner booked

Friday, 7:30pm, table for four.

Reply drafted

Your note to the landlord is ready to review.

Groceries on the way

Arriving between 6 and 7pm.

Flowers sent

Delivered to Mum with your card message.

Renewal flagged

Your streaming plan renews in three days.

Weekend kept free

No plans on Saturday, as asked.

Installation

pnpm dlx shadcn@latest add @paneui/scroll-reveal

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

<ScrollReveal>
  <FeatureCard />
</ScrollReveal>

Use for lists and grids so items arrive one after another.

Under reduced motion it only fades in, over 200 ms.

Uses the container from Smooth Scroll. See also Scroll Progress, Scroll To.

Fades, slides and unblurs its content in when it enters the nearest contained SmoothScroll or the viewport. Also accepts every prop of motion.div.

from= "bottom": "bottom" | "top" | "left" | "right"; Edge the content slides in from.
distance= 24: number; Slide distance in px.
blur= 8: number; Starting blur in px.
delay= 0: number; Delay in seconds, for staggering siblings.
once= true: boolean; Reveal once, or every time it re-enters view.
amount= 0.3: "some" | "all" | number; How much must be visible to trigger.
root: RefObject<Element | null>; Scroll root. Defaults to the nearest contained SmoothScroll, then the viewport.

Prop	Type	Default	Description
from	"bottom" \| "top" \| "left" \| "right"	"bottom"	Edge the content slides in from.
distance	number	24	Slide distance in px.
blur	number	8	Starting blur in px.
delay	number	0	Delay in seconds, for staggering siblings.
once	boolean	true	Reveal once, or every time it re-enters view.
amount	"some" \| "all" \| number	0.3	How much must be visible to trigger.
root	RefObject<Element \| null>	—	Scroll root. Defaults to the nearest contained SmoothScroll, then the viewport.

Data attribute	Description
data-revealed	Present while the content is in view.