STARCK UI

Scroll Reveal

Progressively enhanced reveal and stagger primitives with reduced-motion support.

Used inMoorline ↗

Built to arrive quietly.

One motion curve
Reduced motion
Progressive enhancement

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add https://ui.starck.studio/r/scroll-reveal.json

Usage

<Reveal className="w-full max-w-3xl text-center">
  <h2 className="text-3xl font-semibold tracking-[-0.04em]">
    Built to arrive quietly.
  </h2>
  <Stagger className="mt-8 grid gap-3 sm:grid-cols-3">
    <StaggerItem className="rounded-2xl border bg-background p-5 text-sm text-muted-foreground shadow-sm">
      One motion curve
    </StaggerItem>
    <StaggerItem className="rounded-2xl border bg-background p-5 text-sm text-muted-foreground shadow-sm">
      Reduced motion
    </StaggerItem>
    <StaggerItem className="rounded-2xl border bg-background p-5 text-sm text-muted-foreground shadow-sm">
      Progressive enhancement
    </StaggerItem>
  </Stagger>
</Reveal>