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, an orbit finale, and an archive you fly to. One camera spine, one scroll value, no cuts.

2026

About 1.1 MB before Enter, under 100 draw calls

Role

Design, code and content. One person.

Outcome

  • About 1.1 MB on the critical path before Enter, measured
  • Under 100 draw calls in a reading frame
  • Reduced-motion and keyboard paths shipped at launch

Constraints

  • Six colours, hard-capped; one accent per frame
  • Under 100 opaque draw calls in a reading frame
  • 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.

More case studies