Motion

Reveal

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

view .md

Preview

one

two

three

Installation

terminal

bash

npx @entrepta/cli@latest add reveal

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

reveal.tsx

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