— Case study 05
A portfolio built as one authored scene, not a scrolling page
project overview
A motion-led portfolio and living archive for a visual director, where one centered stage morphs between projects instead of presenting them as a scrollable grid.
shipped outcome
A live archive with five real projects, each carrying production metadata instead of filler copy, where the desktop-simulation shell is gone from every public route, the CMS layer is untouched, and the opening sequence, walker, and morph transition all degrade to a complete, legible page under reduced motion or a failed WebGL context.
The starting point was a Next.js and Payload CMS foundation wearing a literal macOS desktop skin — wallpaper, dock, icons, window chrome. It behaved like software demoing itself, not like an archive of a director's actual work, and a generic template grid could never carry the specific rhythm of motion-forward, culturally fluent work.
The CMS, data model, and Next.js foundation stayed. Everything public-facing was rebuilt around a studied 'Marked Frequencies' direction: one fixed, centered project stage where image, atmosphere, title, and metadata morph in place, advanced by a single wheel notch or short touch gesture instead of an open carousel. A dashed white route and a hand-authored 15-frame walking glyph carry the sense of motion instead of a generic loader, and the app cuts between two surfaces — a dark 'room' for media routes and a light 'sheet' for reading — with no cross-fade.
A live archive with five real projects, each carrying production metadata instead of filler copy, where the desktop-simulation shell is gone from every public route, the CMS layer is untouched, and the opening sequence, walker, and morph transition all degrade to a complete, legible page under reduced motion or a failed WebGL context.
— Interface evidence
These are the verified interface captures from the project build. Scroll inside taller frames to inspect each complete page.
— Delivery process
The work is sequenced around risk. Domain rules and failure states come before interface polish; automation arrives before handoff.
Next.js App Router, Payload CMS, PostgreSQL, and Vercel Blob stayed exactly as inherited. Every literal macOS desktop simulation — wallpaper, lock screen, dock, icons, window chrome — was removed from the public experience before any new visual direction was authored on top.
A centered project stage, a wheel/touch-to-anchor gesture sync, and a controlled WebGL morph transition that completes on its own easing instead of being tied directly to scroll position.
A continuously breathing dashed route, a hand-drawn 15-frame walking glyph, and a restrained WebGL ripple hover layer over the stable active image — suppressed during transitions, reduced motion, and touch-only use.
The work case study, contact-sheet index, about, and contact routes; the two-surface room/sheet system; a resilient CSS-only opening sequence; and per-route Open Graph images and structured data.
— System architecture
Each layer has one job and a narrow contract. That keeps external services replaceable and product behavior testable.
active_project
Casa 264
01 / 05 · 10 frames
surface
room · vinyl black
transition
Public archive routes sharing one app with the Payload admin route group, plus localized routing.
Projects, media, and site settings, publication-gated the way the inherited foundation intended.
Relational content plus S3-compatible object storage for project imagery.
The centered morph transition and ripple hover run on a controlled OGL renderer; DOM-level choreography runs on GSAP and motion.
— What shipped
A single wheel notch or short touch gesture selects the adjacent project and syncs the document anchor; the transition then completes on its own authored easing instead of being scrubbed by scroll distance.
A continuously breathing dashed line and a hand-authored 15-frame glyph carry direction and motion instead of a generic spinner or carousel arrow.
Media routes render on a dark 'room' and reading routes on a light 'sheet', with the surface stamped on the route root so overscroll never reveals the wrong canvas color.
— Engineering pressure
The wheel/touch input had to commit to the adjacent project on one modest gesture rather than scrubbing shader progress directly off scroll distance, so the transition reads as an edit rather than a scroll-linked effect.
The Payload CMS foundation and its data model had to survive completely intact while every public-facing macOS-simulation layer built on top of it was removed.
The full-screen opening sequence is CSS-only and fills backward from a complete final state, so a bug in the animation still renders the finished site instead of hiding it entirely.
verified project destinations
next transmission
Bring the operating problem. We will shape it into a clear product brief and a buildable next step.
Start a project