Reveals its children with a spring as they scroll into view, with optional velocity skew.

I reveal on scroll

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/scroll-reveal.json"

ScrollReveal springs its children in from a direction once they scroll into view. It respects prefers-reduced-motion (fading only, no travel) and can optionally skew with scroll velocity for a fluid feel.

Usage

tsx

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

tsx

<ScrollReveal>
  <Card />
</ScrollReveal>

Direction & distance

tsx

<ScrollReveal direction="left" distance={80} />

Velocity skew

tsx

<ScrollReveal velocitySkew>
  <Section />
</ScrollReveal>

Stagger

Use delay on adjacent reveals to stagger them.

tsx

<ScrollReveal delay={0} />
<ScrollReveal delay={0.1} />
<ScrollReveal delay={0.2} />

Examples

Staggered grid

Reveal a set of cards in sequence as the group scrolls into view.

Plan

Build

Ship

Measure

Iterate

Scale

From the left, no blur

Slides in from the left

Props

Prop	Type	Default	Description
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Direction the content travels in from.
`distance`	`number`	`40`	Travel distance in pixels.
`blur`	`boolean`	`true`	Blur the content in as it reveals.
`delay`	`number`	`0`	Delay in seconds before the reveal starts.
`once`	`boolean`	`true`	Reveal only the first time it enters the viewport.
`velocitySkew`	`boolean`	`false`	Skew the content by scroll velocity.

ScrollReveal also forwards every standard <div> attribute to the root element.

Scroll Reveal