Ready glow
A faint glow when a drop target is ready or a pointer arrives.
- sound
- hover
- drop
- faint
- 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
Ready glow example
Press the button in the demo to hear it.
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<button class="demo-btn" type="button" data-sound="hover-glow">Hover me</button>import { HoverGlow } from "./motion/react/HoverGlow";
<HoverGlow>Play</HoverGlow><script setup lang="ts">
import HoverGlow from "./motion/vue/HoverGlow.vue";
</script>
<template>
<HoverGlow>Play</HoverGlow>
</template>const button = document.querySelector("button");
button.dataset.sound = "hover-glow";The wrappers: HoverGlow.tsx (React, TypeScript) and HoverGlow.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-volume | 1 | loudness of this sound on top of the page level, which starts quiet |
data-motion-pitch | 0 | semitones up or down |
data-motion-tone | 0 | darker below 0, brighter above 0 |
data-motion-length | 1 | stretches (above 1) or shortens (below 1) the sound |
data-motion-space | 0.2 | how much of the soft room around it |
data-motion-on | hover | click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving) |
Accessibility
Nothing plays before the person's first click, tap or key press on the page, and the default level is quiet. axi0Motion.mute(true) or a mute-switch button silences every sound on the page, in memory only (nothing is saved). The sound only adds to what the control already shows and never carries meaning alone. The reduced-motion setting does not mute it: sound is not motion.
Size
hover-glow.js is 0.1 KB gzip, with sounds-kit.js 3.7 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.