Glitch

A glitch effect.

import { Glitch } from '@react-three/postprocessing'
import { GlitchMode } from 'postprocessing'

return (
  <Glitch
    delay={[1.5, 3.5]} // min and max glitch delay
    duration={[0.6, 1.0]} // min and max glitch duration
    strength={[0.3, 1.0]} // min and max glitch strength
    mode={GlitchMode.SPORADIC} // glitch mode
    active // turn on/off the effect (switches between "mode" prop and GlitchMode.DISABLED)
    ratio={0.85} // Threshold for strong glitches, 0 - no weak glitches, 1 - no strong glitches.
  />
)

Example

Glitch Demo
Glitch Demo

Props

NameTypeDefaultDescription
activeBooleantrueTurn the effect on and off
blendFunctionBlendFunctionBlendFunction.NORMALThe blend function of this effect.
chromaticAberrationOffsetVector2A chromatic aberration offset. If provided, the glitch effect will influence this offset.
delayVector2The minimum and maximum delay between glitch activations in seconds.
durationVector2The minimum and maximum duration of a glitch in seconds.
strengthVector2The strength of weak and strong glitches.
perturbationMapTextureA perturbation map. If none is provided, a noise texture will be created.
dtSizeNumber64The size of the generated noise map. Will be ignored if a perturbation map is provided.
columnsNumber0.05The scale of the blocky glitch columns.
ratioNumber0.85The threshold for strong glitches.