axi0motion

Title slide

A short tonal slide that lands, for titles moving in.

  • sound
  • title
  • slide
  • tonal
  • 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

Title slide example

Press the button in the demo to hear it.

Controls

1
0 semitones
0
1
0

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="title-slide">Slide in</button>

The wrappers: TitleSlide.tsx (React, TypeScript) and TitleSlide.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

AttributeDefaultWhat it does
data-motion-volume1loudness of this sound on top of the page level, which starts quiet
data-motion-pitch0semitones up or down
data-motion-tone0darker below 0, brighter above 0
data-motion-length1stretches (above 1) or shortens (below 1) the sound
data-motion-space0how much of the soft room around it
data-motion-onclickclick, 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

title-slide.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.