motion-glitch

RGB channel split effect triggered on hover, mount, or loop. Powered by Motion.

Preview

GLITCH

Import

import 'motion-components/motion-glitch'   // just this one
import 'motion-components'               // or the whole library

<motion-glitch>
  GLITCH
</motion-glitch>

Hover

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

ERROR_404

<motion-glitch trigger="hover">
  ERROR_404
</motion-glitch>

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

<!-- subtle -->
<motion-glitch intensity="2">SYSTEM_FAILURE</motion-glitch>

<!-- aggressive -->
<motion-glitch intensity="9">SYSTEM_FAILURE</motion-glitch>

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 \| 'mount': once on mount
interval	interval	number	2	Seconds 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.