Scroll

Reveal & stagger

Content that springs in as it enters — alone, or its children one after another.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

import { Reveal } from '@vizzele/react';

<Reveal from="up" stagger={70} className="grid">
  {items.map((i) => <Card key={i.id} {...i} />)}
</Reveal>

Prop	Type	Default	Description
`from`	`'up' \| 'down' \| 'left' \| 'right' \| 'scale' \| 'blur' \| 'fade'`	`'up'`	Entrance.
`distance`	`number`	`32`	Travel (px).
`stagger`	`number`	`0`	ms between children; 0 animates the element itself.
`delay`	`number`	`0`	ms before starting.
`once`	`boolean`	`true`	Reveal only once.
`spring`	`SpringConfig \| SpringPreset`	`'gentle'`	Feel.