Case 04 · Fazenda London · Project showcase
A warm, editorial website for coffee, food and modern art—bringing Fazenda’s family character into motion, 3D and an interactive Coffee Atlas.
← Back to Project Ocean
Project in motion
01 / The brief & visual direction
The design challenge was to connect three parts of the café—coffee, food and art—without losing a clear path to the menu, story and visit information. Editorial sections give each subject room while keeping discovery simple.
The digital identity extends Fazenda’s existing wordmark and pictorial emblem. Sage and warm ivory establish a welcoming base; espresso tones and clay accents add depth. Fraunces headlines, DM Sans body text and generous spacing balance character with readability.
02 / AI-assisted video direction
The supplied café, roasting and food films use close detail and gentle motion to express warmth and craft. Short, silent loops sit alongside editorial photography, with posters and pause controls. These are illustrative AI-assisted visuals, not documentary evidence of the café’s real roasting process; the original generator and prompts are not documented.
03 / 3D modelling & interaction
A textured coffee-bean GLB anchors a Three.js roasting scene. Five selectable stages move from wood and green coffee through slow heat to the finished cup. A procedural roaster, changing bean colour and restrained camera motion explain the sequence. It is an interpretive visualisation, not an engineering simulation.
04 / Interactive mapping
The Coffee Atlas turns a catalogue into exploration. Selecting an origin or blend updates country highlights, curved SVG connections and tasting information. Seven countries support eight origin entries, including Brazil Chocolate. Routes communicate relationships—not shipping paths—and the adjacent controls provide an accessible alternative to the map.
05 / CSS, JavaScript & delivery
Responsive CSS handles editorial grids, type and compact layouts. JavaScript coordinates media, map selections and the 3D journey, with keyboard controls and reduced-motion fallbacks. Local fonts, responsive images and deferred 3D loading keep the static Cloudflare build self-contained. The result is a cohesive project showcase; no conversion or commercial results are claimed.
Explore the supplied project
Open an interactive extract of the original 3D journey or Coffee Atlas. Each loads only when requested.
The 3D scene needs WebGL. Poster and text fallbacks remain available when it cannot run. Project presentation based on the supplied website archive; publication or client approval is not independently verified.
Depth Digital / Selected work
From a familiar café identity to film, interactive storytelling and a responsive digital home.
Next project · 05 / 05
