Alfais Adilkhan
Case study

This site

A WebGPU scroll portfolio: a frost-covered Earth wiped clear by the cursor, a reading column over the world, and an orbit finale. One camera spine, one scroll value, no cuts.

2026

Under 8 MB on the critical path, under 300 draw calls

Role

Design, code and content. One person.

Outcome

  • Critical path under 8 MB
  • Draw calls under 300 across all six sections
  • Reduced-motion and keyboard paths shipped at launch

Constraints

  • Six colours, hard-capped; one accent per frame
  • Under 300 opaque draw calls; no shadow maps
  • Every 3D asset is optional: a missing file falls back to a procedural stand-in, never an error
  • All copy lives in content files; the scene code contains no biography

Process

  1. Greybox first: every camera beat, interaction and transition shipped against primitive geometry before any modelled asset existed.
  2. One Catmull-Rom camera spine scrubbed by one scroll value; Lenis and the render loop share a single ticker so DOM and WebGL never disagree.
  3. Shaders written once in TSL and compiled to WGSL and GLSL: WebGPU rendering with automatic WebGL2 fallback.
  4. AgX tone mapping, a procedural polar-night environment and a depth-driven recede behind the reading column.