Reveal Text

a clean text reveal component providing directional animation and stagger options.

Smoothvisualsinmotion

Installation

npx shadcn@latest add https://scrollxui.dev/registry/reveal-text.json

Usage

import { RevealText } from "@/components/ui/reveal-text";
<RevealText mode="auto" delay={0.2} stagger={0.15} className="text-5xl font-bold">
  Bold research to unlock
</RevealText>

Examples

Auto

Smoothvisualsinmotion

Manual

Smooth visuals in motion

Up

Smoothvisualsinmotion

Down

Smoothvisualsinmotion

Left

Smoothvisualsinmotion

Right

Smooth visuals in motion

Trigger

Smoothvisualsinmotion

API Reference

Reveal Text

a clean text reveal component providing directional animation and stagger options.

Props

PropertyTypeDefaultDescription
childrenReactNode-
Text or elements to animate.
classNamestring-
Classes applied to the visible text.
boxClassNamestring-
Classes applied to the reveal animation layer.
delaynumber0
Animation delay before the reveal starts.
durationnumber0.8
Duration of the reveal animation.
direction"up" | "down" | "left" | "right""down"
Direction from which the reveal layer moves.
mode"manual" | "auto""manual"
Animate full text or auto-split into words.
staggernumber0.1
Delay between word animations in auto mode.
oncebooleantrue
Run animation once or every time it enters view.

Built withby Ahdeetai.