[10]

Kabizzu

2026

Client

Piton Studios

Year

2026

Scope

Web design, scroll animation, front-end

Role

Design / Development

Live Site

Visit site ↗

§ Case Study

Kabizzu — Scroll-driven concept site for an architecture and interior studio — layered photography, a horizontal room showcase and a choreographed intro.

Kabizzu is a concept site we designed for an architecture and interior design studio. It is built on cream and olive tones, large serif typography and layered imagery that moves with the scroll: a two-row photo strip gathers at the centre and becomes a full-screen cover, then four concept spaces are explored horizontally while the visitor scrolls vertically.

The site is written in plain HTML, CSS and JavaScript with no framework or build step; Lenis is the only dependency, used for smooth scrolling. Scroll geometry lives in a DOM-independent module covered by automated tests. Reduced-motion preference, keyboard access, a dedicated mobile layout and locally served WebP images and fonts were considered from the start. Projects, imagery and copy represent a design concept; the forms are demos.

Scroll AnimationVanilla JSLenisArchitecture

Challenge

Kabizzu is a concept Piton Studios started on its own initiative; there is no real client and no claim of completed projects. The goal was to replace the static gallery typical of architecture websites with a narrative that walks the visitor through the space as they scroll: a choreographed intro, photo layers moving at different speeds, a horizontally travelling room scene and colour transitions. All of it had to work without leaning on a heavy framework, and remain readable on mobile and under a reduced-motion preference.

Solution

The site is a static build-free structure: one HTML file, CSS and a handful of JavaScript modules. The intro timeline lives in its own module; it waits for images and fonts, and completes on its own via a skip button, Escape, reduced motion or an error. Scroll-linked calculations are kept in pure functions that never touch the DOM and are tested with the Node test runner. Four concept spaces travel horizontally on vertical scroll; each image grows on a green stage and settles back into its frame. The menu opens on hover but is equally usable by touch and keyboard. The project form is a demo: the request is generated on the device and downloaded, and nothing is sent to a server. A validation script checks local assets, link targets and image dimensions.

Key technical decisions

No framework and no build step: plain HTML, CSS and JavaScript; the only dependency is a pinned version of Lenis.
A choreographed intro that waits for images and fonts, can be skipped, and completes safely on error.
A four-room scene that travels horizontally on vertical scroll, plus process rows that shift from black-and-white to colour.
Scroll geometry is DOM-independent; intro, menu and motion logic are covered by 18 automated tests.
Reduced-motion support, keyboard access, a mobile layout; locally served WebP images and fonts.

Tech stack

HTMLCSSJavaScriptLenisWebPNode test runnerVercel

Outcome

The result is a live concept studio site that flows as smoothly on mobile as on desktop. It shows our ability to build editorial-looking, motion-led websites for architecture, interior design and boutique brands. The interior images were generated with AI for this concept; in a real engagement they would be replaced by the studio's own project photography.