# General Translation Blog: Daniel White: interfaces que siguen la física del sonido
URL: https://generaltranslation.com/es/blog/daniel-white.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Por qué a Daniel le importan los detalles que dan vida a una página y cómo está incorporando un nuevo sentido al diseño de interfaces
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/es/blog/supporting-open-source-software).

Nos complace anunciar el siguiente proyecto de código abierto beneficiario de nuestras becas: [Cuelume](https://cuelume.dev/), creado por [Daniel White](https://www.danielwhite.uk/).

Cuelume es una **pequeña biblioteca de sonidos de interacción para la web, sin dependencias**. Incluye catorce señales diseñadas para interfaces de usuario: desde interacciones como *tocar*, *escribir* y *abrir* hasta estados como *éxito*, *advertencia* y *cargando*. Mientras que la mayoría de los sonidos de UI son grabaciones que se reproducen, en Cuelume cada clic es un objeto golpeado y sintetizado en tiempo real. **No hay archivos de audio que cargar** ni nada que instalar: la biblioteca ocupa solo 9 kB, minificada y comprimida con gzip.

<Carousel label="Las catorce señales" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/cues.webp?v=20261028-2300" alt="Las catorce señales de Cuelume en dos grupos, interacciones (tap, type, select, toggle, open, close, navigate) y estados (success, error, warning, loading, ready, attention, count), cada una junto al contorno de su volumen a lo largo de su duración, con tap en verde" />
</Carousel>

Cuelume **se usa en [fx](https://github.com/vercel-labs/fx) de Vercel** y ha recibido elogios de diseñadores de Supabase, PostHog, Interfaces, Intercom y Nuxt. Cuenta con **2000 estrellas en GitHub**. También se distribuye como [plugin de Claude Code](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md), que los desarrolladores usan para interactuar con sus agentes de forma más natural.

<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">
  Ingeniero de diseño afincado en el Reino Unido y creador de Cuelume.
</Spotlight>

Daniel White, creador de Cuelume, es un ingeniero de diseño afincado en el Reino Unido. Charlamos con él en una de las primeras entrevistas que ha concedido sobre el sentido del que carece la web (¡que además es el sentido humano más rápido!), la sensación de vida en las páginas web, su camino hasta convertirse en ingeniero de diseño y cómo creó una biblioteca que ofrece retroalimentación auditiva para que las interfaces resulten más humanas.

## Desmontar la máquina

Daniel tenía once años cuando sintió por primera vez la curiosidad de saber qué ocurría dentro del ordenador que había en el escritorio familiar. Según cuenta él mismo, creó un buscador sobre la API de Google y, después, un motor de física 2D en Java para simular cómo caen y rebotan los objetos pequeños. Ya este primer experimento anticipa su empeño por **reproducir la física del mundo real en la web.**

«Siempre quise entender cómo funcionan las cosas por dentro», afirma. «Me hizo pensar que, si el cerebro humano puede crear y aprender con el tiempo, **lo que puedes crear es prácticamente infinito.**»

Se decantó por la ingeniería front-end por el ciclo de retroalimentación. «Me enamoré de la idea de poder cambiar pequeños detalles en el código y ver al instante cómo esos cambios cobraban vida en la web».

Su primer puesto profesional como ingeniero fue en una empresa de cruceros. «Desarrollé el sitio web que la gente usaba para encontrar un viaje y consultar cuánto costaría», [escribe](https://www.danielwhite.uk/voyage). Trabajó en aligerar la carga de las páginas, gestionar promociones seguras y ayudar a los usuarios a obtener presupuestos, y pasó «unas semanas felices enseñando a un ordenador a leer planos de cubierta y localizar los camarotes en ellos».

Cuando se le pregunta por la aparición relativamente reciente del rol de Design Engineer, Daniel lo describe como una evolución natural de su trabajo y del de muchos otros.

«Siempre he sido más ingeniero que diseñador. Cuando trabajas en front-end, acabas acercándote al diseño porque tienes que pensar más en la UI y la UX», explica. Al principio, los diseñadores le entregaban archivos de Figma y él los reproducía. Con el tiempo, **empezó a tomar él mismo más decisiones de diseño**, centrándose en las microinteracciones y la retroalimentación.

Sus decisiones de diseño individuales se han ido acumulando hasta formar un sistema más amplio de criterio de diseño. «He construido mi propio cerebro de memoria en local, en mi portátil, con todas las decisiones de diseño que he tomado», cuenta. «Ahora sabe cómo pienso y evoluciona por sí solo con el tiempo».

## El sentido humano más rápido

La idea de Cuelume surgió al reflexionar sobre **cómo percibimos los humanos una interfaz.** “Los humanos saboreamos, vemos y oímos”, dijo Daniel. “En lo que respecta a la UI y la UX, podemos ver, pero el oído es el sentido que falta en la web”.

Gran parte de la comunidad del diseño **ha cuidado al máximo el detalle visual, pero ha pasado por alto el auditivo.**

“Nos ha faltado esa parte de dejar que el cerebro visualice a través del sonido cuando interactuamos con la web”, afirmó.

Cuelume viene a llenar ese vacío. Él lo explica de forma sencilla: es “una forma más fácil de interactuar con la web a través de sonidos”.

El sonido no es mera decoración, sino una **retroalimentación cognitiva importante**. “Cuando pulsas un botón y se oye un clic, o cuando falla un pago y suena un aviso, a nosotros, como humanos, nos resulta mucho más fácil entender lo que está pasando. Relacionamos mejor las cosas”, dijo.

Su intuición está respaldada por numerosos estudios interesantes, especialmente sobre **el oído como uno de nuestros sentidos más agudos.**

“Oyes entre **20 y 100 veces más rápido de lo que ves**”, [afirma](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain) el neurocientífico Seth Horowitz. Las células del cerebro que reciben la información temporal auditiva pueden activarse a un ritmo mayor que cualquier otra neurona: [hasta 500 veces](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html) por segundo.

<Carousel label="Oído y vista" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/hearing.webp?v=20261028-2300" alt="Dos barras: la vista en 1× y el oído sólido hasta 20× y difuminado hasta 100×, según Seth Horowitz, NPR, 2015" />
</Carousel>

El sonido se procesa más rápido que la visión porque los circuitos neuronales son más simples. (El pistoletazo de salida es un [ejemplo célebre](https://www.edge.org/conversation/david_m_eagleman-brain-time): para dar la salida a los velocistas se usa una pistola y no un destello, porque el tiempo de reacción es menor). Desde una perspectiva evolutiva, el sonido es un indicador de peligro más fiable: funciona en la oscuridad, en todas direcciones e incluso sorteando obstáculos.

En cuanto a la investigación específica sobre interfaces, un estudio de [Brewster et al.](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF) concluyó que los botones con refuerzo sonoro ayudaban a los usuarios a recuperarse de los errores bastante más rápido y que los participantes los preferían.

El sonido es un ámbito de la web con mucho margen para lo que Daniel llama “**vitalidad**”. Ha creado Cuelume para que más interfaces cobren vida, con sonidos naturales y agradables asociados a cada interacción.

“Me encantan los pequeños detalles de la web, fijarme en esos detalles a los que otras personas apenas prestarían atención”, dijo. Estos detalles son los “**toques que hacen que una página parezca viva**”.

## La física del sonido

Cuelume no utiliza muestras pregrabadas: cada sonido se **sintetiza en directo al reproducirse**, mediante la [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). Los sonidos se modelan matemáticamente a partir de objetos percutidos e instrumentos, de modo que la física del sonido de un objeto real se reproduce mediante cálculos:

* **La nota comienza con un breve golpe**. Un golpe real produce una diminuta ráfaga de ruido justo al principio, en el instante en que la “baqueta” toca el objeto. Cuelume añade una ráfaga breve antes del tono, así que suena más a una interacción real que a un tono electrónico que se activa.

<Carousel label="El golpe" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/strike.webp?v=20261028-2300" alt="Los primeros 12 ms de la señal de éxito en una misma escala: la ráfaga de ruido verde termina en unos 3 ms mientras la traza blanca del tono aún va creciendo" />
</Carousel>

* **Ondas sinusoidales.** El sonido es presión del aire, que se convierte en una onda al representarla en función del tiempo. Una onda sinusoidal es un sonido suave y uniforme con una sola frecuencia; la mayoría de los sonidos se componen de varias ondas sinusoidales de distintas frecuencias. Sin embargo, los sintetizadores suelen partir de otras formas de onda (cuadrada, diente de sierra), que suenan más zumbantes y ásperas. Cuelume solo usa ondas sinusoidales por debajo del rango estridente (5 kHz).

<Carousel label="Ondas sinusoidales" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/sine.webp?v=20261028-2300" alt="Una onda sinusoidal, una cuadrada y una de diente de sierra a los 1175 Hz de tap, cada una junto a sus frecuencias de 0 a 10 kHz: la sinusoidal es una sola línea, mientras que la cuadrada y la de diente de sierra añaden armónicos que sobrepasan la línea de 5 kHz" />
</Carousel>

* **Los armónicos más agudos se extinguen antes.** Un objeto que resuena produce un tono principal y, por encima, una serie de armónicos: tonos más agudos y más débiles. En un objeto real, los agudos se apagan primero y los graves resuenan durante más tiempo. Las matemáticas de Cuelume imitan este comportamiento, de modo que los tonos agudos se desvanecen más rápido que los graves.

<Carousel label="Armónicos" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/overtones.webp?v=20261028-2300" alt="La nota de cristal de la señal ready y sus dos armónicos como bandas a lo largo de medio segundo: 392 Hz resuena durante 0,50 s, y sus armónicos más débiles a 1082 Hz y 2117 Hz terminan a los 0,23 s y 0,14 s" />
</Carousel>

* **Las reproducciones repetidas no suenan idénticas.** Cada reproducción de una señal frecuente es un poco más fuerte o más suave que la anterior, así que dos toques nunca suenan exactamente igual. (Las señales de resultado suenan siempre igual).

<Carousel label="Reproducciones repetidas" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/repeats.webp?v=20261028-2300" alt="Ocho reproducciones de tap cuyos picos suben y bajan dentro de líneas discontinuas un 12 por ciento por encima y por debajo, sobre ocho reproducciones de success cuyos picos se sitúan en una misma línea" />
</Carousel>

Varios de estos atributos sonoros proceden de una tradición mucho más antigua: los “iconos auditivos” que acuñó Bill Gaver en Apple en 1986. Gaver [postuló](https://research.gold.ac.uk/id/eprint/15059/) que la información debía transmitirse con **sonidos cotidianos en lugar de pitidos musicales**, ya que resultan más familiares en el entorno diario y es menos probable que distraigan o molesten que los sonidos musicales.

Además, las grabaciones sintéticas ya son lo bastante avanzadas como para sonar reales. Una investigación [realizada en el MIT](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771) demostró que los oyentes **no eran capaces de distinguir las grabaciones sintéticas de las reales**; los modelos sintéticos sonaban tan realistas que los oyentes incluso podían juzgar el “material” y la “fuerza del impacto” de un sonido concreto.

El diseño sonoro, cuando existe, influye enormemente en cómo vivimos una interfaz.

Incluso se ha documentado que el sonido **afecta a nuestros otros sentidos, sobre todo al tacto**. En la [ilusión de la piel de pergamino](https://pubmed.ncbi.nlm.nih.gov/9512426/), los investigadores observaron que, si las personas se frotaban las manos mientras escuchaban un sonido de frecuencia más alta, afirmaban notarlas más suaves y secas (como un pergamino). En la [ilusión de la mano de mármol](https://pub.uni-bielefeld.de/record/2656678), los investigadores observaron que, al escuchar un sonido más fuerte mientras se les golpeaba suavemente con un martillo, las manos de los participantes se volvían más rígidas y la conductividad de su piel cambiaba.

En Cuelume, cada una de las catorce señales fijas puede reproducirse con cuatro [temas de sonido](https://cuelume-site.pages.dev/docs/#set-theme). Los temas ajustan la personalidad o el realismo de cada señal.

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

setTheme("mech"); // piezas secas y mecanizadas
setTheme("bubble"); // golpes, goteos, corchos y tragos
setTheme("press"); // un clic sobre una nota grave y otro más ligero al soltar
setTheme("default"); // vidrio, madera, aire, mazos suaves

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

<Carousel label="Cuatro temas" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/themes.webp?v=20261028-2300" alt="La señal tap en los temas default, mech, bubble y press durante los mismos 0,2 segundos, con sus clics encima de cada línea y su tono debajo: una resonancia de cristal de unos 80 ms en default, un clic seco que se desvanece en menos de 20 ms en mech, tonos sin clic en bubble y, en press, un clic sobre una nota grave que va creciendo, con un clic más suave 90 ms después, al soltarse" />
</Carousel>

Sin embargo, la variedad de sonidos que se pueden generar se limita a las combinaciones de las catorce señales y los cuatro temas. No hay un modo de diseñador de sonido ni forma de crear tus propias frecuencias.

“Si añades un millón de sonidos, para empezar se crea un problema de ingeniería, porque ya no puedes gestionar las frecuencias y los granos de cada sonido. Se vuelve imposible de mantener”, explicó Daniel. “Tampoco quería sobrecargar la biblioteca con millones de sonidos. Pensé en los casos de uso más habituales en la web y en cómo le sonarían a la gente”.

¡Te animamos a visitar el [sitio web](https://cuelume.dev) de Cuelume para escuchar las distintas paletas de sonido! Para [usar Cuelume](https://cuelume.dev/docs#install), solo tienes que añadir el atributo `data-cuelume-*` a un elemento y llamar a `bind()`.

## Próximos pasos

«Me alegré muchísimo cuando Cuelume se integró en el producto fx de Vercel», dijo Daniel. «Vercel también patrocina mis proyectos. Es un equipo increíble por el cariño que le tienen al código abierto».

Hace poco añadió un plugin de Claude Code para Cuelume.

«Mucha gente me ha escrito por mensaje directo diciéndome que esto lo cambia todo, porque ahora pueden oír cuándo su agente está trabajando, cuándo ha terminado o cuándo necesita algo de ellos».

Daniel también quiere mejorar la forma en que Cuelume entiende **e incluso recomienda sonidos para un producto**, aunque se trata de un problema complicado. Los sonidos deberían elegirse en función de «lo que tu producto intenta lograr». Pero evaluar el sonido es notoriamente difícil, sobre todo con IA. Ahora mismo, Daniel está explorando un conjunto de reglas y técnicas para representar frecuencias que un modelo de razonamiento sencillo pueda aplicar.

Daniel se incorporó recientemente a Attio como Design Engineer. En su tiempo libre sigue manteniendo Cuelume, además de una familia de pequeñas bibliotecas de UI sin dependencias: slot-text, drawably, cube-motion, springline, entre otras.

Daniel considera que **el equilibrio entre construir y decidir ha cambiado**. «Hoy en día, el gusto por el diseño y la creatividad importan mucho más que el trabajo de ingeniería, porque escribir el código es cada vez más irrelevante», afirmó. «Llegar a ser un buen ingeniero es importante, pero también lo es desarrollar tu propio gusto y tu propio camino».

Según él, el gusto no se aprende de otras interfaces. Su consejo para los diseñadores es **ampliar sus fuentes de inspiración**. «Puedes dedicar tiempo a leer libros, salir al aire libre, inspirarte en la naturaleza y ver la vida con ojos de diseñador».

Así explica también sus propias decisiones, como la de crear una biblioteca de sonidos, un componente poco explorado de la web. «Cuando cien personas me dicen que lo haga de cierta manera porque funciona, suelo tomar un camino completamente distinto. Cuando todos miran hacia un lado, intento encontrar un camino que nadie haya probado», dijo.

«Somos humanos y no deberíamos limitarnos a seguir exactamente el mismo camino que todos los demás», añadió. «Es importante **encontrar algo que te llegue al corazón a ti en particular**».

## Sitemap

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