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