← DOCS
text

DistortionText

Text with wave, shake, skew, or blur distortion effects.

npx chaos add distortion-text

PREVIEW

DISTORT

USAGE

import { DistortionText } from '@/components/chaos/text/distortion-text';

<DistortionText type="wave">FLOWING</DistortionText>
<DistortionText type="shake" intensity="intense">EARTHQUAKE</DistortionText>
<DistortionText type="blur" hoverOnly>FOCUS</DistortionText>

PROPS

PropTypeDefault
childrenThe text to display
string-
typeDistortion type
"wave" | "shake" | "skew" | "blur""wave"
speedAnimation speed
"slow" | "normal" | "fast""normal"
intensityEffect intensity
"subtle" | "medium" | "intense""medium"
hoverOnlyOnly animate on hover
booleanfalse