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

Props

Name	Type	Default	Description
active	Boolean	true	Turn the effect on and off
blendFunction	BlendFunction	BlendFunction.NORMAL	The blend function of this effect.
chromaticAberrationOffset	Vector2		A chromatic aberration offset. If provided, the glitch effect will influence this offset.
delay	Vector2		The minimum and maximum delay between glitch activations in seconds.
duration	Vector2		The minimum and maximum duration of a glitch in seconds.
strength	Vector2		The strength of weak and strong glitches.
perturbationMap	Texture		A perturbation map. If none is provided, a noise texture will be created.
dtSize	Number	64	The size of the generated noise map. Will be ignored if a perturbation map is provided.
columns	Number	0.05	The scale of the blocky glitch columns.
ratio	Number	0.85	The threshold for strong glitches.

Edit this page