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 кБ у стисненому вигляді й відповідає швидше за десяту частку секунди. Сайт, який говорить про швидкість, зобов'язаний бути швидким, навіть коли це жарт.
Ближчий погляд
Натисни на кадр, і він відкриється на весь екран.