Case study · 2026 · Web · Motion · WebGL
Nicola Chen.
A South Tyrolean filmmaker whose work lived in a flat template grid. We rebuilt the portfolio as a living surface — a barrel-lens WebGL grid of seventeen films you drag, lean into, and dive through, with a page-to-page transition that never cuts to black.
01 · The brief
Real footage, a grid that flattened it.
Nicola Chen shoots music videos, short films and road films across the Dolomites. The footage is the work — light, motion, place. The old site filed it into a static thumbnail grid that felt like a contact sheet, not a reel.
A filmmaker's portfolio shouldn't read like a catalogue. It should feel like an edit suite: dark, polychrome only where the image lives, and alive the moment you touch it.
02 · The surface
A grid you inhabit.
Seventeen works sit on a five-column lattice that repeats forever. Each tile is a Three.js plane rendered to a render-target, then warped by a barrel shader in post — the lens breathes at the centre and opens at the edges, a camera's eye rather than an effect.
Drag carries inertia and modular wrap, so the surface never ends. Hover scales and brightens the tile under the lens; a click dives it toward the camera and opens the film. It reads as one continuous space, not a page of boxes.
03 · Direction
Monochrome UI, one amber like a key light.
AaAaAa
04 · The transition
No hard cut.
Grid → film and back uses cross-document View Transitions: the browser snapshots both pages and composites them, so there is never a frame where neither exists. The white flash is gone by construction, not by patching.
Sharp accelerating in, soft decelerating out — one symmetric motion language across the whole site. You fall into a film and rise back to the grid on the same curve, reversed.
05 · The work
Explore it yourself.
This is the live site's grid, running here. Drag to pan the lattice, hover to bring a tile under the lens, click to open a film on the real site.
06 · Decisions
What the build turned on.
Barrel lens, in post
The fisheye is a fullscreen post-pass over a render-target — not baked into geometry — so raycasting and hover stay exact.
Infinite, not paginated
Modulo-wrapped offset means the grid never hits an edge; the work feels boundless instead of finite.
One amber
Monochrome chrome, colour only inside the footage. A single warm accent does the pointing.
Native, not fake-4K
Reels served at native resolution, stills re-extracted to true 4K — sharpness where the source allows it, honesty where it doesn't.
07 · Process
How it came together.
- 01ReconPulled the real footage and stills, mapped every work to a tile.
- 02AssetsRe-extracted stills to native 4K; cut clean poster frames.
- 03The gridBuilt the Three.js lattice + barrel post-pass, drag, inertia, wrap.
- 04The transitionWired cross-document View Transitions — no black, no flash.
- 05ShipReduced-motion fallbacks, mobile pan, 60fps on desktop.
08 · Outcome
What changed.
- on one explorable surface
- no hard cut between any two pages
- stills re-extracted at native resolution
- nicola-chen.vercel.app
