labsUI

Reveal

Scroll reveal: content fades and rises on a spring the first time it enters the viewport.

npx @kznlabs/labsui add reveal
First · rises on scroll
Second · rises on scroll
Third · rises on scroll
import { Reveal } from "@/components/ui/reveal";export function Feature() {  return (    <Reveal delay={0.1}>      <article>Rises into view on scroll.</article>    </Reveal>  );}

<Reveal>

Fades and rises in on a spring the first time it scrolls into view. Stays visible after.

  • delaydefault 0
    number

    Seconds to wait after entering view.

  • ydefault 24
    number

    Start offset in px. Content rises into place.

PropTypeDefault
delay

Seconds to wait after entering view.

number0
y

Start offset in px. Content rises into place.

number24

* required. Every component also takes className.