Interfaces that sound as good as they feel.
A tiny library of interaction sounds for the web. Seventeen cues, synthesized live with Web Audio, with nothing to download and nothing to configure. Everything on this page runs on the real package.
btw we're using cuelume for a new project
yo! you totally cooked with cuelume
Seriously cool.
this is insanely good
love them!
Love your sounds package
You cooked well, tried your library on blog, feels good
your work is great
It really looks great and feels great, I'm impressed by all your tools
Super easy to ask Codex to add UI sounds into success, error, and loading states … Also only 2kb.
Keep up the great work
I bookmarked your sound library, definitely using it in some future projects
Love your work, especially cuelume — the sounds are incredible
Cues17
Waveform1 to 0, Q to U
Inspector
Sound
Color
VolumeDrag to set volume70
Play on hover
01Interaction patterns
One attribute per behavior.
Call bind() once and cuelume wires every element it finds. Hover, press, release and toggle are covered out of the box. The three demos below are live.
DocsExamplesChangelog
data-cuelume-hover
Ticks as the pointer crosses. On touch, a tap does the same.
data-cuelume-toggle
A click and a clack for anything that flips between two states.
data-cuelume-press
Paired with data-cuelume-release, a click becomes a real two part press.
02Why cuelume
Small enough to forget, considered enough to notice.
Every card here plays the cue that tells its own story. Press one.
03Get started
Two lines from silent to alive.
1. Install the package
$
Click the command to switch package manager.
2. Mark up and bind
Add an attribute to anything that should make a sound, then callbind() once at startup.
<!-- one attribute per behavior --> <button data-cuelume-press data-cuelume-release>Save</button> <a data-cuelume-hover="tick">Docs</a> <button data-cuelume-toggle>Dark mode</button>
import { bind, play, setVolume } from "cuelume";
bind(); // wires every data-cuelume-* attribute
setVolume(0.7); // global loudness, from 0 to 1
play("success"); // inherits the global volume
play("success", { volume: 0.4 }); // quieter for this play only