[10]

Kabizzu

2026

Клиент

Piton Studios

Год

2026

Объём

Web design, scroll animation, front-end

Роль

Design / Development

Сайт онлайн

Открыть сайт ↗

§ Детали проекта

Kabizzu — Концепт-сайт для студии архитектуры и интерьера, управляемый прокруткой: многослойные фотографии, горизонтальная сцена пространств и срежиссированное вступление.

Kabizzu — концепт-сайт, который мы разработали для студии архитектуры и дизайна интерьеров. Он построен на кремовых и оливковых тонах, крупной антикве и многослойных изображениях, движущихся вместе с прокруткой: двухрядная лента фотографий собирается в центре и превращается в полноэкранную обложку, после чего четыре концептуальных пространства просматриваются горизонтально при вертикальной прокрутке.

Сайт написан на чистом HTML, CSS и JavaScript без фреймворка и этапа сборки; единственная зависимость — Lenis для плавной прокрутки. Геометрия прокрутки вынесена в независимый от DOM модуль и покрыта автоматическими тестами. Уменьшение движения, управление с клавиатуры, отдельная мобильная вёрстка и локальные WebP-изображения и шрифты учитывались с самого начала. Проекты, изображения и тексты представляют дизайн-концепцию; формы являются демонстрационными.

Scroll AnimationVanilla JSLenisArchitecture

Задача

Kabizzu — концепция, начатая Piton Studios по собственной инициативе; реального клиента и заявлений о выполненных проектах нет. Цель — заменить привычную для архитектурных сайтов статичную галерею повествованием, которое «проводит» посетителя по пространству по мере прокрутки: срежиссированное вступление, слои фотографий с разной скоростью, горизонтальная сцена комнат и цветовые переходы. Всё это должно было работать без тяжёлого фреймворка и оставаться читаемым на мобильных устройствах и при настройке уменьшения движения.

Решение

Сайт — статическая структура без этапа сборки: один HTML-файл, CSS и несколько JavaScript-модулей. Таймлайн вступления вынесен в отдельный модуль; он дожидается загрузки изображений и шрифтов и завершается сам — по кнопке пропуска, клавише Escape, при уменьшении движения или при ошибке. Расчёты, связанные с прокруткой, хранятся в чистых функциях, не обращающихся к DOM, и тестируются через Node test runner. Четыре концептуальных пространства движутся горизонтально при вертикальной прокрутке; каждое изображение увеличивается на зелёной сцене и возвращается в свою рамку. Меню открывается по наведению, но так же доступно с сенсорного экрана и клавиатуры. Форма проекта демонстрационная: заявка формируется на устройстве и скачивается, данные на сервер не отправляются. Скрипт проверки контролирует локальные ресурсы, цели ссылок и размеры изображений.

Ключевые технические решения

Без фреймворка и этапа сборки: чистые HTML, CSS и JavaScript; единственная зависимость — Lenis фиксированной версии.
Срежиссированное вступление, которое ждёт загрузки изображений и шрифтов, может быть пропущено и безопасно завершается при ошибке.
Сцена из четырёх пространств с горизонтальным движением при вертикальной прокрутке и строки процесса, переходящие из чёрно-белого в цвет.
Геометрия прокрутки не зависит от DOM; логика вступления, меню и движения покрыта 18 автоматическими тестами.
Поддержка уменьшения движения, управление с клавиатуры, мобильная вёрстка; локальные WebP-изображения и шрифты.

Технологии

HTMLCSSJavaScriptLenisWebPNode test runnerVercel

Результат

Результат — работающий концепт-сайт студии, который идёт так же плавно на мобильных устройствах, как и на десктопе. Он показывает нашу способность создавать сайты редакционного вида с повествованием через движение для архитектурных, интерьерных и бутиковых брендов. Изображения интерьеров созданы с помощью ИИ для этой концепции; в реальном проекте их заменят собственные фотографии студии.