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 GitHubreferences/sound/MOC-sound.md
Taught in
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)
- sound-decision-framework — Should this make a sound at all? Frequency, purpose, and the 1st-vs-100th-use test. Extends delight-impact-curve and animation-decision-framework.
- sound-motion-sync — Sound and motion are one event. The transient lands on the contact frame, never before it. Measured tolerances.
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, highprompt_influencefor 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
- interaction-personality names sound as a personality lever; this cluster is where it goes deeper.
- prefers-reduced-motion has no audio twin in CSS — sound-playback-web explains why you treat the mute toggle as that twin.
- ai-default-tells carries the sound rows: stock library sounds, a beep on every click, a whoosh on every transition.
- review-checklist rows 12–13 are the sound gate for any UI review.
- The whole launch-film decision flow: [[MOC-launch-video]].
mocsoundaudiolaunch-video