King Gym
Сайт-маніфест для фітнес-клубу, який не хоче бути «ще одним залом». 3D-сцена з золотими статуетками — і коротка обіцянка: «місце твоєї сили».
King Gym — преміальний фітнес-клуб, що відкривався у новому форматі: невелика площа, висока ціна абонементу, фокус на персональній роботі з тренером. Конкуренція в ніші — десятки залів із візуалом «лофт + штанга + знижка 20%». Жодного простору для дрібного диференціювання.
Замовник сформулював інакше: «я не хочу пояснювати, чому ми дорогі. Я хочу, щоб людина це відчула на першому екрані». Це не задача для копірайтера. Це задача для сцени.
Шість тижнів — від першого скетчу до запуску. Із них два — на моделювання й оптимізацію 3D-сцени до 60 fps на середньому смартфоні.
Сцена замість
пояснення
Перший екран сайту — чорний простір із зірками й золотою сценою-подіумом. На ній — пʼять статуеток-обелісків (один великий і чотири менших, як на нагородженні). Поряд — заголовок «Місце твоєї сили». Більше нічого. Жодного списку послуг, жодного «вже 10 років», жодних «телефон / адреса».
Цього достатньо, щоб людина зрозуміла позиціонування за пів секунди. Все решта — нижче, у спокійному темпі скролу: формати тренувань, тренери, абонементи, простір. Але вхідне враження — це сцена.
3D-герой замість фото
Three.js-сцена з реалтайм-освітленням. Камера повільно обертається — користувач відчуває обʼєм без жодного скролу.
Один заголовок замість пʼяти
«Місце твоєї сили». Жодних додаткових слоганів, USP-блоків, бордюрів. Один речення = один меседж.
Тренери як обличчя
У залі працює сімʼя — на сайті кожен тренер має сторінку з біографією, спеціалізацією та контактом у Telegram.
Ціна — у самому низу
Сторінка абонементів — чесна, без «акцій». До неї треба доскролити. Це фільтр на вході.
Чорне
і золото
Палітра — два кольори. Чорне (#050505) як основа всього. Золото (#D4AF37) — тільки на сцені, на номерах розділів і в одному курсиві в заголовку. Більше ніяких акцентів. Білий текст тримає всю функціональну читабельність.
Шрифт — широкий технічний гротеск для заголовків (King має звучати масштабно), компактний серіф із курсивом для одного слова в заголовку (Сила). Цей контраст «технічне + людське» — і є вся типографічна логіка.
Місце твоєї сили
Aa
Neue Machina · Display / Instrument Serif Italic · AccentПреміум — це не сума. Преміум — це впевненість на першому екрані, що тут не торгуються.
Сцена, що не
лагає на мобільному
Сцена змодельована в Blender (низькополігональна геометрія — близько 8К трикутників на всі обʼєкти разом), запечена в один GLB-файл вагою 320 КБ. Освітлення — три точкові джерела + envMap (HDR 1К). Матеріал золота — PBR з підвищеним metalness і власною normal-картою «грубої виливки».
На рендерингу — Three.js із власним composer: bloom для блиску золота, vignetting для глибини, лагідний noise для уникнення «ідеально чистого CGI». На слабких пристроях (detect через WebGL caps) сцена замінюється на статичне PNG — користувач не отримує сповільнення.
Камера обертається за допомогою requestAnimationFrame у вузькому радіусі ±8°. Користувач не має керування — це режисура, а не іграшка.
Vanilla,
але сильна
HTML + CSS + ванільний JS-модуль. Жодного React, жодного фреймворку — сайт із 4 секцій не потребує SPA-двигуна. Three.js для сцени, GSAP для timeline-анімацій тексту, Lenis для скрол-інерції. Хостинг — статика на Cloudflare Pages.
Перший місяць
Клуб не дав знижки. Не запустив акцію. Не зробив «приведи друга — отримай місяць безкоштовно». Сайт зробив роботу інакше: відсіяв тих, хто шукав дешево, і притягнув тих, хто шукав місце.
Перший раз бачу сайт, після якого не хочеться торгуватись.
Хочеш такий же результат для свого бізнесу? Дивись послугу «Розробка лендінгу» →
