Brand-Led Site / Cinematic Experience
Mad Cat Coffee Bar
2026
01Client
Mad Cat Coffee Bar
02Timeline
Identity rebuild to live site, 2026
03Tech Stack
React 18, Vite, TypeScript +6 more
04Live Site
Visit →00In Brief
What
A single-page, experience-led site for Mad Cat Coffee Bar — a specialty coffee kiosk at Homerton station in Hackney, run by a painter and presided over by a grumpy black cat. Her real identity, rebuilt as a scroll-driven cinematic journey: a WebGL signature, a reactive soundscape, and the signature drinks shown in cinematic motion.
What was hard
The wow is the visible 20 percent. The hard part was making a media-heavy cinematic site — WebGL, frame-scrubbed films, a sound bed — open fast on a commuter’s phone, never flash a black frame mid-scroll, stay accessible and reduced-motion-safe, and express a strictly black-and-white brand where the only colour is allowed to come from the coffee itself.
How
We rebuilt the identity from her actual logo: stark black and cream, the grumpy cat promoted from sticker to living mascot, colour reserved for the coffee itself — caramel, crema, matcha, steam. The spine is five scroll-scrubbed cinematic beats engineered never to go black — a persistent ambient base under a floored cross-fade. A cream-in-coffee WebGL fluid runs in the hero; a real-sample soundscape (cat-purr and café bed with a cue per beat) reacts to scroll velocity behind a mute toggle. The heavy media lazy-loads per beat so first paint stays light, with reduced-motion and WebGL fallbacks throughout. Cookieless analytics; conversion to Instagram and phone.
Result
Live at madcatcoffeebar.com: a single-page cinematic experience on her real identity — five scroll-driven scenes, a WebGL hero, a reactive soundscape and a Signatures showpiece of the drinks in motion — that stays fast and accessible on a phone, instrumented with cookieless conversion analytics and zero consent banners.
01The Challenge
Mad Cat Coffee Bar is a specialty coffee kiosk wedged by the platforms at Homerton station, run by the painter Milena Angelova and, by his own appointment, a grumpy black cat. The brand already existed in the real world — a hand-lettered black-and-cream cat mark, a devoted local following — but online it was a pin on a map. The brief was not a brochure or a template: it was to translate a genuinely characterful place into a site with the same presence — expressive enough to feel like an experience, honest enough to be unmistakably hers, and fast enough to open on a phone while someone waits for a train. The constraint that shaped everything: her identity is strictly black and white, so every drop of colour had to be earned — and it comes from the coffee, not a designer’s palette.
The Design
02The Approach
We rebuilt the whole identity from her real logo rather than dressing it up: stark coal and cream, a condensed display face, and the grumpy cat promoted from sticker to living mascot — it breathes, the cup steams, and a tap makes it react. Colour appears only where it is real — the coffee itself: caramel, crema, matcha, steam. The spine of the site is “The Ritual”, five cinematic beats — the bar, the dunk, the craft, the maker, the cat — that scrub frame by frame as you scroll, each engineered never to flash black through a persistent ambient base under a floored cross-fade, and the signature drinks play as seamless cinematic loops in a dedicated showpiece. The hero carries a cream-in-coffee WebGL fluid; a real-sample soundscape (a cat-purr and café bed with a one-shot cue per beat) reacts to scroll velocity, all behind a mute toggle that does zero work until a visitor opts in. Because the audience is commuters on phones, the heavy media — frame sequences, reels, the audio — lazy-loads on demand so first paint stays lean, with reduced-motion and WebGL fallbacks throughout. Conversion routes to Instagram DM and phone, and analytics is cookieless, so there is no consent banner.
The Solution
01
Her identity, not a template
The site is rebuilt from the owner’s real black-and-cream cat logo: a stark monochrome brand where the grumpy cat is a living mascot — it breathes, the cup steams, and a tap makes it react — and colour comes only from the coffee itself.
02
A cinematic spine that never goes black
Five scroll-scrubbed beats — the bar, the dunk, the craft, the maker, the cat — play frame by frame as you scroll, bridged by cross-dissolves. Each sits on a persistent ambient base with a floored fade, so a mid-scroll seam can never flash a dead black frame. A cream-in-coffee WebGL hero and a real-sample, scroll-reactive soundscape add the signature, both with graceful fallbacks.
03
The coffee, in motion
The signature drinks — iced caramel, matcha, dirty chai, flat white — play as seamless cinematic loops in a dedicated Signatures showpiece, the warm coffee tones the only colour against the mono brand. The media lazy-loads so first paint stays lean, the whole thing is reduced-motion and WebGL-fallback safe, and cookieless analytics instruments the real actions — directions, call, follow — with no consent banner.
Next case · 02 of 13
Tarnshire
Premium home services · 2026
