# General Translation Blog: Daniel White : des interfaces qui suivent la physique du son URL: https://generaltranslation.com/fr/blog/daniel-white.mdx Docs index: https://generaltranslation.com/llms.txt Description: Pourquoi Daniel tient aux petites touches qui donnent vie à une page, et comment il apporte un nouveau sens au design d’interface 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/fr/blog/supporting-open-source-software). Nous sommes ravis d’annoncer le prochain projet lauréat de nos bourses open-source : [Cuelume](https://cuelume.dev/), créé par [Daniel White](https://www.danielwhite.uk/). Cuelume est une **petite bibliothèque de sons d’interaction pour le web, sans aucune dépendance**. Elle propose quatorze signaux sonores conçus pour les interfaces utilisateur, qu’il s’agisse d’interactions comme *tap*, *type* et *open* ou d’états comme *success*, *warning* et *loading*. Là où la plupart des sons d’IU sont de simples enregistrements rejoués, chaque clic de Cuelume est un objet frappé, synthétisé en temps réel. **Aucun fichier audio à charger**, rien à installer : la bibliothèque ne pèse que 9 ko, minifiée et compressée avec gzip. Cuelume est **utilisé dans [fx](https://github.com/vercel-labs/fx) de Vercel** et a été salué par des designers de Supabase, PostHog, Interfaces, Intercom et Nuxt. Il compte **2 000 étoiles sur GitHub**. Il est également disponible sous forme de [plugin Claude Code](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md), grâce auquel les développeurs interagissent plus naturellement avec leurs agents. Design engineer basé au Royaume-Uni et créateur de Cuelume. Daniel White, le créateur de Cuelume, est un design engineer basé au Royaume-Uni. Il nous a accordé l’une de ses toutes premières interviews pour parler du sens qui manque au web (qui est aussi le plus rapide de nos sens !), de ce qui rend une page web vivante, de son parcours jusqu’au métier de design engineer, et de la manière dont il a conçu une bibliothèque qui apporte un retour sonore pour rendre les interfaces plus humaines. ## Démonter la machine Daniel avait onze ans lorsqu’il a voulu, pour la première fois, savoir ce qui se passait à l’intérieur de l’ordinateur posé sur le bureau familial. À l’en croire, il a développé un moteur de recherche reposant sur l’API de Google, puis un moteur physique 2D en Java pour simuler la façon dont de petits objets tombent et rebondissent. Cette première expérience préfigure déjà sa volonté de **reproduire la physique du monde réel sur le web.** « J’ai toujours voulu comprendre comment les choses fonctionnent de l’intérieur », explique-t-il. « Ça m’a fait réfléchir : si le cerveau humain peut créer et apprendre au fil du temps, **ce que l’on peut créer est pratiquement infini.** » C’est la boucle de retour qui l’a attiré vers l’ingénierie front-end. « Je suis tombé amoureux de l’idée de pouvoir modifier de petits détails dans le code et de voir aussitôt ces changements prendre vie sur le web. » Son premier poste d’ingénieur, il l’a occupé chez un croisiériste. « J’ai conçu le site web que les gens utilisaient pour trouver une croisière et en demander le prix », [écrit-il](https://www.danielwhite.uk/voyage). Il s’est attaché à alléger le chargement des pages, à mettre en place des promotions sécurisées, à aider les utilisateurs à obtenir des devis, et a passé « quelques semaines heureuses à apprendre à un ordinateur à lire des plans de ponts et à y repérer les cabines ». Interrogé sur l’apparition relativement récente du métier de Design Engineer, Daniel y voit l’évolution naturelle de son travail et de celui de beaucoup d’autres. « J’ai toujours été davantage ingénieur que designer. Quand on fait du front-end, on penche vers le design, parce qu’on doit réfléchir davantage à l’IU et à l’UX », explique-t-il. Au début, les designers lui remettaient des fichiers Figma qu’il reproduisait. Avec le temps, **il a commencé à prendre lui-même une part croissante des décisions de design**, en travaillant notamment sur les micro-interactions et le retour. Au fil de ses choix de design, il s’est forgé un véritable système de jugement. « J’ai construit mon propre cerveau-mémoire en local sur mon ordinateur portable, avec toutes les décisions de design que j’ai jamais prises », raconte-t-il. « Désormais, il sait comment je pense, et il évolue de lui-même au fil du temps. » ## Le sens humain le plus rapide L’idée de Cuelume est née d’une réflexion sur **la façon dont les humains perçoivent une interface.** « Les humains goûtent, voient et entendent les choses », explique Daniel. « En matière d’IU et d’UX, nous pouvons voir, mais l’ouïe est le sens qui manque au web. » La majeure partie de la communauté du design **a poussé très loin le détail visuel, en négligeant le détail sonore.** « Il nous manquait cette dimension qui permet au cerveau de se représenter les choses à partir du son lorsque nous interagissons avec le web », poursuit-il. Cuelume comble ce manque. Son explication est simple : c’est « une manière plus facile d’interagir avec le web grâce aux sons ». Le son n’est pas une simple décoration, mais **un retour cognitif essentiel**. « Quand vous appuyez sur un bouton et qu’il y a un clic, ou que le paiement échoue et que vous entendez un son, il est bien plus facile pour nous, humains, de comprendre ce qui se passe. On fait plus facilement le lien entre les choses », explique-t-il. Son intuition est étayée par de nombreuses études passionnantes, notamment sur **l’ouïe comme l’un de nos sens les plus aiguisés.** « On entend **de 20 à 100 fois plus vite qu’on ne voit** », [affirme](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain) le neuroscientifique Seth Horowitz. Les cellules du cerveau qui reçoivent les informations temporelles auditives peuvent s’activer plus rapidement que tout autre neurone, [jusqu’à 500 fois](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html) par seconde. Le son est perçu plus vite que l’image, car les circuits neuronaux en jeu sont plus simples. (Le pistolet de départ en est un [exemple célèbre](https://www.edge.org/conversation/david_m_eagleman-brain-time) : on lance les sprinteurs avec un coup de pistolet plutôt qu’avec un flash, car le temps de réaction est plus court.) D’un point de vue évolutif, le son est un indicateur de danger plus fiable : il fonctionne dans l’obscurité, dans toutes les directions et contourne même les obstacles. Côté recherche sur les interfaces, une étude de [Brewster et al.](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF) a montré que les boutons enrichis par le son aidaient les utilisateurs à corriger leurs erreurs nettement plus vite, et que les participants les préféraient. Le son est un domaine du web qui laisse beaucoup de place à ce que Daniel appelle la « **vitalité** ». Il a conçu Cuelume pour rendre davantage d’interfaces vivantes, avec des sons naturels et agréables associés à chaque interaction. « J’adore les petits détails sur le web, remarquer ces petites choses auxquelles les autres ne prêtent pas vraiment attention », confie-t-il. Ces détails sont les « **touches qui donnent vie à une page.** » ## La physique du son Cuelume n'utilise pas d'échantillons préenregistrés : chaque son est **synthétisé en direct au moment où il est joué**, grâce à la [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). Les sons sont modélisés mathématiquement d'après des objets frappés et des instruments, de façon à reproduire la physique du son émis par un objet réel : * **La note commence par une brève frappe**. Une vraie frappe produit une infime salve de bruit au tout début, à l'instant où le « maillet » touche l'objet. Cuelume ajoute une courte salve avant la note, si bien que le son évoque davantage une interaction réelle qu'une simple tonalité électronique qui se déclenche. * **Ondes sinusoïdales.** Le son est une variation de pression de l'air, qui prend la forme d'une onde lorsqu'on la représente dans le temps. Une onde sinusoïdale produit un son doux et régulier, à une seule fréquence ; la plupart des sons se composent de plusieurs ondes sinusoïdales de fréquences différentes. Or les synthétiseurs partent souvent d'autres formes d'onde (carrée, en dents de scie), au son plus bourdonnant et plus agressif. Cuelume n'utilise que des ondes sinusoïdales en dessous de la plage stridente (5 kHz). * **Les harmoniques aiguës s'éteignent plus vite.** Un objet qui résonne produit une hauteur principale accompagnée d'harmoniques, qui s'y superposent en hauteurs plus aiguës et plus faibles. Dans un objet réel, les aigus s'éteignent en premier et les graves résonnent le plus longtemps. Les calculs de Cuelume reproduisent ce comportement : les sons aigus s'estompent plus vite que les graves. * **Deux lectures successives ne sonnent jamais pareil.** Chaque lecture d'un signal fréquent est un peu plus forte ou plus douce que la précédente, si bien que deux taps ne sont jamais identiques. (Les signaux de résultat, eux, sont joués à l'identique à chaque fois.) Plusieurs de ces attributs sonores s'inscrivent dans une tradition bien plus ancienne : les « icônes auditives » théorisées par Bill Gaver chez Apple en 1986. Il [soutenait](https://research.gold.ac.uk/id/eprint/15059/) que l'information devait être transmise par des **sons du quotidien plutôt que par des bips musicaux** : plus familiers dans notre environnement, ils risquent moins de distraire ou d'agacer que des sons musicaux. Par ailleurs, les sons de synthèse sont désormais assez aboutis pour paraître réels. Des recherches [menées au MIT](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771) ont montré que les auditeurs **étaient incapables de distinguer les enregistrements synthétiques des enregistrements réels** ; les modèles synthétiques étaient si réalistes que les auditeurs pouvaient même évaluer le « matériau » et la « force d'impact » d'un son donné. Le design sonore, lorsqu'il existe, influence profondément notre expérience d'une interface. Il a même été démontré que le son **influence nos autres sens, en particulier le toucher**. Dans l’[illusion de la peau parcheminée](https://pubmed.ncbi.nlm.nih.gov/9512426/), des chercheurs ont observé que des personnes qui se frottaient les mains en entendant un son plus aigu déclaraient avoir les mains plus lisses et plus sèches (comme du parchemin). Dans l’[illusion de la main de marbre](https://pub.uni-bielefeld.de/record/2656678), des chercheurs ont observé qu’entendre un son plus fort tout en recevant de légers coups de marteau provoquait un raidissement des mains des participants et modifiait la conductivité de leur peau. Dans Cuelume, chacun des quatorze signaux fixes peut être décliné selon quatre [thèmes sonores](https://cuelume-site.pages.dev/docs/#set-theme). Les thèmes ajustent la personnalité ou le réalisme de chaque signal. ```ts import { play, setTheme } from "cuelume"; setTheme("mech"); // pièces usinées, sons secs setTheme("bubble"); // coups, gouttes, bouchons et glouglous setTheme("press"); // un clic sur une note grave, et un plus léger au relâchement setTheme("default"); // verre, bois, air, mailloches douces play("select", { theme: "bubble" }); // un moment espiègle, ponctuel ``` Cela dit, l’éventail de sons disponibles se limite aux combinaisons des quatorze signaux et des quatre thèmes. Il n’existe ni mode de conception sonore ni moyen de définir ses propres fréquences. « Si vous ajoutez un million de sons, cela pose d’abord un problème d’ingénierie, car il devient impossible de gérer les fréquences et les grains de chacun d’eux. Ce n’est plus maintenable », explique Daniel. « Je ne voulais pas non plus alourdir la bibliothèque avec des millions de sons. J’ai réfléchi aux cas d’usage les plus courants sur le web et à la manière dont ils pourraient sonner pour les utilisateurs. » Nous vous invitons à faire un tour sur le [site web](https://cuelume.dev) de Cuelume pour écouter les différentes palettes sonores ! Pour [utiliser Cuelume](https://cuelume.dev/docs#install), il suffit d’ajouter l’attribut `data-cuelume-*` à un élément et d’appeler `bind()`. ## Perspectives d’avenir « J’ai été vraiment ravi quand Cuelume a été intégré au produit fx de Vercel », raconte Daniel. « Vercel sponsorise aussi mes projets. C’est une équipe incroyable, quand on voit l’amour qu’elle porte à l’open source. » Il a récemment ajouté un plugin Claude Code pour Cuelume. « Beaucoup de gens m’ont écrit en message privé pour me dire que ça change tout, parce qu’ils peuvent désormais entendre quand leur agent travaille, quand il a terminé ou quand il a besoin d’eux. » Daniel souhaite aussi améliorer la façon dont Cuelume comprend **et même recommande des sons pour un produit**, même si le problème est épineux. Les sons devraient être choisis en fonction de « ce que votre produit cherche à accomplir ». Or, il est notoirement difficile d’évaluer un son, surtout avec l’IA. Daniel explore actuellement la création d’un ensemble de règles et de techniques permettant de représenter les fréquences, qu’un simple modèle de raisonnement pourrait appliquer. Daniel a récemment rejoint Attio en tant que Design Engineer. Sur son temps libre, il continue de maintenir Cuelume ainsi qu’une famille de petites bibliothèques d’IU sans dépendances : slot-text, drawably, cube-motion, springline, entre autres. Selon Daniel, **l’équilibre entre construire et décider a basculé**. « Le goût en design et la créativité comptent désormais bien plus que le travail d’ingénierie, parce qu’écrire le code devient de plus en plus secondaire », explique-t-il. « Devenir un bon ingénieur reste important, mais il est tout aussi important de développer son propre goût et de tracer sa propre voie. » Le goût, à l’entendre, ne s’acquiert pas en observant d’autres interfaces. Son conseil aux designers : **élargir leurs sources d’inspiration**. « Vous pouvez passer du temps à lire, à sortir, à vous inspirer de la nature, et à porter sur la vie un regard de designer. » C’est aussi ainsi qu’il explique ses propres choix, notamment celui de créer une bibliothèque de sons, un composant encore peu exploré du web. « Quand cent personnes me disent de faire comme ceci parce que ça marche, j’ai tendance à prendre une tout autre voie. Quand tout le monde regarde dans la même direction, j’essaie de trouver un chemin que personne n’a encore emprunté », confie-t-il. « Nous sommes des êtres humains, nous ne devrions pas nous contenter de suivre exactement le même chemin que tout le monde », ajoute-t-il. « L’important, c’est de **trouver quelque chose qui vous touche, vous, personnellement**. » ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.