Declarative Web Audio
Raphael Salaja's "declarative audio" launch ("the web has been quiet for a while") — this is the X-capture of
@web-kits/audio, documented in full at @web-kits/audio.
Declarative Web Audio is Raphael Salaja's library that makes sound a first-class, declarative part of web interaction design. The site bookmarked here, audio.raphaelsalaja.com, is the documentation for the npm package @web-kits/audio — i.e. this page and @web-kits/audio describe the same project; the canonical, detailed reference is @web-kits/audio. Source: @web-kits/audio, https://audio.raphaelsalaja.com, 2026-06-13
Unlike sample-playback wrappers, @web-kits/audio is a declarative synthesis library: a sound is a plain object — oscillator (sine/triangle/square/sawtooth/noise), pitch glide, ADSR envelope, gain, stacked layers — and defineSound() compiles it once into a zero-allocation play function. Sounds bundle into patches (JSON "design tokens for sound") distributed via a shadcn-style CLI + registry; React hooks (SoundProvider, useSound, usePatch) auto-disable on prefers-reduced-motion. Source: @web-kits/audio, https://audio.raphaelsalaja.com, 2026-06-13
The thesis: motion, layout, and color all became data-first (Motion, Tailwind, OKLCH); audio was the straggler. Source: X/@raphaelsalaja, 2026-04-04
Engagement signal: 1,391 likes / 1,243 bookmarks. Source: X/@raphaelsalaja, 2026-04-04
Raphael also maintains Userinterface.wiki, whose writing on sound in web design predates the library and lays out the same thesis. Source: compiled from @web-kits/audio
Stack fit (Kevin)
- Sound is the least-explored axis in Kevin's design-engineering stack — the taste-* skills and design-engineering-polish cover type, spacing, motion, and color but not auditory feedback; declarative patches extend the same premium-feel philosophy (Frontend and Design Skills) to the ear.
- The declarative + React-hook API matches the Tailwind / Motion / shadcn mental model already in use; the
prefers-reduced-motiondefault keeps it accessible. - Pair with Media Generation Skills for AI-generated MP3 assets when synthesis isn't the right texture; file the engine under Design Engineering Resources / Interface Micro-Polish.
- Dedupe target: merge or fold this capture into @web-kits/audio so one library isn't tracked on two pages.
- For the thesis and adjacent craft, Userinterface.wiki is Raphael's living manual on interface details, including sound.
Timeline
- 2026-06-30 | Deep review downloaded the local video thumbnail, inspected it as low-information, and moved the durable version/source details to canonical @web-kits/audio. Keep this page as the X-capture redirect until the hub cleanup merges duplicate captures. Source: wiki/assets/x-bookmarks/2046576297812582667/manifest.json
- 2026-06-13 | Quality remediation: identified audio.raphaelsalaja.com as the docs for
@web-kits/audio(same project as @web-kits/audio); corrected the framing from "separate philosophy demo" to a duplicate launch-capture, and described the synthesis/patches/React API. Source: https://audio.raphaelsalaja.com - 2026-04-04 | Raphael Salaja announces declarative web audio: "the web has been quiet for a while. for the past few months i've been building something to fix that. declarative audio." 1,391 likes, 1,243 bookmarks. Source: X/@raphaelsalaja, 2026-04-04