← DOCS
text

RevealText

Scroll-triggered text reveal with multiple split modes.

npx chaos add reveal-text

PREVIEW

REVEAL

USAGE

import { RevealText } from '@/components/chaos/text/reveal-text';

<RevealText>This text reveals on scroll</RevealText>
<RevealText splitBy="char" direction="fromLeft">Character by character</RevealText>
<RevealText effect="blur" highlight>With blur effect</RevealText>

PROPS

PropTypeDefault
childrenText to reveal
string-
splitBySplit mode
"word" | "char" | "line""word"
directionReveal direction
"fromBottom" | "fromTop" | "fromLeft" | "fromRight""fromBottom"
effectAdditional effect
"none" | "blur" | "scale" | "rotate""none"
staggerStagger delay between elements in ms
number50
speedAnimation speed
"fast" | "normal" | "slow""normal"
thresholdTrigger threshold (0-1)
number0.2
onceOnly animate once
booleantrue
highlightShow highlight underline
booleanfalse
highlightColorHighlight color
string"#ff0040"
immediateTrigger immediately without scroll
booleanfalse