Case 05 / 05 Coffee house · London Hospitality · 1 page
Umbra Coffee House
A late-hours coffee house in Soho — single-origin espresso by day, candlelight and coffee cocktails until midnight. One cinematic page, choreographed with GSAP and Lenis.
- Role
- Direction, design, build
- Pages
- 1
- Motion
- GSAP + Lenis
- Stack
- HTML · CSS · JS
01 — Overview
One room, from first light to the last candle
Umbra is a demonstration brand: the café, its people and its address are fictional placeholders. It is a single page that follows the room through its day — the menu, the story, a day at Umbra told hour by hour, a gallery and reservations.
The brief was restraint: a coffee house that feels like the room itself — low-lit, unhurried, and serious about the coffee.
02 — Design direction
Candlelight, espresso, brass
Cormorant Garamond sets the voice, large and quiet, and Manrope carries everything practical. Every photograph shares one colour grade, so images from different sources sit together as a single set.
Near-black #0B0A09 · Coffee #3A2418
The room after dark: warm blacks rather than a cold screen black.
Brass #B58A5A
The single accent colour, taken from the brass of the room.
One grade for every image
Slightly desaturated, a touch more contrast, a little darker and a trace of sepia, applied in CSS.
03 — Key features
Built for the quiet hours
An intro, then the room
A short opening sequence hands over to the hero film. Under reduced motion it is skipped entirely.
A live open-hours status
Open now or closed, worked out from the opening hours in the script and shown in the hero.
A menu you can preview
Five tabs — espresso, coffee, tea, pastries, desserts — following the accessible tabs pattern with arrow keys, Home and End. On a mouse, a photograph of each item follows the pointer; on touch, thumbnails take its place.
Reservations on the page
A date across the next fourteen days, a seating time with availability shown, up to eight guests, then contact details — with a clearly marked point in the script to connect a booking provider.
A gallery lightbox
A native dialog: focus stays inside, Esc closes it, and the arrow keys or a swipe move between photographs.
04 — Technology
Motion that knows when to stop
GSAP 3.12 with ScrollTrigger drives the choreography and Lenis the smooth scroll. If either CDN is unavailable, every section still renders statically and fully visible.
Video chosen by screen
The hero film picks a 540p, 720p or 1080p source by screen width, pauses off-screen or on a hidden tab, and is skipped entirely on Save-Data or 2G connections.
Six breakpoints
1200, 1024, 900, 700, 560 and 380, plus separate touch and reduced-motion layers.
Reduced motion honoured
No intro, no smooth scroll, no pinning and no parallax — the same page, still.
05 — Visual showcase
06 — Responsive
The same room on a phone
On phones the custom cursor, magnetic buttons and the pointer-following menu preview switch off; touch gets native scrolling and thumbnails instead. Images below the fold load lazily.
07 — Note
Umbra is a demonstration brand — the café, its people, address and emails are placeholders, and the phone number sits in Ofcom’s reserved drama range. The photography comes from Unsplash and the hero film from Pexels, graded to match; the project’s README explains how to swap in your own.