data-cuelume-type
A keystroke for every letter. Type fast and it lightens, Space lands bigger, and a held Backspace keeps going.
Interfaces that sound as good as they feel.
Fourteen interaction sounds for the web, synthesized live. Nothing to download, nothing to configure.
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
Keyboardcues on the top row
Waveformtype anywhere
Inspector
Emphasis
normal
Theme
Play on hover
One attribute per behavior.
Call bind() once and cuelume wires every element it finds: taps, typing, selection, toggles, opening, closing, and navigation. The three tiles below are live.
data-cuelume-select
A crisp detent when a choice is made, in native selects and custom menus alike.
data-cuelume-tap
A small glassy tap on click, then the outcome from code: play("success") or play("error").
Same cue, played the way you played it.
Cuelume reads how each interaction happens and bends the cue to match, within limits that keep it recognisable. You add emphasis for what matters. It all stays on the page; nothing is stored or sent.
Directionselect
A later option rises and an earlier one falls, by a few percent. Enough to feel which way you moved, never enough to become a melody.
Inputtap
The glass answers to what touched it. A fingertip lands softer than a mouse, a key press shorter, a pen crisper.
Emphasisdata-cuelume-emphasis
The one thing Cuelume can't infer: how much the action matters. Each level is its own arrangement of the cue, not just a volume.
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-tap>Save</button> <input data-cuelume-type /> <select data-cuelume-select>…</select>
import { bind, play, setTheme, setVolume } from "cuelume"; bind(); // wires every data-cuelume-* attribute setVolume(0.7); // global loudness, from 0 to 1 setTheme("mech"); // dry, precise, mechanical play("success"); // inherits the global volume play("success", { volume: 0.4 }); // quieter for this play only play("success", { emphasis: "strong" }); // weightier when it matters