A real-time WebGL hub where each AI model exposes itself as a composable visual
node. Built as the discovery surface for an AI tooling platform whose audience
is technical enough to spot a <canvas> faked with CSS in two seconds.
Brief
The client had a portfolio of internal AI models and no coherent way for prospective users to feel the difference between them. Marketing copy was the default — diagrams, screenshots, the usual deck. Our brief: skip the deck. Show each model running on the page, composable, mouse-reactive, in a way that proves the team ships rather than markets.
Approach
Single-page Three.js application sitting on top of a Next.js + Supabase stack. Each model becomes a node in a graph the user can rearrange and inspect. The visual layer is custom GLSL — three shaders cross-faded by mouse proximity, running at 60fps on mid-tier laptops. Supabase handles auth and the model metadata table; the heavy work is client-side WebGL.
Key decisions
The shader stack runs raw WebGL2 with hand-written fragment programs, not Three.js post-processing chains. The post-processing route hit GPU limits on the 4-shader composition we needed; the raw approach gave us 11ms frame budgets even on Intel Iris.
Mouse input drives a 2D potential field that nudges shader uniforms with a 0.04 lerp coefficient. The result reads as “the field responds” without feeling input-locked. Reduced-motion users get a static composite, no movement at all.
Model metadata lives in a single Supabase view that joins the model table with usage stats. Server-side Astro rendering pre-bakes the first view of the page; the WebGL canvas hydrates after first paint.
Authentication uses Supabase Magic Links with an Edge Function gating the WebGL initialization for trial-tier users. Free-tier sees a static poster.
Outcome
The hub became the platform’s primary acquisition surface within three months of launch. Trial-to-paid conversion improved meaningfully against the prior deck-based landing page (the client’s measurement, not ours). The shader techniques moved into the platform’s authenticated app as a visualization library for AI inference results.
For your agency
White-label appropriate for: AI/ML platform marketing sites, developer-tool landing pages, any product whose pitch hinges on “the work itself is the demo.” We hand off the Three.js scene as a standalone React component your in-house team can swap data into; the shader source stays under MIT-style terms when relicensed at engagement close.