RGB glitch
Red and cyan copies of the text tear across it in slices that never quite settle, with bursts every few seconds, like a signal breaking up.
- enhancer
- glitch
- chromatic
- slices
- signal
- retro
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
RGB glitch example
Signal lost
Signal lost
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<p class="m-demo-xl" data-motion="rgb-glitch">Signal lost</p>import { RgbGlitch } from "./motion/react/RgbGlitch";
<RgbGlitch>Your content</RgbGlitch><script setup lang="ts">
import RgbGlitch from "./motion/vue/RgbGlitch.vue";
</script>
<template>
<RgbGlitch>Your content</RgbGlitch>
</template>const el = document.querySelector("#title");
el.dataset.motion = "rgb-glitch";The wrappers: RgbGlitch.tsx (React, TypeScript) and RgbGlitch.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-speed | 1 | How fast the slices jump |
data-motion-strength | 1 | How far the slices tear and the colors split |
data-motion-hover | false | Glitch only under the pointer |
data-motion-mask | true | Slices hide the text they cover (wear the background) |
data-motion-color1 | #ff2e63 | First copy |
data-motion-color2 | #08d9d6 | Second copy |
Accessibility
The copies are aria-hidden and ignore the pointer; the text itself stays as written, readable and selectable. The animation pauses off screen and in hidden tabs; under reduced motion there is no glitch at all. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
rgb-glitch.js is 1.7 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.