Концепция инструмента
SubVitro—16 — это веб-синтезатор, который соединяет классический оркестр и электронный звук. Название означает «под стеклом» (с лат. sub vitro): классические инструменты лежат под матовой стеклянной плитой, а электронный интерфейс расположен поверх неё.Звук синтезатора состоит из двух слоёв: оркестрового (струнные, духовые, арфа и другие) и электронного (восемь синтезаторных тембров). Их можно плавно смешивать или разделить клавиатуру на электронную и оркестровую половины. Звук дополняют фильтр, эффекты, арпеджиатор и ритм-секция с четырьмя паттернами.Инструменты под стеклом реагируют на музыку. Когда звучит нота, инструменты её класса поднимаются к стеклу и становятся резкими, а затем опускаются обратно. Удары ритма подбрасывают их, басы встряхивают плиту, а наклон устройства смещает их по стеклу. Композиция инструментов собирается заново при каждом посещении, поэтому синтезатор каждый раз выглядит уникально.Звук можно не только слышать, но и видеть.
«Музыка начинается там, где кончается оркестр»
Так звучит девиз проекта, который перефразирует известное выражение «Там, где кончаются слова, начинается музыка». Как музыка выражает то, что не передать словами, так синтезатор открывает звуки, которые недоступны акустическому оркестру.
Оркестр здесь — это сложившийся язык классического звучания со своими тембрами, правилами и пределами. Синтезатор начинается на этом пределе. Он не отменяет оркестр и не спорит с ним, а продолжает его: добавляет новые тембры, обработку и ритм.
В проекте эта идея показана буквально: классические инструменты лежат под стеклом как основа и источник. Электронный интерфейс расположен поверх, а стекло служит границей между ними. Когда звучит нота, соответствующий инструмент поднимается к стеклу: старое и новое на мгновение встречаются в одной точке.
Стиль инструмента
Также для проекта я решил отдельно продумать дизайн сайта. Так как мой синтезатор сочетает в себе 1) современное прочтение, 2) опору на старые ручные синтезаторы и классику, мне было важно сохранить присущую классическим вещам «материальность». Решил я это сделать за счёт анимации веб-синтезатора, которая запускается при прокрутке страницы вниз. У пользователя создаётся ощущение, будто перед ним реальный продукт, а не сайт.
В качестве дизайнерского решения я выбрал нео-швейцарский стиль, потому что он строится на тех же принципах, что и сам синтезатор: порядок, ясность, ничего лишнего. Идейно этот стиль тоже оказался близок моему проекту. Нео-швейцарский стиль появился в середине XX века как универсальный язык без украшений, примерно тогда же, когда и электронная музыка. Строгая сетка, гротеск и контраст масштаба создают спокойную, почти техническую рамку, похожую на чертёж или маркировку.
Страница остаётся монохромной, чтобы единственным живым и цветным объектом был синтезатор с классическими инструментами под стеклом.
Дизайн не украшает музыку, а даёт ей пространство.
Как устроен инструмент
Функций в SubVitro—16 немного, и это осознанный выбор. В процессе изучения синтезатора мне особенно понравились некоторые старые версии машин — например, «Струнные машины» 1970-х (имитация оркестровых струнных через электронные генераторы), классические аналоговые синтезаторы, грувбоксы и прочие. Мне понравилась идея: каждый элемент отвечает за одну понятную идею. Нет слишком большого количества функций и каждая из них, прямо как роль в оркестре.
Так, у меня вышло: восемь ручек: INST перебирает все 11 инструментов, BAL смешивает оркестр и электронику, CUT задаёт яркость звука, ATK и REL — то, как нота начинается и затихает, FX управляет сразу эхом и реверберацией, VOL — громкостью, BPM — темпом. Кнопки запускают ритм, переключают четыре ритм-паттерна, включают арпеджиатор, сдвигают октаву и делят клавиатуру на электронную и оркестровую половины. Дисплей показывает только то, что вы сейчас крутите, поэтому лишние подписи и экраны не нужны. Так, появляется более приятный пользовательский опыт, так как пользователь чувствует максимальную отдачу инструмента от его действий.
Как в портативных грувбоксах, ограничение здесь работает на музыку: инструмент не требует изучения, на нём можно сразу играть — мышью, пальцем, с клавиатуры компьютера или с MIDI-клавиатуры, и уже получится готовая мелодия.
За простым интерфейсом большая логическая и структурная работа — в синтезаторе нет ни одного записанного звука. Это решение также сделано осознанно. Оркестр лежит под стеклом: его видно, но не слышно. Всё, что звучит, рождается заново в момент нажатия. Отказ от записей — это ещё и отказ от копии. Записанный звук всегда звучит одинаково, здесь же каждая нота создаётся впервые и больше не повторится в точности, прямо как в живом исполнении. Оркестр собран из звуковых волн прямо в браузере. Мелодию для ритм-секции синтезатор сочиняет сам, каждый раз заново, а эхо подстроено под темп и всегда попадает в ритм.
Минимализм поддерживает и саму идею проекта. Чем меньше элементов на стекле, тем лучше видно то, что под ним: классические инструменты, которые оживают от каждой ноты. Звучащие поднимаются к стеклу и становятся резкими, удары ритма их подбрасывают, а раскладка меняется при каждом заходе. Даже ручка CUT меняет не только звук, но и стекло: чем глуше звук, тем оно матовее. Интерфейс отходит на второй план, чтобы главным героем оставалась музыка и её связь с оркестром.
Голоса, эффекты и каналы
В SubVitro—16 два голоса: оркестровый (струнные STR, духовые WND, арфа HRP) и электронный (восемь синтезаторных тембров: SIN, SAW, SQR, BAS, CHO, ORG, NOI, SPC). Их можно плавно смешивать ручкой BAL или разделить клавиатуру на две половины кнопкой LYR: слева играет электроника, справа оркестр.
У каждого голоса своя цепочка: звук рождается из осцилляторов, проходит огибающую (ATK и REL задают, как нота начинается и затихает), затем фильтр CUT, который делает звук ярче или глуше. После этого звук идёт в общую цепочку эффектов: дисторшн, тремоло, эхо и реверберация, компрессор и лимитер на выходе. Эхо подстроено под темп (BPM), поэтому всегда попадает в ритм. Ручка FX управляет эхом и реверберацией одновременно. Ритм-секция «качает» звук: при ударе бочки остальные голоса на мгновение приглушаются.
Звук разведён по каналам: оркестровый голос звучит левее, электронный правее, ритм-секция стоит по центру, а реверберация стереофоническая. Поэтому два голоса слышны раздельно даже тогда, когда играют вместе.
Нейминг и структура интерфейса
Интерфейс состоит из трёх групп: ручки, кнопки и дисплей с клавиатурой. Все названия короткие, латиницей, в верхнем регистре, и называют функцию, а не эффект. Так нейминг читается как подписи на панели настоящего прибора.
Ручки (плавные параметры): INST, BAL, CUT, ATK, REL, FX, VOL, BPM. Кнопки (переключатели): ▶ запускает ритм, HSE / TRP / BRK / DUB переключают четыре ритм-паттерна (подпись PTN), ARP включает арпеджиатор, − OCT и + OCT сдвигают октаву, LYR делит клавиатуру (подпись EL | ORC). Дисплей показывает только ту ручку, которую вы сейчас крутите: её имя, значение и спектр звука. Поэтому лишние подписи и экраны не нужны. Под дисплеем находятся 13 клавиш, на компьютере они соответствуют клавишам a w s e d f t g y h u j k.
Скринкаст исполнения
Промпт-дизайн: работа с Claude
Идея, концепция и все решения в проекте мои. Я придумал синтезатор, где оркестр лежит под стеклом, а электроника расположена поверх него. Я же выбрал девиз, нео-швейцарский стиль, монохромную страницу и анимацию при прокрутке. Рефборд и прототип в Figma тоже мои. Код я не писал руками: его написал Claude Code по моим описаниям, а я был арт-директором и тестировщиком.
Поэтому главной работой был промпт-дизайн: нужно было объяснить нейросети задачу так, чтобы получить именно мой инструмент, а не типичный синтезатор.
- Сначала концепция, потом код.Первым промптом я не просил «сделай веб-синтезатор». Я описал идею: оркестр и электроника как два слоя, стекло как граница, а каждый звук должен рождаться заново, без записанных семплов. Из-за этого весь звук генерируется в браузере через Web Audio API.2. Ограничения как часть промпта. Я задал жёсткие рамки: всего восемь ручек, каждая отвечает за одну идею, а подписи короткие и в верхнем регистре, как у старых аппаратов. Если нейросеть предлагала добавить функцию, я отказывался, потому что минимализм был частью концепции.3. Референсы вместо общих слов. Я не писал «сделай красиво». Я описывал отсылки: струнные машины 1970-х, грувбоксы, нео-швейцарская типографика, и прикладывал рефборд из Figma. Так нейросеть понимала настроение, а не гадала.4. Маленькие итерации. Я двигался по шагам: сначала звук, потом ручки, потом ритм, потом стекло и физика предметов. После каждого шага я слушал и смотрел результат. Если звук был хрипящим или резким, я описывал, что именно слышу, а не как это исправить в коде. Так появились лимитер на выходе и эхо, подстроенное под темп.5. Я принимал решения, а не нейросеть. Claude предлагал варианты, но выбирал я: какой баланс между оркестром и электроникой, как должны двигаться инструменты под стеклом, насколько матовым должно быть стекло. Мерилом было одно: усиливает ли решение идею «музыка начинается там, где кончается оркестр».
Вывод: нейросеть быстро пишет код, но не знает, зачем он нужен. Проектом его делает идея, а промпт-дизайн — это способ передать её точно и не потерять по дороге.
