# General Translation Blog: Daniel White: интерфейсы, подчиняющиеся физике звука
URL: https://generaltranslation.com/ru/blog/daniel-white.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Почему Дэниелу важны детали, которые оживляют страницу, и как он привносит в дизайн интерфейсов новое чувство
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/ru/blog/supporting-open-source-software).

Рады представить очередной проект, получивший наш грант для проектов с открытым исходным кодом: [Cuelume](https://cuelume.dev/) от [Daniel White](https://www.danielwhite.uk/).

Cuelume — это **компактная библиотека интерфейсных звуков для веба без зависимостей**. В неё входят четырнадцать звуковых сигналов для пользовательских интерфейсов: от действий вроде *tap*, *type* и *open* до состояний вроде *success*, *warning* и *loading*. Обычно звуки UI — это заранее записанные файлы, а в Cuelume каждый щелчок — это удар по объекту, синтезируемый в реальном времени. **Никаких аудиофайлов для загрузки** и ничего не нужно устанавливать: библиотека весит всего 9 кБ после минификации и сжатия gzip.

<Carousel label="Четырнадцать сигналов" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/cues.webp?v=20261028-2300" alt="Четырнадцать сигналов Cuelume в двух группах — взаимодействия (tap, type, select, toggle, open, close, navigate) и состояния (success, error, warning, loading, ready, attention, count); рядом с каждым — контур его громкости на протяжении звучания, tap выделен зелёным" />
</Carousel>

Cuelume **используется в [fx](https://github.com/vercel-labs/fx) от Vercel** и заслужил похвалу дизайнеров из Supabase, PostHog, Interfaces, Intercom и Nuxt. У проекта **2 000 звёзд на GitHub**. Кроме того, он доступен как [плагин для Claude Code](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md), благодаря которому разработчики общаются со своими агентами более естественно.

<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 из Великобритании, создатель Cuelume.
</Spotlight>

Daniel White, создатель Cuelume, — Design Engineer из Великобритании. В одном из его первых интервью мы поговорили о чувстве, которого не хватает вебу (и которое, кстати, самое быстрое из человеческих чувств!), о «живости» веб-страниц, о том, как он стал Design Engineer, и о том, как создал библиотеку, которая с помощью звуковой обратной связи делает интерфейсы более человечными.

## Разбирая машину на части

Дэниелу было одиннадцать, когда ему впервые захотелось узнать, что происходит внутри компьютера, стоявшего на семейном столе. По его словам, он написал поисковик на основе API Google, а затем — 2D-физический движок на Java, чтобы моделировать, как падают и отскакивают небольшие предметы. Уже в этом раннем эксперименте угадывается его стремление **воссоздавать реальную физику в вебе.**

«Мне всегда хотелось понять, как всё устроено изнутри, — говорит он. — И я подумал: если человеческий мозг способен со временем создавать и учиться, то **возможности для творчества практически безграничны**».

Во фронтенд-разработку его привела мгновенная обратная связь. «Я влюбился в саму идею: меняешь в коде какую-то мелочь — и сразу видишь, как эти изменения оживают в браузере».

Первой его профессиональной инженерной работой стала должность в круизной компании. «Я сделал сайт, на котором люди искали круиз и узнавали, сколько он будет стоить», — [пишет](https://www.danielwhite.uk/voyage) он. Он добивался того, чтобы страницы загружались быстрее, проводил защищённые промоакции, помогал пользователям получать расчёты стоимости и провёл «несколько счастливых недель, обучая компьютер читать планы палуб и находить на них каюты».

На вопрос о сравнительно недавно появившейся роли Design Engineer Дэниел отвечает, что это естественное развитие его работы — как и работы многих других.

«Я всегда был скорее инженером, чем дизайнером. Когда занимаешься фронтендом, тебя тянет к дизайну, потому что приходится больше продумывать UI и UX», — говорит он. Поначалу дизайнеры передавали ему файлы Figma, а он их воспроизводил. Со временем **он стал всё чаще сам принимать дизайнерские решения**, уделяя особое внимание микровзаимодействиям и обратной связи.

Из отдельных дизайнерских решений постепенно сложилась целая система представлений о дизайне. «Я создал у себя на ноутбуке собственный „мозг памяти“, где хранятся все дизайнерские решения, которые я когда-либо принимал, — говорит он. — Теперь он знает, как я мыслю, и со временем развивается сам».

## Самое быстрое из человеческих чувств

Идея Cuelume родилась из размышлений о том, **как люди воспринимают интерфейс.** «Люди ощущают вкус, видят и слышат, — говорит Daniel. — В UI и UX у нас есть зрение, а вот слуха в вебе не хватает».

Большая часть дизайн-сообщества **тщательно прорабатывает визуальные детали, упуская из виду звуковые.**

«Нам не хватало возможности дать мозгу „увидеть“ происходящее через звук, когда мы взаимодействуем с вебом», — говорит он.

Cuelume восполняет этот пробел. Сам Daniel объясняет просто: это «более лёгкий способ взаимодействовать с вебом с помощью звуков».

Звук — не просто украшение, а **важная когнитивная обратная связь**. «Когда вы нажимаете кнопку и слышите щелчок или когда платёж не прошёл и раздаётся звук, нам, людям, гораздо проще понять, что происходит. Нам легче связать одно с другим», — говорит он.

Его интуицию подтверждает целый ряд любопытных исследований, особенно тех, что касаются **слуха как одного из самых острых человеческих чувств.**

«Мы слышим **в 20–100 раз быстрее, чем видим**», — [говорит](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain) нейробиолог Seth Horowitz. Клетки мозга, отвечающие за временну́ю обработку слуховых сигналов, способны срабатывать чаще любых других нейронов — [до 500 раз](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html) в секунду.

<Carousel label="Слух и зрение" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/hearing.webp?v=20261028-2300" alt="Две полосы: зрение — 1×, слух — сплошная до 20× и с растровой заливкой до 100×; источник: Seth Horowitz, NPR, 2015" />
</Carousel>

Звук обрабатывается быстрее зрительных сигналов, потому что нейронные цепи здесь проще. (Классический [пример](https://www.edge.org/conversation/david_m_eagleman-brain-time) — стартовый пистолет: спринтеров запускают выстрелом, а не вспышкой, потому что на звук реагируют быстрее.) С эволюционной точки зрения звук — более надёжный сигнал опасности: он работает в темноте, доносится с любой стороны и даже огибает препятствия.

Если говорить об исследованиях именно интерфейсов, [Brewster и соавторы](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF) выяснили, что кнопки со звуковым сопровождением помогали пользователям значительно быстрее исправлять ошибки, и участники отдавали им предпочтение.

В звуковой части веба ещё много простора для того, что Daniel называет «**живостью**». Он создал Cuelume, чтобы больше интерфейсов ощущались динамичными, а каждому взаимодействию соответствовал естественный и приятный звук.

«Я обожаю мелкие детали в вебе — замечать те мелочи, на которые другие почти не обращают внимания», — говорит он. Эти детали — те самые «**штрихи, которые оживляют страницу**».

## Физика звука

Cuelume не использует заранее записанные сэмплы: звук **синтезируется в реальном времени в момент воспроизведения** с помощью [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). Звуки построены на математических моделях ударных предметов и инструментов — физика звучания реального предмета воспроизводится математически:

* **Нота начинается с короткого удара**. При настоящем ударе в самом начале, в момент касания «молоточка», возникает крошечный всплеск шума. Cuelume добавляет короткий всплеск перед основным тоном, и звук воспринимается как реальное взаимодействие, а не как включение электронного сигнала.

<Carousel label="Удар" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/strike.webp?v=20261028-2300" alt="Первые 12 мс сигнала success в одном масштабе: зелёный всплеск шума заканчивается примерно за 3 мс, пока белая кривая тона ещё нарастает" />
</Carousel>

* **Синусоиды.** Звук — это колебания давления воздуха, которые на графике во времени выглядят как волна. Синусоида — ровный, плавный звук одной частоты; большинство звуков складываются из нескольких синусоид с разными частотами. Однако синтезаторы часто берут за основу другие формы волны (прямоугольную, пилообразную), которые звучат жужжаще и резко. Cuelume использует только синусоиды и только ниже пронзительного диапазона (5 кГц).

<Carousel label="Синусоиды" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/sine.webp?v=20261028-2300" alt="Синусоидальная, прямоугольная и пилообразная волны на частоте tap 1175 Гц, каждая рядом со своим спектром от 0 до 10 кГц: синусоида — одна линия, а прямоугольная и пилообразная добавляют обертоны, выходящие за отметку 5 кГц" />
</Carousel>

* **Высокие обертоны затухают быстрее.** Звучащий предмет издаёт основной тон и обертоны — набор более высоких и тихих тонов над ним. У реального предмета высокие тоны затухают первыми, а низкие звучат дольше всего. Математическая модель Cuelume повторяет это поведение, поэтому высокие тоны угасают быстрее низких.

<Carousel label="Обертоны" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/overtones.webp?v=20261028-2300" alt="Стеклянная нота сигнала ready и два её обертона в виде полос на протяжении полсекунды: 392 Гц звучит 0,50 с, а более тихие обертоны 1082 Гц и 2117 Гц заканчиваются на 0,23 с и 0,14 с" />
</Carousel>

* **Повторы звучат по-разному.** Каждое воспроизведение частого сигнала чуть громче или тише предыдущего, поэтому два нажатия никогда не звучат одинаково. (Сигналы результата при этом всегда звучат одинаково.)

<Carousel label="Повторные воспроизведения" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/repeats.webp?v=20261028-2300" alt="Восемь воспроизведений tap, пики которых поднимаются и опускаются в пределах пунктирных линий на 12 процентов выше и ниже, над восемью воспроизведениями success, пики которых лежат на одной линии" />
</Carousel>

Многие из этих свойств звука восходят к куда более давней традиции — «звуковым иконкам» (auditory icons), термину, который Билл Гейвер (Bill Gaver) ввёл в Apple в 1986 году. Он [утверждал](https://research.gold.ac.uk/id/eprint/15059/), что информацию следует передавать **повседневными звуками, а не музыкальными сигналами**: они привычнее в обычной обстановке и реже отвлекают или раздражают, чем музыкальные звуки.

Кроме того, синтезированные записи сегодня настолько совершенны, что звучат как настоящие. Исследование, [проведённое в MIT](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771), показало, что слушатели **не смогли отличить синтезированные записи от реальных**; модели звучали настолько правдоподобно, что слушатели могли даже определить «материал» и «силу удара» конкретного звука.

Звуковой дизайн, если он есть, сильно влияет на восприятие интерфейса.

Задокументировано даже, что звук **влияет на другие наши чувства, прежде всего на осязание**. Изучая [иллюзию «пергаментной кожи»](https://pubmed.ncbi.nlm.nih.gov/9512426/), исследователи обнаружили: если потирать ладони друг о друга под звук более высокой частоты, людям кажется, что кожа рук стала более гладкой и сухой (как пергамент). Изучая [иллюзию «мраморной руки»](https://pub.uni-bielefeld.de/record/2656678), исследователи установили: если слегка постукивать участников по руке молоточком и одновременно проигрывать более громкий звук, рука становится скованнее, а электропроводность кожи меняется.

В Cuelume каждый из четырнадцати фиксированных сигналов можно пропустить через одну из четырёх [звуковых тем](https://cuelume-site.pages.dev/docs/#set-theme). Темы задают характер или степень реалистичности каждого сигнала.

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

setTheme("mech"); // сухие звуки точёных механических деталей
setTheme("bubble"); // стук, капли, хлопки пробок и бульканье
setTheme("press"); // щелчок поверх низкой ноты и более лёгкий — при отпускании
setTheme("default"); // стекло, дерево, воздух, мягкие молоточки

play("select", { theme: "bubble" }); // один игривый момент
```

<Carousel label="Четыре темы" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/themes.webp?v=20261028-2300" alt="Сигнал tap в темах default, mech, bubble и press на одном и том же отрезке в 0,2 секунды: щелчки над каждой линией, высота тона под ней. В default — стеклянный звон длительностью около 80 мс, в mech — сухой щелчок, затихающий за 20 мс, в bubble — тона без щелчка, а в press — щелчок поверх низкой нарастающей ноты и более лёгкий щелчок через 90 мс при отпускании" />
</Carousel>

Однако набор доступных звуков ограничен комбинациями четырнадцати сигналов и четырёх тем. Режима звукового дизайнера или возможности задать собственные частоты нет.

«Если добавить миллион звуков, то прежде всего возникает инженерная проблема: управлять частотами и гранулами каждого звука уже не получится. Поддерживать такое невозможно, — объяснил Дэниел. — Кроме того, я не хотел раздувать библиотеку миллионами звуков. Я подумал о самых распространённых сценариях в вебе и о том, как они могли бы звучать для людей».

Советуем заглянуть на [сайт](https://cuelume.dev) Cuelume и послушать разные звуковые палитры! Чтобы [начать пользоваться Cuelume](https://cuelume.dev/docs#install), просто добавьте к элементу атрибут `data-cuelume-*` и вызовите `bind()`.

## Планы на будущее

«Я был очень рад, когда Cuelume интегрировали в продукт Vercel fx, — рассказал Даниэль. — Кроме того, Vercel спонсирует мои проекты. У них невероятная команда, если говорить о том, как они любят open source».

Недавно он добавил плагин Cuelume для Claude Code.

«Многие писали мне в личку, что это меняет правила игры: теперь они слышат, когда их агент работает, когда он закончил или когда ему от них что-то нужно».

Даниэль также хочет научить Cuelume лучше понимать **и даже рекомендовать звуки для продукта**, хотя это непростая задача. Звуки нужно подбирать исходя из того, «чего пытается достичь ваш продукт». Но оценивать звук, как известно, крайне сложно — особенно с помощью ИИ. Сейчас Даниэль экспериментирует с набором правил и техник для построения графиков частот, которые могла бы применять простая рассуждающая модель.

Недавно Даниэль присоединился к Attio в качестве Design Engineer. В свободное время он продолжает поддерживать Cuelume, а также семейство небольших UI-библиотек без зависимостей: slot-text, drawably, cube-motion, springline и другие.

По мнению Даниэля, **баланс между созданием и принятием решений сместился**. «Дизайнерский вкус и креативность сейчас значат гораздо больше, чем инженерная работа, потому что само написание кода теряет значение, — говорит он. — Стать хорошим инженером важно, но не менее важно развивать собственный вкус и искать свой путь».

Вкус, по его словам, не перенимается у других интерфейсов. Дизайнерам он советует **расширять источники вдохновения**. «Можно читать книги, гулять, подмечать что-то в природе и смотреть на жизнь глазами дизайнера».

Этим же он объясняет и собственные решения — в том числе создание библиотеки звуков, ведь звук остаётся малоизученной составляющей веба. «Когда сотня людей советует мне делать так, потому что это работает, я обычно выбираю совершенно другой путь. Когда все смотрят в одну сторону, я стараюсь найти путь, по которому ещё никто не ходил», — говорит он.

«Мы люди, и нам не стоит просто идти тем же путём, что и все остальные, — добавляет он. — Важно **найти то, что откликается именно в вашем сердце**».

## Sitemap

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