I wanted the portfolio to feel like a place rather than a list. The lab offers two ways into a project: follow the narrative by scrolling, or choose an object directly. Both routes lead to the same settled project view, with a case study ready for a closer look. Designing that experience, and then engineering it, became a project of its own.
WORK
Art direction · interaction design · frontend architecture
TOOLS
React · Three.js · XState · Remotion
OUTCOME
Interactive portfolio · seven case studies
The earlier Macro to Machine motion study from early September 2026. Design direction at the time, not the current page opening and not a deployed website.
01 / The chosen motion language
Frame the machine. Let the title settle.
The earlier Macro to Machine study began with a close detail that held, then pulled back as the title resolved. I selected it in early September 2026 as the design direction for the project-page opening, and the film above is that study. Warm light, quiet typography and controlled pacing were the qualities I wanted to keep.
The opening that plays on the sharpener page today is different, and deliberately so. On 9 September 2026 I chose a restrained cinematic starting point: the machine is framed immediately, settles gently over 4.2 seconds, and the two whole title lines appear early, readable within about 1.1 seconds. The study set the direction; the implementation is what now plays, and neither is footage of a public production website.
00:00
Current opening: the machine is framed at once
00:00.1
The first whole title line begins to reveal
00:01.1
Both title lines and the subtitle are readable
00:04.2
The gentle settle completes
What is locked and what is still evolving+
The Macro study remains the reference for the qualities I want on the project pages; the close-up choreography it demonstrated is no longer what plays. The restrained opening of 9 September 2026 keeps the same hero image, title and subtitle. Page compositions, project footage and reading rhythm continue to be refined, and I review each revision as a local candidate before deciding what should ship.
Source: A02-Macro-to-Machine.mp4; revised Macro intro implementation, 9 September 2026.
02 / Two entrances, one destination
Make exploration feel free. Keep the state coherent.
Clicking a project and scrolling into its chapter should not create competing versions of the experience. I separated travel from a settled project state and record the visitor’s selected project, so the two entrances resolve to one destination.
The small interaction below explains that contract. It is a schematic of the navigation model, with separate click and scroll routes meeting at the same reading state.
HubClick flightProject settled
Direct selection travels to the chosen project’s canonical state.
Schematic of the implemented state contract · no production scene is being run here
Evidence in the implementation+
site/lib/experience/machine.ts defines hub, clickFlight, scrollTravel and stationSettled states, with guards, pending intent and history handling. It also contains semantic project routes and a failure state. This page explains the architecture without presenting a diagram as a complete end-to-end product demonstration.
Source: site/lib/experience/machine.ts; recorded discovery decisions.
03 / Design for a closer look
Earn the atmosphere with substance.
The opening gives a project its character. The article then has to explain the problem, the decisions, the work performed and the result, so I ask films, assemblies and plots to each carry a specific part of that explanation.
The project pages share one visual language with different compositions. Mechanical assemblies need room; a price comparison needs the same product on both sides; technical depth belongs close to the evidence, with detail available on demand.
ORIENT
What the project is and why it matters
SHOW
A mechanism, a result or a real interaction
EXPLAIN
Decisions and contribution
OPEN UP
Technical detail and source notes
A maintainable content structure+
I keep the editorial records separate from the source dossiers. Explicit media IDs point to a registry of originals, treatments and derivations, so a filename collision or a decorative image cannot silently become project evidence. The seven case studies are integrated as independent, shareable HTML pages. Their content remains available without WebGL or client-side JavaScript.
Source: Project-page editorial records, media registry and generated review pages.
Guided scroll · scroll or press Escape to take over
