← DOCS
effects

ScreenDistortion

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

npx chaos add screen-distortion

PREVIEW

DISTORTION

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { ScreenDistortion } from '@oalacea/chaosui/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"