Sounds

When a sound earns its place#

One click, one hit: a sound confirms something the eye may have missed, a message sent, a payment through, a file dropped in place. Give one to moments that finish something, never to hovering, scrolling or typing. Keep them quiet and short, and let the user turn them off.

They are built to be felt more than heard: a crisp click on top, a short woody body underneath, gone in under a tenth of a second. Every sound is a few oscillators and filtered noise, drawn in about a kilobyte of code. Nothing loads until the first one plays, and the audio engine waits for the user's first click as browsers require. Thirteen sounds ship free in @/lib/sound; the other twenty-four live in the Pro soundLibrary.

Usage#

Wrap the app in SoundProvider and wire enabled to a user setting. Components call useSound from their handlers; outside a provider it stays silent, so a component can carry sounds without forcing them on anyone.

The Pro library#

Pass soundLibrary to the provider and its sounds are called by name like the free ones.

import { SoundProvider } from "@/lib/sound"
import { soundLibrary } from "@/components/ui/sound-library"

<SoundProvider library={soundLibrary}>{children}</SoundProvider>

const send = useSound("send")

Your own sounds#

A sound is a recipe of voices on a timeline. Start from one in the grid and change a pitch, a decay or a filter until it fits your product.

import { defineSound } from "@/lib/sound"

export const stamp = defineSound("actions", (s) => {
  s.thock({ pitch: 150, bright: 1800, length: 1.2 })
  s.thock({ pitch: 300, bright: 3600, at: 0.04, gain: 0.5 })
})

<SoundProvider library={{ stamp }}>{children}</SoundProvider>

API reference#