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
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.