Reveal Text

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

Installation

npx shadcn@latest add @scrollxui/reveal-text

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>

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

Property	Type	Default	Description
`children`	ReactNode	`-`	Text or elements to animate.
`className`	string	`-`	Classes applied to the visible text.
`boxClassName`	string	`-`	Classes applied to the reveal animation layer.
`delay`	number	`0`	Animation delay before the reveal starts.
`duration`	number	`0.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.
`stagger`	number	`0.1`	Delay between word animations in auto mode.
`once`	boolean	`true`	Run animation once or every time it enters view.