# General Translation Blog: Daniel White: interfacce che seguono la fisica del suono
URL: https://generaltranslation.com/it/blog/daniel-white.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Perché Daniel tiene ai dettagli che rendono viva una pagina, e come sta portando un nuovo senso nel design delle interfacce
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/it/blog/supporting-open-source-software).

Siamo felici di annunciare il prossimo progetto open-source a ricevere il nostro grant: [Cuelume](https://cuelume.dev/), creato da [Daniel White](https://www.danielwhite.uk/).

Cuelume è una **piccola libreria di suoni di interazione per il web, senza dipendenze**. La libreria include quattordici segnali sonori pensati per le interfacce utente: da interazioni come *tap*, *type* e *open* a stati come *success*, *warning* e *loading*. Se la maggior parte dei suoni delle UI è costituita da registrazioni riprodotte, in Cuelume ogni clic è un oggetto percosso sintetizzato in tempo reale. Non ci sono **file audio da caricare** né nulla da installare: la libreria pesa appena 9 kB, minificata e compressa con gzip.

<Carousel label="I quattordici segnali sonori" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/cues.webp?v=20261028-2300" alt="I quattordici segnali sonori di Cuelume divisi in due gruppi, interazioni (tap, type, select, toggle, open, close, navigate) e stati (success, error, warning, loading, ready, attention, count), ciascuno accanto al profilo del proprio volume nel corso della sua durata, con tap in verde" />
</Carousel>

Cuelume è **usato in [fx](https://github.com/vercel-labs/fx) di Vercel** e ha raccolto apprezzamenti da designer di Supabase, PostHog, Interfaces, Intercom e Nuxt. Conta **2.000 stelle su GitHub**. È disponibile anche come [plugin per Claude Code](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md), che gli sviluppatori usano per interagire con i propri agenti in modo più naturale.

<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 con base nel Regno Unito e creatore di Cuelume.
</Spotlight>

Daniel White, creatore di Cuelume, è un design engineer con base nel Regno Unito. Lo abbiamo incontrato in una delle sue primissime interviste per parlare del senso che manca al web (che è anche il più rapido dei sensi umani!), della vitalità delle pagine web, del percorso che lo ha portato a diventare design engineer e di come ha creato una libreria che fornisce un feedback uditivo per rendere le interfacce più umane.

## Smontare la macchina

Daniel aveva undici anni quando per la prima volta volle capire cosa succedesse dentro il computer sulla scrivania di casa. Stando al suo racconto, costruì un motore di ricerca basato sulle API di Google, poi un motore fisico 2D in Java per simulare il modo in cui piccoli oggetti cadono e rimbalzano. Già questo primo esperimento lascia intravedere la sua dedizione a **riprodurre la fisica del mondo reale sul web.**

«Ho sempre voluto capire come funzionano le cose dall&#39;interno», racconta. «Mi ha fatto pensare che, se il cervello umano può creare e imparare nel tempo, **le cose che si possono creare sono praticamente infinite.**»

A spingerlo verso l&#39;ingegneria front-end è stato il ciclo di feedback. «Mi sono innamorato dell&#39;idea di poter cambiare piccoli dettagli nel codice e vedere subito quelle modifiche prendere vita sul web.»

Il suo primo incarico professionale da ingegnere è stato presso una compagnia di crociere. «Ho realizzato il sito che le persone usavano per trovare una crociera e chiedere un preventivo», [scrive](https://www.danielwhite.uk/voyage). Si è occupato di alleggerire il caricamento delle pagine, gestire promozioni in modo sicuro e aiutare gli utenti a ottenere preventivi, e ha trascorso «alcune settimane felici a insegnare a un computer a leggere le piante dei ponti e a individuarvi le cabine».

Interpellato sulla comparsa relativamente recente del ruolo di Design Engineer, Daniel lo descrive come un&#39;evoluzione naturale del suo lavoro e di quello di molti altri.

«Sono sempre stato più ingegnere che designer. Quando lavori sul front-end, finisci per avvicinarti al design perché devi ragionare di più su UI e UX», spiega. All&#39;inizio i designer gli consegnavano file Figma e lui li riproduceva. Col tempo **ha iniziato a prendere sempre più decisioni di design in prima persona**, concentrandosi in particolare su micro-interazioni e feedback.

Le sue singole scelte di design si sono via via sedimentate in un sistema di giudizio più ampio. «Ho costruito in locale, sul mio portatile, una sorta di cervello-memoria con tutte le decisioni di design che abbia mai preso», racconta. «Ora sa come ragiono e si evolve da solo nel tempo.»

## Il senso umano più veloce

L&#39;idea di Cuelume è nata riflettendo su **come gli esseri umani percepiscono un&#39;interfaccia.** «Gli esseri umani gustano, vedono e sentono», ha detto Daniel. «Per quanto riguarda UI e UX, possiamo vedere, ma sul web manca l&#39;udito.»

Gran parte della comunità del design **ha curato a fondo i dettagli visivi, trascurando quelli sonori.**

«Ci è mancata quella componente che permette al cervello di visualizzare attraverso il suono quando interagiamo con il web», ha spiegato.

Cuelume colma questa lacuna. Daniel lo spiega in modo semplice: è «un modo più facile per interagire con il web attraverso i suoni».

Il suono non è solo decorazione, ma un **importante feedback cognitivo**. «Quando premi un pulsante e senti un clic, oppure il pagamento non va a buon fine e senti un suono, per noi esseri umani è molto più facile capire cosa sta succedendo. Riusciamo a collegare meglio le cose», ha detto.

La sua intuizione trova conferma in numerosi studi interessanti, in particolare quelli sull&#39;**udito come uno dei sensi umani più acuti.**

«Si sente da **20 a 100 volte più velocemente di quanto si veda**», [afferma](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain) il neuroscienziato Seth Horowitz. Le cellule cerebrali che ricevono gli input temporali uditivi possono attivarsi a una frequenza maggiore di qualsiasi altro neurone, [fino a 500 volte](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html) al secondo.

<Carousel label="Udito e vista" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/hearing.webp?v=20261028-2300" alt="Due barre: la vista a 1× e l’udito pieno fino a 20× e sfumato fino a 100×, fonte Seth Horowitz, NPR, 2015" />
</Carousel>

Il suono viene elaborato più velocemente della vista perché i circuiti neurali sono più semplici. (Lo sparo di partenza è un [esempio famoso](https://www.edge.org/conversation/david_m_eagleman-brain-time): per far partire i velocisti si usa una pistola anziché un lampo, perché il tempo di reazione è più breve.) Dal punto di vista evolutivo, il suono è un segnale di pericolo più affidabile: funziona al buio, in ogni direzione e persino oltre gli ostacoli.

Quanto alla ricerca specifica sulle interfacce, uno studio di [Brewster et al.](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF) ha rilevato che i pulsanti arricchiti da suoni aiutavano gli utenti a correggere gli errori in modo significativamente più rapido ed erano preferiti dai partecipanti.

Il suono è un ambito del web che lascia molto spazio a ciò che Daniel chiama «**vitalità**». Ha creato Cuelume perché sempre più interfacce risultino dinamiche, con suoni naturali e appaganti associati a ogni interazione.

«Adoro i piccoli dettagli sul web, notare quelle piccolezze a cui gli altri non farebbero molto caso», ha detto. Questi dettagli sono i «**tocchi che rendono viva una pagina.**»

## La fisica del suono

Cuelume non usa campioni preregistrati: ogni suono viene **sintetizzato in tempo reale al momento della riproduzione**, tramite la [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). I suoni sono modellati matematicamente su oggetti percossi e strumenti musicali, e la fisica del suono prodotto da un oggetto reale viene replicata attraverso la matematica:

* **La nota inizia con un breve colpo**. Un colpo reale produce una minuscola raffica di rumore proprio all&#39;inizio, nell&#39;istante in cui il “martelletto” tocca la superficie. Cuelume aggiunge una breve raffica prima dell&#39;altezza tonale, così il suono ricorda più un&#39;interazione reale che un tono elettronico che si accende.

<Carousel label="Il colpo" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/strike.webp?v=20261028-2300" alt="I primi 12 ms del segnale di successo su un'unica scala: la raffica di rumore verde si esaurisce in circa 3 ms mentre la traccia bianca dell'altezza tonale sta ancora crescendo" />
</Carousel>

* **Onde sinusoidali.** Il suono è pressione dell&#39;aria che, rappresentata nel tempo, assume la forma di un&#39;onda. Un&#39;onda sinusoidale è un suono morbido e uniforme con un&#39;unica frequenza; la maggior parte dei suoni è composta da più onde sinusoidali con frequenze diverse. I sintetizzatori, però, partono spesso da altre forme d&#39;onda (quadra, a dente di sega), dal suono più ronzante e aspro. Cuelume usa solo onde sinusoidali al di sotto della gamma stridula (5 kHz).

<Carousel label="Onde sinusoidali" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/sine.webp?v=20261028-2300" alt="Un'onda sinusoidale, una quadra e una a dente di sega ai 1.175 Hz di tap, ciascuna accanto alle sue frequenze da 0 a 10 kHz: la sinusoide è una sola linea, mentre la quadra e quella a dente di sega aggiungono armoniche che superano la linea dei 5 kHz" />
</Carousel>

* **Le armoniche più alte decadono più rapidamente.** Un oggetto che risuona produce un&#39;altezza principale accompagnata da armoniche, una serie di altezze più acute e più deboli sovrapposte. In un oggetto reale, le altezze più acute si spengono per prime, mentre quelle più gravi risuonano più a lungo. La matematica di Cuelume riproduce questo comportamento, così i toni acuti svaniscono più rapidamente di quelli gravi.

<Carousel label="Armoniche" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/overtones.webp?v=20261028-2300" alt="La nota di vetro del segnale ready e le sue due armoniche come bande su mezzo secondo: 392 Hz risuona per 0,50 s, e le sue armoniche più deboli a 1.082 Hz e 2.117 Hz terminano a 0,23 s e 0,14 s" />
</Carousel>

* **Le riproduzioni ripetute non suonano identiche.** Ogni riproduzione di un segnale frequente è leggermente più forte o più debole della precedente, quindi due tap non suonano mai uguali. (I segnali di esito suonano invece sempre allo stesso modo).

<Carousel label="Riproduzioni ripetute" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/repeats.webp?v=20261028-2300" alt="Otto riproduzioni di tap i cui picchi salgono e scendono entro linee tratteggiate al 12 percento sopra e sotto, sopra otto riproduzioni di success i cui picchi stanno su un'unica linea" />
</Carousel>

Diverse di queste caratteristiche sonore si rifanno a una tradizione molto più antica: le “icone uditive” (auditory icons), concetto coniato da Bill Gaver in Apple nel 1986. Gaver [sosteneva](https://research.gold.ac.uk/id/eprint/15059/) che le informazioni dovessero essere trasmesse con **suoni quotidiani anziché con bip musicali**, perché più familiari negli ambienti di tutti i giorni e meno inclini a distrarre o infastidire rispetto ai suoni musicali.

Inoltre, oggi le registrazioni sintetiche sono abbastanza avanzate da sembrare reali. Una ricerca [condotta al MIT](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771) ha dimostrato che gli ascoltatori **non erano in grado di distinguere le registrazioni sintetiche da quelle reali**: i modelli sintetici risultavano talmente realistici che gli ascoltatori riuscivano perfino a valutare il “materiale” e la “forza d&#39;impatto” di un determinato suono.

Il sound design, quando presente, incide profondamente sulla nostra esperienza di un&#39;interfaccia.

È stato persino documentato che il suono **influisce sugli altri sensi, in particolare sul tatto**. Nell&#39;[illusione della pelle di pergamena](https://pubmed.ncbi.nlm.nih.gov/9512426/), i ricercatori hanno osservato che le persone che si sfregavano le mani ascoltando un suono a frequenza più alta riferivano di percepirle più lisce e secche (come la pergamena). Nell&#39;[illusione della mano di marmo](https://pub.uni-bielefeld.de/record/2656678), i ricercatori hanno osservato che, se i partecipanti ascoltavano un suono più forte mentre venivano colpiti delicatamente con un martello, le loro mani si irrigidivano e la conduttività cutanea cambiava.

In Cuelume, ciascuno dei quattordici segnali fissi può essere elaborato tramite quattro [temi sonori](https://cuelume-site.pages.dev/docs/#set-theme). I temi regolano la personalità o il realismo di ogni segnale.

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

setTheme("mech"); // componenti meccanici secchi, lavorati a macchina
setTheme("bubble"); // colpi, gocce, tappi e sorsi
setTheme("press"); // un clic sopra una nota profonda e uno più leggero al rilascio
setTheme("default"); // vetro, legno, aria, mazzuoli morbidi

play("select", { theme: "bubble" }); // un singolo momento giocoso
```

<Carousel label="Quattro temi" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/themes.webp?v=20261028-2300" alt="Il segnale tap nei temi default, mech, bubble e press nello stesso intervallo di 0,2 secondi, con i clic sopra ciascuna linea e l'altezza del suono sotto: un tintinnio di vetro di circa 80 ms in default, un clic secco che svanisce entro 20 ms in mech, toni senza clic in bubble e, in press, un clic su una nota profonda che cresce gradualmente, con un clic più leggero 90 ms dopo, al rilascio" />
</Carousel>

Tuttavia, la gamma di suoni generabili si limita alle combinazioni dei quattordici segnali e dei quattro temi. Non esiste una modalità per sound designer né la possibilità di definire frequenze personalizzate.

«Se aggiungi un milione di suoni, innanzitutto si crea un problema di ingegneria, perché non riesci più a gestire le frequenze e i grani di ciascun suono. Diventa impossibile da mantenere», ha spiegato Daniel. «Inoltre non volevo appesantire la libreria con milioni di suoni. Ho pensato ai casi d&#39;uso più comuni sul web e a come potrebbero suonare alle persone.»

Vi invitiamo a visitare il [sito web](https://cuelume.dev) di Cuelume per ascoltare le diverse palette sonore! Per [usare Cuelume](https://cuelume.dev/docs#install), basta aggiungere l&#39;attributo `data-cuelume-*` a un elemento e chiamare `bind()`.

## Prospettive future

“Sono stato davvero felice quando Cuelume è stato integrato in product fx di Vercel”, ha detto Daniel. “Vercel sponsorizza anche i miei progetti. È un team straordinario per l’amore che dimostra verso l’open source.”

Di recente ha aggiunto un plugin di Claude Code per Cuelume.

“Molte persone mi hanno scritto in privato dicendo che è una svolta, perché ora possono sentire quando il loro agente sta lavorando, ha finito o ha bisogno di qualcosa da loro.”

Daniel vuole anche migliorare il modo in cui Cuelume comprende **e persino consiglia i suoni per un prodotto**, anche se si tratta di un problema complesso. I suoni andrebbero selezionati in base a “ciò che il tuo prodotto vuole ottenere”. Ma valutare un suono è notoriamente difficile, soprattutto con l’AI. Al momento Daniel sta esplorando la creazione di un insieme di regole e tecniche per tracciare le frequenze, che un semplice modello di ragionamento potrebbe applicare.

Daniel è entrato di recente in Attio come Design Engineer. Nel tempo libero continua a mantenere Cuelume, insieme a una famiglia di piccole librerie UI senza dipendenze: slot-text, drawably, cube-motion, springline e altre.

Secondo Daniel, **l’equilibrio tra costruire e decidere si è spostato**. “Oggi il gusto nel design e la creatività contano molto più del lavoro di ingegneria, perché scrivere il codice sta diventando sempre più irrilevante”, ha detto. “Diventare un bravo ingegnere è importante, ma è altrettanto importante sviluppare il proprio gusto e il proprio percorso.”

Il gusto, a suo dire, non si impara da altre interfacce. Il suo consiglio ai designer è di **ampliare le proprie fonti di ispirazione**. “Puoi dedicare tempo a leggere libri, stare all’aria aperta, cogliere spunti dalla natura e guardare la vita con gli occhi di un designer.”

È così che spiega anche le proprie scelte, compresa quella di creare una libreria di suoni, un componente del web ancora poco esplorato. “Quando cento persone mi dicono di fare in un certo modo perché funziona, tendo a prendere una strada completamente diversa. Quando tutti guardano in una direzione, cerco una strada che nessun altro ha mai provato”, ha detto.

“Siamo esseri umani e non dovremmo limitarci a seguire esattamente la stessa strada di tutti gli altri”, ha detto. “È importante **trovare qualcosa che tocchi davvero il tuo cuore**.”

## Sitemap

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