Reveal

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

Reveal

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.

default-example.tsx

1import {
2  Card,
3  CardDescription,
4  CardHeader,
5  CardTitle,
6} from "@/components/ui/card";
7import { Reveal } from "@/registry/ui";
8
9export function RevealExample() {
10  return (
11    <Reveal>
12      <Card className="text-left">
13        <CardHeader>
14          <CardTitle>Scroll into view</CardTitle>
15          <CardDescription>
16            Hero-style reveal with configurable motion and threshold.
17          </CardDescription>
18        </CardHeader>
19      </Card>
20    </Reveal>
21  );
22}

Controls

animation

duration

delay

threshold

once

disabled

RevealText

Word or character stagger with live timing controls

Controls

Ship faster with confidence.

text-example.tsx

1import { RevealText } from "@/registry/ui";
2
3export function RevealTextExample() {
4  return <RevealText>Ship faster with confidence.</RevealText>;
5}

Controls

animation

staggerDelay

duration

threshold

once

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/reveal

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)