SHOWCASE · WEB DESIGN & FRONT-END — mocha PORTFOLIO · 2026
JP/EN
SELECTED WORK · by mocha

SHOWCASE

Selected work by mocha, a web designer and front-end developer. Three sites, each built in a distinctly different register to show range. Every one takes a fictional brand or artist as its subject and is crafted end to end — from concept and design through to front-end build. No stock photography: everything is expressed with typography and code alone (HTML / CSS / JS + GSAP). For project inquiries, reach me at haise.matu1717@gmail.com.

WEB DESIGN & FRONT-END
— mocha
THREE SITES · 2026
INDEX / TABLE OF CONTENTS 04 ENTRIES — SCROLL TO EXPLORE
INDEX 01 — 2026KLEIN BLUE / EDITORIAL
01
Typographer · Type Design

REI ONOType & Editorial

A typographer who designs the "ma" — the space between Japanese and Latin letterforms. Broadsheet paper and ink, kinetic grotesque type set in motion: a bright editorial proof where the letters themselves move.

Kinetic TypeSplit RevealBroadsheetMarqueeKlein Blue
OPEN
INDEX 02 — 2026CYAN ON BLACK / LAB
02
Creative Coder · Generative

nol.worksGenerative Studio

Experimental digital art drawn with code. Inside a dark lab, particles and shaders breathe. Built from randomness and time, a generative system that never renders the same frame twice.

ParticlesGenerativeCanvasShaderDark Lab
OPEN
INDEX 03 — 2026PLUM INDIGO / AURORA
03
Motion & 3D Director · Motion

YUKI MORIMotion & 3D

A motion director who designs emotion through movement. Aurora bleeds across the screen and light chases its subject — refined, fluid pacing paired with 3D staging that carries real depth.

AuroraSpotlight3D TiltEasingPlum Indigo
OPEN
INDEX 04 — 2026DEEP TEAL / CORPORATE
04
Corporate · Company Site

MERIDIANCorporate

A trust-first corporate site for a fictional clean-energy company driving the energy transition. Built on a clean Swiss grid with data-driven diagrams — where steadiness itself is the star. Bright, practical, and composed.

CorporateSwiss GridData VizTrustDeep Teal
OPEN