Skip to content
Site volume
Colourway

Motion

Sound

Off by default. Seven voices, each played here through the real engine: knocks, thumps, pops, hits, booms, the flip and the print.

  • Experimental
On this page

Sound is off until a visitor turns it on, and the toggle remembers. With it on, the things that already move make a sound when they land: a stamp thumps, a hit key pops, a caused SFX goes pow, the pile knocks wood and booms for more blocks, the page wipe flips. Nothing makes a sound on its own, and a first visit plays nothing at all (no gesture has unlocked audio yet).

Every voice#

The site's own toggle: on here is on everywhere.
  • knockBlocks hitting each other in the pile, each seat of TIDY, the 404's dominoes.Sampled: 4 CC0 wood clips, played slow, with a synthesised fallback.
  • stampA stamp landing: the THUNK at its thump.A triangle from 140 to 50 Hz over 180 ms, gain 0.5. Plays for the stamp kind on the bus.
  • popThe hit key's KeyPop; an SFX caused by an arrival.A triangle from 700 to 980 Hz over 90 ms, gain 0.22. Plays for the press and arrive kind on the bus.
  • powAn SFX caused by an impact: POW!, KRAK!, ZAP!A triangle from 190 to 60 Hz over 160 ms, gain 0.35, over band-passed noise at 1100 Hz. Plays for the impact kind on the bus.
  • boomMORE BLOCKS dropping onto the pile.A sine from 95 to 38 Hz over 420 ms, gain 0.4, over low-passed noise at 400 Hz.
  • flipThe page wipe.A sawtooth from 520 to 90 Hz over 320 ms, gain 0.22.
  • printTIDY done; the press run's own voice (it stays silent on a first visit).A triangle from 220 to 110 Hz over 120 ms, gain 0.25.

When it plays#

  • Off by default (D-H4). The SoundToggle sets data-mk-sound and remembers it in localStorage; the engine opens its audio context inside that click.
  • The volume sets the gain: Quiet mutes, Studio plays at 0.7, Press and Rave at 1.
  • Reduced motion does not mute. Sound is not motion.
  • Polite: at most six voices at once; knocks keep a per-block cooldown and at most five per 120 ms, and a fast scrub of the pile plays only its two loudest knocks; a hidden tab suspends the context.
  • Tiny: the engine and every voice are 4 KB gzipped; only the four wood knocks are files (under 5 KB together, CC0); every other voice is synthesised.

The bus#

Moments dispatch mk:sfx on the document with what happened, and the engine picks the voice; a voice in the event wins (the page wipe sends flip). Only the pile calls the engine itself, for its knocks, the print when TIDY is done and the boom of MORE BLOCKS.

KindVoiceSent by
stampstampa stamp's thump
impactpowan SFX with cause="impact"
presspopKeyPop, the page wipe (with voice: "flip")
arrivepopan SFX with cause="arrive"
import { dispatchSfx } from "@maxgrits/overprint-react/motion";

dispatchSfx({ word: "THUNK!", kind: "stamp" });
import { SoundToggle } from "@maxgrits/overprint-react/sound";

<SoundToggle appearance="labelled" />