Crystal hit
A clear glassy impact with a shimmering tail.
- sound
- hit
- glass
- shimmer
- 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
Crystal hit 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="hit-crystal">Strike</button>import { HitCrystal } from "./motion/react/HitCrystal";
<HitCrystal>Play</HitCrystal><script setup lang="ts">
import HitCrystal from "./motion/vue/HitCrystal.vue";
</script>
<template>
<HitCrystal>Play</HitCrystal>
</template>const button = document.querySelector("button");
button.dataset.sound = "hit-crystal";The wrappers: HitCrystal.tsx (React, TypeScript) and HitCrystal.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.5 | how much of the soft room around it |
data-motion-on | click | 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
hit-crystal.js is 0.2 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.