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
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.
data-cuelume-hoverTicks as the pointer crosses. On touch, a tap does the same.
data-cuelume-toggleA click and a clack for anything that flips between two states.
data-cuelume-pressPaired with data-cuelume-release, a click becomes a real two part press.
Small enough to forget, considered enough to notice.
Every card here plays the cue that tells its own story. Press one.
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