Fuzz
The text shivers in torn slivers like a weak signal, with thin red and blue edges; hovering turns it up and a click jolts it.
- enhancer
- canvas
- hover
- glitch
- 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
Fuzz example
Not found
Not found
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="fuzz">Not found</p>import { Fuzz } from "./motion/react/Fuzz";
<Fuzz>Your content</Fuzz><script setup lang="ts">
import Fuzz from "./motion/vue/Fuzz.vue";
</script>
<template>
<Fuzz>Your content</Fuzz>
</template>const el = document.querySelector("#title");
el.dataset.motion = "fuzz";The wrappers: Fuzz.tsx (React, TypeScript) and Fuzz.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-base | 0.18 | Fuzz at rest |
data-motion-hover | 0.5 | Fuzz while hovered |
data-motion-range | 0.3 | Widest shift |
data-motion-band | 1 | Sliver height |
data-motion-axis | x | Direction of the shifts |
data-motion-fps | 60 | Frames per second |
data-motion-split | true | Red and blue edges |
data-motion-color1 | #ff2e63 | First edge |
data-motion-color2 | #08d9d6 | Second edge |
Accessibility
The words stay real, selectable text in their places (painted transparent while the canvas shows them) and the canvas is aria-hidden, so readers hear the text once and nothing reflows. Reduced motion shows the plain text. The frame loop stops off screen and in hidden tabs.
Size
fuzz.js is 1.4 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.