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.

JavaScript API

Control the glitch programmatically with play(), pause(), finish(), and cancel().

JS API
playState: –

Accessibility

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