VoiceMock

Sound

Interaction sound feedback via cuelume — fourteen synthesized UI sounds, zero audio files, delegated globally through data-cuelume-* attributes.

Sound palette

Click any sound to hear it. All fourteen sounds ship with the cuelume package — no audio assets in this repo.

Name	Character	Suggested use
	Soft two-note ascending bell	Default hover
	Quick four-note twinkle	Playful accents
	Single note gliding down	Dismiss, collapse
	Warm slow swell	Reveal, expand
	Breathy quiet swell	Dense lists
	Crisp instant tick	Nav and menu hover
	Dull muted knock	Pointer down
	Brighter springy tick	Pointer up
	Mechanical click-clack	Switches, tabs, selection chips
	Warm three-note confirmation	After an action succeeds
	Soft knock and descending refusal	Recoverable errors
	Papery flick with a glass tick	Pages, galleries, carousels
	Brief unresolved rising shimmer	User-initiated work starting
	Focus tick with a harmonic bloom	Image or content loaded

Declarative attributes

Add a data-cuelume-* attribute to any element; SoundProvider calls bind() once in the root layout and delegates every interaction for the whole document — no per-component wiring needed. Leave the value empty for the default sound, or set it to any sound name.

Prop	Type	Default
data-cuelume-hover	pointerenter	chime
data-cuelume-press	pointerdown	press
data-cuelume-release	pointerup	release
data-cuelume-toggle	click	toggle

Imperative playback

For sounds tied to async state (a fetch resolving, a form action succeeding or failing) rather than a raw pointer event, call play() directly.

Where sounds are used

Every element currently wired to a cuelume sound across the app, kept in sync manually with the code — this table does not update itself when the code changes.

Page	Element	Sound
/setup	Back button	hover: tick · press + release
/setup	Info "i" buttons	hover: tick
/setup	Language pills, challenge/industry chips, prompt picks	toggle
/setup	Info modal close (×)	droplet
/setup	Generate button	press + release · loading/success/error on request
/setup	Start button	press + release
/interview	Mic toggle (Start/Stop recording)	toggle
/interview	Send	press + release
/interview	Grade my interview	press + release
/interview	Notes panel expand/collapse	toggle
/interview	Rate-limit banner / mic permission denied	error
/grading	Grading failed state	error
/results	New session (header + bottom CTA)	press + release
/results	Sign out · Sign in with Google	press + release
/results	Recommendation "Show more/less"	toggle
/results	Transcript accordion	toggle
/results	Vacancy card (opens job posting)	hover: tick · press + release
/dashboard	New session, Save profile	press + release
/dashboard	Account menu trigger	toggle
/dashboard	Settings menu item	hover: tick
/dashboard	Sign out menu item	press + release
/dashboard	Interview list row	hover: tick · press + release
/dashboard	Profile save	press + release · success/error on save
/ (landing)	Logo, nav links	hover: tick
/ (landing)	Language toggle, Solution tab switcher	toggle
/ (landing)	All "/setup" CTAs (Navbar, Hero, DarkDemo, MetricAccent, FinalCTA)	press + release
/ (landing)	FAQ accordion	toggle
/ (landing)	Product Hunt banner link	hover: tick · press + release

Need a design system like this?

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.