Verceluses Cuelume in fx

Interfaces that sound as good as they feel.

Fourteen interaction sounds for the web, synthesized live. Nothing to download, nothing to configure.

Get startedHear the cues

Fourteen cues, one for each job.

Each card draws its cue's own envelope. Press one, or play them from the keys.

tapGlassy tap over a soft knock

What people said.

Featured on Best Designs On

  • love them!

    James McDonaldLovable

  • Seriously cool.

    Des TraynorIntercom

  • your work is great

    Jordi EnricSupabase

  • btw we're using cuelume for a new project

    Guillermo RauchVercel

  • this is insanely good

    Pieter BeulquePolar

  • You cooked well, tried your library on blog, feels good

    Jiachi LiuVercel

  • Super easy to ask Codex to add UI sounds into success, error, and loading states … Also only 2kb.

    Meng ToDesign+Code

  • I bookmarked your sound library, definitely using it in some future projects

    David HazReact Bits

  • yo! you totally cooked with cuelume

    Esteban SuarezVercel

  • Love your sounds package

    Yo PuaaPostHog

  • It really looks great and feels great, I'm impressed by all your tools

    Charles VinetteApp & Flow

  • Keep up the great work

    Sébastien ChopinNuxt

  • Love your work, especially cuelume — the sounds are incredible

    Gurvinder SinghSkiper UI

One attribute per behavior.

Call bind() once and cuelume wires every element it finds: taps, typing, selection, toggles, opening, closing, and navigation. Every control below is live.

data-cuelume-tap

A small glassy tap on click, then the outcome from code.

data-cuelume-type

A keystroke for every letter. Type fast and it lightens; Space lands bigger.

data-cuelume-select

A crisp detent when a choice is made, in native selects and custom menus alike.

data-cuelume-toggle

One crisp snap for a switch or a checkbox. Switching off plays it backwards.

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.

direction

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.

input

The glass answers to what touched it. A fingertip lands softer than a mouse, a key press shorter, a pen crisper.

data-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.

Min and gzip
9.0kB
All fourteen cues. No audio files, no dependencies.
Recordings to load
0
Every cue is synthesized with Web Audio the moment it plays.
Attribute per behavior
1
Add it to your markup and bind() does the rest.
Cues, one per interface job
14
Each with its own shape. Clicks, keystrokes, air, and soft mallets, not fourteen tweaks of one click.

Two lines from silent to alive.

$
import { bind } from "cuelume";
bind();
Read the docsSponsor