Metal tap
A small, bright metallic tap for links and icon buttons.
- sound
- tap
- link
- metallic
- 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
Metal tap 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="tap-metal">Open link</button>import { TapMetal } from "./motion/react/TapMetal";
<TapMetal>Play</TapMetal><script setup lang="ts">
import TapMetal from "./motion/vue/TapMetal.vue";
</script>
<template>
<TapMetal>Play</TapMetal>
</template>const button = document.querySelector("button");
button.dataset.sound = "tap-metal";The wrappers: TapMetal.tsx (React, TypeScript) and TapMetal.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.06 | 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
tap-metal.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.