# Reveal

> The entrance every card shares: it rises 14px and fades in once on screen. Staggers lists by index, capped at six.

Section: Motion. Docs: https://entrepta.vercel.app/docs/components/reveal

## Install

```bash
npx @entrepta/cli@latest add reveal
```

Files: `motion/reveal.tsx`, `lib/motion.ts`.
npm packages: `motion`.
Comes with: `motion-lib`.

## Usage

```tsx
import { Reveal, useReveal } from "@/components/entrepta/reveal"
import { motion } from "motion/react"

{posts.map((post, i) => (
  <Reveal key={post.slug} index={i}>
    <Card>…</Card>
  </Reveal>
))}

// on your own motion element
<motion.div {...useReveal(0.1)}>…</motion.div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `index` | `number` | 0 | Position in a list, for the stagger |
| `delay` | `number` | 0 | Seconds before the entrance |
| `step` | `number` | 0.06 | Seconds between list items |