# Reveal

> Scroll-triggered fade-and-slide, plus a Stagger for groups.

Component · Free · https://lodeui.com/components/reveal

## When to use

- Sections that fade in as you scroll a landing page.

## When not to use

- App UI people use every day.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/reveal.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Reveal, Stagger } from "@/components/ui/reveal";

export function Features() {
  return (
    <Reveal>
      <Stagger className="grid gap-4 sm:grid-cols-3">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </Stagger>
    </Reveal>
  );
}
```

## API reference

### Reveal

Fades its children in when they scroll into view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| from | `"bottom" \| "left" \| "right" \| "none"` | `"bottom"` | Direction. |
| delay | `number` | `0` | Seconds. |

### Stagger

Reveals direct children one after another.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| gap | `number` | `0.06` | Seconds between children. |

## Accessibility

- Content is shown at once under reduced motion.

## Motion

- Fades and slides 16px once per page view.

## Responsive behavior

- Works in any layout.

## Performance

- IntersectionObserver; animates once.

## Notes for AI

- Don't wrap above-the-fold content; it delays first paint.

## Related

- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.