Stable demo

Dither wave field

Production hero substrate: R3F plane + GLSL fBm waves + Bayer dither post, deferred after first paint.

What is being tested?: Whether a scroll- and pointer-driven dithered WebGL field can brand a portfolio without blocking LCP or accessibility.
Why does it matter?: Immersive differentiation must remain optional; crawlers and reduced-motion users still need the message.
What is currently working?: Shader field implemented (R3F + GLSL dither). Homepage hero now uses the command-center storyboard scene; this lab remains the dither substrate experiment.
What remains incomplete?: Dedicated GLB hero asset from Blender authoring pipeline not yet shipped; dither no longer mounts on `/` by default.
Constraints: No server GPU; visitor GPU only; must not own the SEO text path.

Stack

Three.js
R3F
GLSL
GSAP

Implementation

The dither wave field is an R3F + GLSL experiment (Bayer dither + fBm waves) with adaptive DPR capping and a static poster fallback when WebGL or motion preferences block the effect. The homepage hero now mounts the procedural command-center storyboard; this lab preserves the dither substrate for iteration and reference.

Source: src/components/hero/Dither.tsx. Brand and positioning copy on the homepage remain server-rendered HTML outside any canvas.

Source / repository (opens in a new tab)