# General Translation Blog: Daniel White: Interfaces that follow the physics of sound
URL: https://generaltranslation.com/en-GB/blog/daniel-white.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Why Daniel cares about the touches that make a page seem alive, and how he’s bringing a new sense to interface design
Authors: Taylor Fang
Published: 2026-10-28

*About General Translation Open-Source Grants*

The open-source ethos is core to what we do at General Translation. Our flagship internationalization (i18n) libraries are open source under the MIT license.

[generaltranslation/gt](https://github.com/generaltranslation/gt)

We’re now supporting other open-source developers who build and maintain software for the public good, starting with $15,000 in no-strings-attached funds as well as $75,000 in GT platform credits across fifteen developers. Nominations are rolling and still open! Read more [here](https://generaltranslation.com/en-GB/blog/supporting-open-source-software).

We’re excited to announce our next open-source grantee project: [Cuelume](https://cuelume.dev/), created by [Daniel White](https://www.danielwhite.uk/).

Cuelume is a **small, dependency-free library of interaction sounds for the web**. The library includes fourteen cues designed for user interfaces: from interactions like *tap*, *type*, and *open* to states like *success*, *warning*, and *loading*. While most UI sounds are recordings played back, in Cuelume every click is a struck object synthesised live. There are **no audio files to load** and nothing to install; the library is only 9 kB, minified and gzipped.

<Carousel label="The fourteen cues" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/cues.webp?v=20261028-2300" alt="Cuelume’s fourteen cues in two groups, interactions (tap, type, select, toggle, open, close, navigate) and states (success, error, warning, loading, ready, attention, count), each beside the outline of its loudness over its own length, with tap in green" />
</Carousel>

Cuelume is **used in Vercel’s [fx](https://github.com/vercel-labs/fx)** and has picked up compliments from designers at Supabase, PostHog, Interfaces, Intercom, and Nuxt. It has **2,000 stars on GitHub**. It also ships as a [Claude Code plugin](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md), which developers use to interact with their agents more naturally.

<Spotlight name="Daniel White" href="https://www.danielwhite.uk/" image="/static/blogs/daniel-white/portrait.webp?v=20261028-2300" project="Cuelume" projectUrl="https://cuelume.dev" projectIcon="/logos/cuelume.png" githubUrl="https://github.com/danielwh2/cuelume">
  Design engineer based in the UK and creator of Cuelume.
</Spotlight>

Daniel White, the creator of Cuelume, is a design engineer based in the UK. We caught up with him for one of his first-ever interviews to talk about the web’s missing sense (which is also the fastest human sense!), aliveness in web pages, his path to becoming a design engineer, and how he built a library that gives auditory feedback to make interfaces feel more human.

## Taking the machine apart

Daniel was eleven when he first wanted to know what went on inside the computer on the family desk. By his own account, he built a search engine on top of Google’s API, then a 2D physics engine in Java to simulate how small objects fall and bounce. Even this early experiment prefigures his dedication to **replicating real-world physics on the web.**

“I always wanted to understand how things work from underneath,” he said. “It got me thinking that if the human brain can create and learn over time, **the things you can create are basically infinite.**”

He gravitated towards front-end engineering because of the feedback loop. “I fell in love with this idea of being able to change little things in the code and immediately see those changes come to life on the web.”

His first professional engineering role was working for a cruise provider. “I built the website people used to find a voyage and ask what it would cost,” he [writes](https://www.danielwhite.uk/voyage). He worked on making pages lighter to load, running secure promotions, helping users get quotes, and spent “some happy weeks teaching a computer to read deck plans and find the cabins on them.”

When asked about the relatively recent advent of the Design Engineer role, Daniel describes it as a natural evolution of his and many others’ work.

“I’ve always been an engineer more than a designer. When you work with front-end, you lean towards design because you have to think through UI and UX more,” he said. Early on, designers handed him Figma files and he replicated them. Over time **he started making more of the design decisions himself**, specifically working on micro-interactions and feedback.

His individual design choices have accumulated into a broader design judgement system. “I’ve built my own memory brain locally on my laptop with all the design decisions I’ve ever made,” he said. “Now it knows how I think, and it self-evolves over time.”

## The fastest human sense

The idea for Cuelume came from thinking about **how humans take in an interface.** “Humans taste things, see things, and hear things,” Daniel said. “When it comes to UI and UX, we can see, but hearing is a missing sense on the web.”

Most of the design community has **gone deep on visual detail while overlooking auditory detail.**

“We’ve been missing that part of letting the brain visualise from the sound perspective when we interact with the web,” he said.

Cuelume fills this gap. His explanation is simple: it’s “an easier way to interact with the web through sounds”.

Sound is not just decoration, but **important cognitive feedback**. “When you press a button and there’s a click, or the payment failed and you hear a sound, it’s much easier for us as humans to understand what’s happening. We’re better able to relate things,” he said.

His intuition is supported by a slew of interesting research studies, especially regarding **hearing as one of our keenest human senses.**

“You hear anywhere from **20 to 100 times faster than you see**,” [says](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain) neuroscientist Seth Horowitz. The cells that receive auditory timing input in the brain can fire at a faster rate than any other neurons, [up to 500 times](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html) a second.

<Carousel label="Hearing and sight" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/hearing.webp?v=20261028-2300" alt="Two bars: sight at 1×, and hearing solid to 20× and dithered on to 100×, credited to Seth Horowitz, NPR, 2015" />
</Carousel>

Sound moves faster than vision because the neural circuitry is simpler. (The starting gun is a [famous example](https://www.edge.org/conversation/david_m_eagleman-brain-time); a gun is used to start sprinters rather than a flash, because the reaction time is faster.) From an evolutionary perspective, sound is a more reliable measure of danger: one that works in the dark, in every direction, and even around obstacles.

In terms of interface-specific research, a study by [Brewster et al.](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF) found that sonically enhanced buttons helped users recover from errors significantly faster and were preferred by participants.

Sound is one area of the web that has a lot of room for what Daniel calls “**aliveness**”. He’s built Cuelume so more interfaces can feel dynamic, with natural and satisfying sounds that map to each interaction.

“I absolutely love small details on the web, just noticing those little details that other people wouldn’t really pay much attention to,” he said. These details are the “**touches that make a page seem alive.**”

## Physics of sound

Cuelume does not use pre-recorded samples; a sound is **synthesised live when it plays**, using the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). The sounds are mathematically modelled on struck objects and instruments. The physics of sound from a real object are replicated mathematically:

* **The note starts with a brief strike**. A real strike has a tiny burst of noise at the very start, the instant the ‘mallet’ touches. Cuelume adds a short burst before the pitch, so it sounds more like a real interaction than an electronic tone turning on.

<Carousel label="The strike" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/strike.webp?v=20261028-2300" alt="The first 12 ms of the success cue on one scale: the green noise burst is over within about 3 ms while the white pitch trace is still swelling in" />
</Carousel>

* **Sine waves.** Sound is air pressure, which becomes a wave when plotted over time. A sine wave is a smooth, even sound with one frequency; most sounds are composed of multiple sine waves with different frequencies. But synthesisers often start with other wave shapes (square, sawtooth), which sound more buzzy and harsh. Cuelume uses only sine waves under the shrill range (5 kHz).

<Carousel label="Sine waves" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/sine.webp?v=20261028-2300" alt="A sine, a square and a sawtooth wave at tap’s 1,175 Hz, each beside its frequencies from 0 to 10 kHz: the sine is one line, while the square and the sawtooth add overtones that run past the 5 kHz line" />
</Carousel>

* **Higher overtones decay faster.** An object reverberating produces a main pitch plus overtones, a stack of higher, quieter pitches on top. In a real object, the higher pitches die out first and the lower pitches ring longest. Cuelume’s maths copies this behaviour, so the high tones fade more quickly than the low tones.

<Carousel label="Overtones" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/overtones.webp?v=20261028-2300" alt="The ready cue’s glass note and its two overtones as bands over half a second: 392 Hz rings for 0.50 s, and its quieter overtones at 1,082 Hz and 2,117 Hz end at 0.23 s and 0.14 s" />
</Carousel>

* **Repeated plays don’t sound identical.** Every play of a frequent cue is a little harder or softer than the last, so two taps don’t sound identical. (Outcome cues play the same every time.)

<Carousel label="Repeated plays" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/repeats.webp?v=20261028-2300" alt="Eight plays of tap whose peaks rise and fall within dashed lines at 12 per cent above and below, over eight plays of success whose peaks sit on one line" />
</Carousel>

Several of these sound attributes owe to a much older tradition, namely the ‘auditory icons’ coined by Bill Gaver at Apple in 1986. He [posited](https://research.gold.ac.uk/id/eprint/15059/) that information should be conveyed with **everyday sounds rather than musical beeps**: because these are more familiar in everyday environments, and less likely to be distracting or annoying compared to musical sounds.

Further, synthetic recordings are now advanced enough to sound real. Research [conducted at MIT](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771) has demonstrated that listeners **were unable to distinguish synthetic from real recordings**; synthetic models sounded realistic enough that listeners could even judge the ‘material’ and ‘impact force’ of a specific sound.

Sound design, if it exists, greatly affects our experience of an interface.

Sound has even been documented **to affect our other senses, most notably touch**. In the [parchment-skin illusion](https://pubmed.ncbi.nlm.nih.gov/9512426/), researchers found that rubbing your hands together while hearing a higher-frequency sound led people to report that their hands felt more smooth and dry (like parchment). In the [marble-hand illusion](https://pub.uni-bielefeld.de/record/2656678), researchers found that hearing a louder sound while being gently hit with a hammer led participants’ hands to stiffen and change skin conductivity.

In Cuelume, each of the fourteen fixed cues can be passed through four [sound themes](https://cuelume-site.pages.dev/docs/#set-theme). Themes tune the personality or realism of each cue.

```ts
import { play, setTheme } from "cuelume";

setTheme("mech"); // dry, machined parts
setTheme("bubble"); // knocks, drips, corks, and gulps
setTheme("press"); // a click over a deep note, and a lighter one letting go
setTheme("default"); // glass, wood, air, soft mallets

play("select", { theme: "bubble" }); // one playful moment
```

<Carousel label="Four themes" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/themes.webp?v=20261028-2300" alt="The tap cue in the default, mech, bubble and press themes over the same 0.2 seconds, its clicks above each line and its pitch below: a glass ring of about 80 ms in default, a dry click gone within 20 ms in mech, tones and no click in bubble, and in press a click over a deep note that swells in, with a lighter click 90 ms later as it lets go" />
</Carousel>

However, the array of sounds that can be generated is limited to combinations of the fourteen cues and four themes. There is no sound designer mode or way to roll your own frequencies.

“If you add one million sounds, first of all it adds an engineering problem, because then you cannot manage the frequencies and grains for each of the sounds. It becomes impossible to maintain,” Daniel explained. “I also didn’t want to bloat the library with millions of sounds. I thought about the most-used use cases on the web and how they might sound for people.”

We encourage you to try out the Cuelume [website](https://cuelume.dev) to hear the different sound palettes! To [use Cuelume](https://cuelume.dev/docs#install), simply add the `data-cuelume-*` attribute to an element and call `bind()`.

## Future directions

“I was really happy when Cuelume was integrated into Vercel’s product fx,” Daniel said. “Vercel also sponsors my projects. It’s a crazy good team in terms of the love they show to open source.”

He recently added a Claude Code plugin for Cuelume.

“A lot of people have DMed me saying this is a game changer, because now they can hear when their agent is working, is finished, or needs something from them.”

Daniel also wants to improve how Cuelume understands **and even recommends sounds for a product**, although it’s a tricky problem. Sounds should be curated based on “what your product is trying to achieve”. But it’s notoriously difficult to judge sound, especially with AI. Daniel’s current exploration involves creating a set of rules and techniques to plot frequencies, which a simple reasoning model could implement.

Daniel recently joined Attio as a Design Engineer. He continues to maintain Cuelume in his free time as well as a family of small, dependency-free UI libraries: slot-text, drawably, cube-motion, springline, and others.

Daniel’s view is that the **balance between building and deciding has shifted**. “Design taste and creativity matter way more than engineering work does now, because writing the code is becoming more and more irrelevant,” he said. “Becoming a good engineer is important, but it’s also important to develop your own taste and path.”

Taste, in his telling, isn’t learned from other interfaces. His advice for designers is to **widen their sources of inspiration**. “You can spend time reading books, going outside, picking things up from nature, and seeing life through a designer’s eyes.”

It’s also how he explains his own choices, including building a sound library, which is an underexplored component of the web. “When a hundred people tell me to do it this way because it works, I tend to go a completely different path. When everyone is looking in one direction, I try to find a path no one else tried,” he said.

“We’re humans and we shouldn’t just follow the exact same path as everyone else,” he said. “It’s important to **find something that touches your heart specifically**.”

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.