Skip to content
ExamsLibraryFor agentsConnect your agent
soundSound·1/14

MOC — Sound

When an interface should make a sound, how to design a family of sounds that belong together, how to sync them to motion, and how to generate them — ElevenLabs on demand, or open-weight and CC0 without a key — plus the five measured launch-film sound registers and how a track or a voice is placed on the picture.

Raw markdown On GitHub

Sound is the sense the web forgot. That makes it the highest-leverage polish move left — and the easiest one to get wrong, because a bad sound is worse than no sound and users remember it. Read sound-decision-framework first; it says no most of the time. The rest of the cluster is for the moments that earn a sound.

Two surfaces share this cluster and have opposite defaults. Product UI is silent by default, opt-in, rare, and tiny. A launch video is the reverse: sound is the emotional layer, and silence is a material you place deliberately. launch-video-sound owns the second; everything else defaults to the first.

Decision-first nodes (read before making a sound)

Design nodes (read while designing the family)

  • sound-palette — A product gets one material and a handful of sounds that share it. Size → pitch, direction → meaning, consonance → success, dissonance → error.
  • sound-spec — The numbers: duration by category, loudness in LUFS, mono, 44.1 kHz, zero leading silence, peak headroom.

Implementation nodes

  • sound-playback-web — Unlock the AudioContext on the first gesture, decode once, one source node per play, persisted mute toggle, never sound-only information.

Generation nodes

  • sound-generation-elevenlabs — On-demand generation for installers with an ELEVENLABS_API_KEY: the prompt formula, high prompt_influence for functional sounds, one session per family, post-processing.
  • sound-generation-open-source — No key: open-weight models (Stable Audio 3 Small-SFX runs on CPU), procedural synthesis (ZzFX, Web Audio), and CC0 libraries (Kenney, soundcn, Freesound). A decision table for which.

Launch-video register

  • launch-video-sound — Five measured registers (dry reveal, OpenAI one-key bed with clicks, beat track, voice-led, product-camera pad with consequence foley), subtraction before the reveal, loudness by register with −1 dBTP fixed.
  • launch-video-music — Placing a track or a voice on the picture: drop on the reveal, breakdowns under reading, cuts on onsets, moves landing on spoken onsets.
  • sound-from-motion — Derive the sound from the motion: size → pitch and decay, x → pan, y → brightness, direction → contour, tween → length, contact frame → transient; or structurally, where the picture places a track's drop and dropouts. The cue sheet and scripts/sound-sheet.mjs, which renders a stereo stem from it.
  • designed-sfx-anatomy — What a designed effect is made of, measured: one gesture, its own band, a hard end, a sync point per kind. Targets for whoosh, riser, impact, sub drop, sting, ding, pop-in, click, typing and zip, tuned to the track's key.
  • earshot-reconciliation — earshot, the agent's ears: describe, match, trim, realness, a listening timeline and scorecard, a code-rendered effects bank. What it owns, and where this graph's values win.
  • sound-licensing — What may go into a commercial, edited, published film: CC0 and CC BY yes; NC, ND and SA no; verify on the item's page; Content ID; credits.

Shipped tooling

scripts/sound-family.mjs (next to this skill's SKILL.md) turns one family manifest into a normalized set of files — ElevenLabs when a key is present, a dependency-free synthesizer when it is not. scripts/sound-sheet.mjs renders a launch video's whole stem from a motion cue sheet, and writes the same six product one-shots from the same voices. Spawn sound-designer when the job is the whole workflow rather than one question.

Cross-cluster

mocsoundaudiolaunch-video