motion-glitch

RGB channel split effect triggered on hover, auto, or loop — powered by Motion One.

Preview

GLITCH

Import

Hover

Use trigger="hover" to fire the glitch on mouseenter.

ERROR_404

Intensity

Control how far the red and blue channels shift. Low values are subtle; high values are aggressive.

intensity="2" SYSTEM_FAILURE
intensity="9" SYSTEM_FAILURE

Properties

Attribute Property Type Default Description
intensity intensity number 5 Channel split distance in px. Higher values produce a more extreme glitch.
trigger trigger string 'loop' 'loop' — repeat on interval  |  'hover' — on mouseenter  |  'auto' — once on mount
interval interval number 2000 Milliseconds between each glitch when trigger="loop"

Public method: call el.glitch() on the element reference to fire the animation imperatively at any time, regardless of the trigger setting.

Accessibility

Respects prefers-reduced-motion: when enabled, the channel split effect is disabled and the text renders without distortion.