Component Library

Reveal

Scroll-triggered entrance animations: single Reveal wrapper and split RevealText. Uses motion and CVA for layout variants.

Reveal (playground)

Live controls for animation timing and entrance style; scroll the page to re-trigger when once is off

Controls

Scroll into view

Hero-style reveal with configurable motion and threshold.

reveal-example.tsx

1<Reveal
2  animation="fade-up"
3  duration={0.5}
4  delay={0}
5  threshold={0.25}
6  once
7  disabled={false}
8>
9
10  <Card>...</Card>
11</Reveal>

Controls

animation

duration

delay

threshold

once

disabled

RevealText (playground)

Word or character stagger with live timing controls

Controls

Ship faster with confidence.

reveal-text-example.tsx

1<RevealText
2  by="word"
3  animation="fade-up"
4  staggerDelay={0.04}
5  duration={0.35}
6  threshold={0.2}
7  once
8>
9
10  Ship faster with confidence.
11</RevealText>

Controls

animation

staggerDelay

duration

threshold

once

Props

Name	Type	Default	Description
Reveal	component	—	animation, delay, duration, threshold, once, easing, display (CVA), disabled, onReveal
RevealText	component	—	string children; by word\|character, animation fade-up\|blur-in\|slide-up, staggerDelay, duration, threshold, display (CVA)