effects

ScreenDistortion

Full screen distortion effects: wave, glitch, chromatic, noise.

npx chaos add screen-distortion

PREVIEW

DISTORTION

USAGE

import { ScreenDistortion } from '@/components/chaos/effects/screen-distortion';

<ScreenDistortion type="glitch" />
<ScreenDistortion type="chromatic" intensity="subtle" />
<ScreenDistortion type="wave" speed="slow" />

PROPS

PropTypeDefault

typeDistortion type

"wave" | "glitch" | "chromatic" | "noise""glitch"

intensityEffect intensity

"subtle" | "medium" | "intense""medium"

speedAnimation speed

"slow" | "normal" | "fast""normal"

hoverOnlyOnly show on hover

booleanfalse

positionPosition type

"fixed" | "absolute""fixed"