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