# Reveal

- Page: <https://kznlabs.github.io/labsUI/components/reveal>

## Reveal (`reveal`, component)

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

- Install: `npx @kznlabs/labsui add reveal`
- Docs: <https://kznlabs.github.io/labsUI/components/reveal>
- Brings: utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Reveal>`: Fades and rises in on a spring the first time it scrolls into view. Stays visible after.
  - `delay?: number` = `0`: Seconds to wait after entering view.
  - `y?: number` = `24`: Start offset in px. Content rises into place.

### Usage

```tsx
<Reveal delay={0.1}><Card>…</Card></Reveal>
```

### Example: feature.tsx

```tsx
import { Reveal } from "@/components/ui/reveal";
export function Feature() {
  return (
    <Reveal delay={0.1}>
      <article>Rises into view on scroll.</article>
    </Reveal>
  );
}
```