Nº 004 / VERSO

An interactive portfolio built as a chrome Workbook in a photographic desert. A reversible scroll journey moves from the cover through its pages; the case study stays accessible without entering the scene.

Make a memorable 3D experience without slowing access to the work. Keep exploration optional, isolate its rendering engine from other routes, and stop rendering when the scene leaves view.

Lenis feeds one GSAP timeline for camera movement and page turns. Scroll, clicks, taps and arrow keys navigate the same resting points, keeping the journey reversible and each input in sync.

Vertex shaders bend subdivided pages on the GPU, with matching depth shaders for their shadows. Unlit artwork preserves screen-like blacks and color; rigid chrome covers reflect the desert photograph.

The desert image is projected onto scenery and ground geometry. Heat shimmer, drifting sand and cloud shading extend existing shaders without additional effect passes. Motion respects reduced-motion preferences.

Static HTML is generated at build time. Only this route loads the 3D scene; Explore activates its journey, while Exit or Escape returns to normal page scrolling. Rendering stops offscreen, and shadow captures are reused until movement requires an update.

Designed and built the visual direction, 3D scene, shaders and scroll choreography, alongside the site's routing, pre-rendering and content system.

Separated navigation, page timing and interaction rules into testable TypeScript modules. Added production browser checks for rendering, input and lifecycle behavior.

• TypeScript
• React
• Three.js
• React Three Fiber
• GLSL
• GSAP
• Lenis
• Vite
• Vitest
• Playwright

The 3D engine loads only on this route. Other pages stay independent of its bundle, and pre-rendered case studies remain readable without JavaScript.

Offscreen rendering suspension is verified by a production browser check. Automated unit and browser checks cover navigation, page turns, input handling and scene lifecycle behavior.