Geiger Performance Lab
Эксперимент с одним вопросом: как звучал бы плохо написанный код, если бы его было слышно? Ответ: счётчик Гейгера.
Всё снято с живой версии сайта, в том виде, в каком её видит посетитель.
Share Tech Mono
Заголовки и текстAa
- GeigerRegular 400
ABCDEFGHIJKLM abcdefghijklm 0123456789
Скругления
- 0 px
- 4 px
Кнопки: 0 px
Шкала текста
- AaТабло, 80 px
- AaH1, 32 px
- AaЛид, 24 px
- AaТекст, 16 px
Контраст
- 17,5 : 1текст на фоне, AAA
- 13,8 : 1надпись на кнопке, AAA
Тени
Свечение вместо тени
Контекст
Geiger Performance Lab студия сделала для себя в 2026 году, без клиента и брифа. Цифры вроде миллисекунд рендера ничего не говорят большинству людей, поэтому появилась идея перевести их в звук счётчика Гейгера. Получилось отдельное приложение на React, которое живёт рядом с остальными кейсами студии и само ссылается на chronicles.cz.
Проблема
О скорости сайта говорят числами, которые вне профессии не значат ничего. «Лишний перерендер компонента» никого не пугает. Щёлканье дозиметра пугает: его все знают по фильмам, и на него реагирует живот.
Ограничение
Сайт о скорости кода должен быть быстрым сам по себе. Значит, никакого бэкенда и лишних библиотек: всё состояние живёт в браузере на одной странице. Обычный проигрыватель звука спотыкается на частых повторах и режет звук. Поэтому щелчки дозиметра идут через пул заранее созданных аудиоэлементов, а сам файл клика один на все изотопы.
Решения: там, где они живут
Почему мы сделали именно так.
Частота щелчков в минуту, доза в μSv/h и температура ядра обновляются на лету и красят панель от зелёного к красному вместе с ростом нагрузки.
Скорость движения мыши в чёрной камере превращается в скорость щелчков дозиметра и в частицы на канвасе. Медленное движение почти не слышно, резкое разгоняет счётчик до предела.
Калий-40, уран-235, радий-226 и плутоний-239 выбираются из списка ISOTOPE FUEL. У каждого своя частота щелчков и своя кривая затухания, от бананового фона до почти мгновенного разгона к аварии.
Внизу справа само приложение подписывает себя и ссылается на chronicles.cz прямо из интерфейса.
Частота щелчков в минуту, доза в μSv/h и температура ядра обновляются на лету и красят панель от зелёного к красному вместе с ростом нагрузки.
Скорость движения мыши в чёрной камере превращается в скорость щелчков дозиметра и в частицы на канвасе. Медленное движение почти не слышно, резкое разгоняет счётчик до предела.
Калий-40, уран-235, радий-226 и плутоний-239 выбираются из списка ISOTOPE FUEL. У каждого своя частота щелчков и своя кривая затухания, от бананового фона до почти мгновенного разгона к аварии.
Внизу справа само приложение подписывает себя и ссылается на chronicles.cz прямо из интерфейса.
Что мы сделали и почему
Реактор перед запуском
Перед стартом две секунды держится тёмный экран с шуточной надписью «Shit code REACTor» и логотипом студии. Дальше шторки реактора открываются, и на экране появляется приборная панель.
Кнопки для показательной аварии
Кнопка «Core Runaway Test» запускает сто двадцать рендеров подряд без единого движения мышью. Частицы заливают камеру, осциллограф срывается в пилу, а индикаторы PWR, SYS, RAD и ALRM загораются красным.
Отдельная вёрстка для телефона
На телефоне шапка превращается в карточку с логотипом, названием и подписью студии. Три колонки с панелями встают одна под другой, и ни одна из них не потеряна.
Что получилось
Внутренний проект, который делаем в удовольствие и который заодно кое-что доказывает: всё приложение весит 78 кБ в сжатом виде и отвечает быстрее десятой доли секунды. Сайт, который говорит о скорости, обязан быть быстрым, даже когда это шутка.
Взгляд поближе
Нажми на кадр: он откроется на весь экран.