text

StrikeReveal

Strikethrough animation that reveals new text.

npx chaos add strike-reveal

PREVIEW

OLDNEW

USAGE

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

<StrikeReveal revealText="TRUTH">LIE</StrikeReveal>
<StrikeReveal variant="redacted" trigger="hover">CLASSIFIED</StrikeReveal>
<StrikeReveal color="blood" double>OLD TEXT</StrikeReveal>

PROPS

PropTypeDefault

childrenOriginal text to strike through

string-

revealTextText to reveal after strike

string-

variantVisual variant

"permanent" | "crossout" | "redacted" | "censored" | "glitch""permanent"

colorColor variant

"default" | "blood" | "cyber" | "acid" | "void""default"

triggerTrigger mode

"auto" | "hover" | "scroll" | "click""auto"

delayDelay before animation (ms)

number0

doubleDouble strike line

booleanfalse

strikeColorCustom strike color

string-

onRevealCallback when reveal completes

() => void-