Interfaces that sound as good as they feel.
A tiny library of interaction sounds for the web. Fourteen cues, synthesized live with Web Audio, with nothing to download and nothing to configure. Everything on this page runs on the real package.
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-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.
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 call
bind() 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