Tag
SITE
Year
2026
Status
LIVE

Mikoshi

You're already inside the case study. The other three describe a project; this one annotates the one you're standing in. Read it as a guided tour, not a write-up.

Context

A portfolio that proves the system means the site has to do the thing, not describe it. Anyone can publish four screenshots and a paragraph; the harder claim is that the surface you're looking at is itself the work.

The brief: build something that holds together as a single authored interface — not a template with content poured in, and not a moodboard with decoration spray-painted on.

Approach

Procession over grid. Selected Works is a moving aperture, not a card grid. Each panel is a peer carried through the same opening — see §02 on the home page. Grids invite ranking; processions invite attention.

Carrier router as operator-lens reframing. The public dossier now concentrates on Product Engineer and Interface Engineer. The wider carrier set is parked internally until those surfaces earn their way back.

Shrine, sakura, kanji as commitment. The Japanese vocabulary isn't set dressing. Mikoshi (御輿) is a portable shrine carried in procession; sandō (参道) is the approach path; the kanji-mark is scoped, opacity-bound, and never decorative. The metaphor is load-bearing — strip it and the system collapses to a generic cyberpunk portfolio.

The source is the appendix. The implementation is the proof. Any claim about the system can be checked against the file it's rendered from. There's no separate design system; the design system is the codebase.

Selected surfaces

01 — The apertureSelected Works procession, mid-drift. Visitors catch it already moving.
02 — Carrier selectOperator-lens swap above the chapters.
03 — Footer / street levelSkyrise above, asphalt below. The low-life pass.

Stack

  • Next.js 15 / RSCEditorial chrome streams as server components; client surfaces are scoped.
  • TypeScriptCarriers, works, palettes, manifest — typed across the system, not just inside it.
  • Tailwind + globals.cssToken system in CSS variables; utilities for layout, named classes for the stuff with vocabulary.
  • Framer MotionProcession motion, reveal primitives, reduced-motion fallbacks where it matters.
  • Anime.jsChosen surfaces where the SVG sequence wants imperative control.

Outcome

Active carriers
2
Surfaces shipped
2
Lines of CSS that earned their keep

Live, evolving. The site is a working draft of itself — iteration is part of the artifact. If you're reading this, you've already evaluated it; close the tab and the case study reverts to whatever you remember.