ISSUE N°02 — WEB DESIGN & BUILD

JAPAN
MATCHA

A luxury, scroll-driven matcha storefront. I designed and built it end to end — a cinematic hero that scrubs to your scroll, over a full commerce flow.

A luxury, scroll-driven matcha storefront — where buying tea feels like a quiet ceremony.

I designed and built it end to end in Next.js: a cinematic hero video that scrubs to scroll position, a single-origin product line, and a full cart-to-checkout flow.

bookmark JAPAN MATCHA — CEREMONIAL TEA FROM UJI, KYOTO

ROLE Designer & Front-End Dev

SCOPE Art Direction · UI
Build · Motion

STACK Next.js · GSAP React 18 · App Router

YEAR 2026 Self-initiated

SECTION 01

The Concept

Most direct-to-consumer tea sites look the same: a hero banner, a grid, a checkout. For a ceremonial matcha from Uji, that felt wrong. The product is slow, quiet and centuries old — the site should feel that way too.

So I built the whole experience around a single idea: the page is a ritual. A cinematic film plays entirely from your scroll — no autoplay, no rush — while restrained editorial type carries the story from leaf to bowl. Then, without breaking the mood, it becomes a real shop.

Japan Matcha cinematic hero — ceremonial matcha in spotlight — PLATE 01The hero frame — a single serving suspended in light, the still point the whole scroll journey builds around.

SECTION 02

The Signature Interaction

On load, every frame of the film is extracted to memory behind a jade progress bar. From then on, scrolling scrubs the video — the ceremony advances exactly as fast as you move. GSAP fades tasting notes in and out over the top, each one timed to a moment in the pour.

AROMA

Sweet grass and shaded leaf.

The aroma arrives before the first sip.

TASTE

Creamy umami, bright and clean.

A finish that lingers like silence.

RITUAL

A single whisk.

Centuries of Japanese tea wisdom inside.

RENEWAL

Calm focus in every bowl.

Antioxidants, clarity, and quiet renewal.

Built with a canvas frame-scrubber and GSAP ScrollTrigger — the same scroll-reveal principle you're seeing move this page.

SECTION 03

The Ceremonial Line

Four single-origin grades, each shot as its own still life on a coloured ground. The packaging system — muted tin, silk pouch, gold seal — carries across the range while the palette signals the character of each blend.

Sakura — Spring Edition matcha — SAKURA · ¥4,800Spring Edition. First-harvest matcha laced with salt-cured cherry blossom — soft, floral, fleeting.

Yuzu — Citrus Grade matcha — YUZU · ¥4,600Citrus Grade. Bright Kochi yuzu peel folded into ceremonial green — crisp, aromatic, awake.

Hojicha — Roasted Grade matcha — HOJICHA · ¥4,200Roasted Grade. Charcoal-roasted leaf, low in caffeine — toasted, amber, grounding warmth.

Uji Ceremonial — Highest Grade matcha — UJI CEREMONIAL · ¥6,400Highest Grade. The purest single-origin tencha — vivid, umami, vegetal and profound.

SECTION 04

The Visual System

Palette

Ceremonial jade against near-black. The green does all the talking; the ink lets the tea and the film breathe.

JADE#4CAF50

INK#030303

Type

A serif display for romance, a grotesque for the interface — the same high-low pairing that runs through the brand.

DISPLAY Cormorant Garamond — headlines & the mark

TEXT Inter — UI, labels & body copy

SECTION 05

Under The Hood

Design and engineering in one pass — the visual concept and the build informed each other the whole way.

FRAMEWORK

Next.js 14

App Router, React 18 server & client components.

MOTION

GSAP + Canvas

Frame-extracted video scrubbed by ScrollTrigger.

STATE

Cart Context

React context for a persistent, sliding cart.

COMMERCE

Checkout Flow

Cart, checkout and success — the full path.

CRAFT — CRAFT — CRAFT

SECTION 06

Outcome

A complete, working storefront that treats a purchase as a ritual — from a scroll-scrubbed film, through a single-origin line, to a finished checkout. It's the clearest proof of how I work: art direction and front-end build as one craft, not two hand-offs.

DETAILS