Meridian
Reference studyThirty project cards on a horizontal strip that desaturate, bend and rotate with scroll velocity, expand into a focused panel, then fly off as a project page takes over — all on one canvas that never reloads.
- Owner
- Type
- Year
- Services
Reference study. This rebuilds the experience of aristidebenoist.com from scratch, to prove the engineering behind it. None of its code, assets or copy is used, and the design is not presented as original to this studio.
The problem
Studios claim WebGL capability constantly and almost never show a system that survives real navigation. The point of this build was to take one of the hardest portfolio experiences on the web and rebuild the engineering behind it from nothing.
The approach
A persistent canvas that outlives every route change, scroll velocity driving mesh deformation, and two entirely separate builds — desktop and mobile — chosen server-side, because the mobile experience is a different document rather than a restyled one. Routing answers HTML normally and JSON to the client router, so first load and navigation run identical code.
In motion
Recorded from the live site. Muted, looping, and paused when it is off screen or when motion is reduced.
On a phone
The same page at 390px. Not the desktop layout scaled down — a recomposition, which is where most websites quietly fail.
The outcome
A working engine, not a demo: 32 routes, a mobile build, and a deployment that prerenders both device documents so it runs on static hosting.