Type: Personal Project / Redesign Concept, unaffiliated with the business Role: Art Direction / Web Design / Web Development Year: 2026 Stack: Next.js 16, React 19, GSAP, WebGL (React Three Fiber)

Milo Cafe is a real Vietnamese cafe in Strasbourg, my favorite place to sip drinks and read. Their site was a generic WordPress template, none of the phin coffee ritual, the in-house Matcha Club sub-brand, or the actual atmosphere came through.

I audited the existing site first: 23 pages.

A lot of content competed for attention, while the practical information people need was harder to reach.

Useful/important info buried behind menus or hidden in images, not indexed, not searchable.

That set the direction before any design decision got made: trim to what matters, make the menu the fastest thing to reach, build mobile-first.

Cut 23 pages down to the essentials. The menu is reachable from anywhere, not buried. Built mobile-first, with desktop as the enhanced version rather than the default.

For this concept, I focused on 3 main pages while keeping scalability in mind: the homepage, menu, and Matcha Club sub-brand.

Built a moodboard first, to pin down who Milo is, how they communicate, and what a site true to that would look and feel like.

Palette and type pulled from the cafe's own physical materials, not a stock kit: dark brown, egg white, warm amber, matcha green kept separate for the Matcha Club sub-brand. Hatton for headings, Aeonik for body, Vietnamese diacritic set used as a typographic accent inside the French copy.

A 12-column desktop grid and 4-column mobile grid keep the layout editorial without turning it rigid. Large media and empty space slow the read down, while the menu and practical information stay easy to reach.

A light grain layer stops large surfaces from feeling too clean or digital.

One rule across the site: gravity and liquid. Phin drip, matcha pour, steam rising, nothing bouncy or fast.

Clip-path reveals for the header nav and the matcha club transition. Large spacing, breathing room, cursor interaction kept minimal on purpose, slow reads as warm, snappy reads as tech, and this cafe sells time.

Parallax on media to add depth.

The header phin reveal is WebGL and loads only after interaction. The 3D assets stay under 2 MB, with deferred loading and a 60fps target for the reveal.

Personal redesign concept, unaffiliated with Milo Cafe. I sent it to the cafe directly before sharing it publicly. No engagement is confirmed.