Rendering AI orbs on a GPU budgetRendering AI orbs on a GPU budget

The orbs on this site represent AI systems — Alfred, Clara and Willy. They have to feel alive without costing the page its speed. This note describes how they are built.

The visual model

Each orb follows the design of Alfred's orb in the Trade Sider terminal. It is made of four layers:

1. A core — an icosphere whose vertices are displaced along their normals by 3D simplex noise, so the surface genuinely churns rather than rotating a texture.
2. A fresnel rim — the fragment shader blends a deep base color into a hotter color by the noise value, and brightens the edges where the surface turns away from the viewer.
3. A glow shell — a slightly larger sphere rendered from the inside with additive blending, which produces a soft halo around the silhouette.
4. Particle shells — three layers of point sprites orbiting at different radii and speeds.

float n = snoise(position * uFrequency + uTime * 0.28);
vec3 displaced = position + normal * (n * uDistortion);
// …
float fresnel = pow(1.0 - dot(normal, viewDir), 2.0);
vec3 color = mix(uColor, uColorHot, n * 0.5 + 0.5) * (0.72 + fresnel * 2.15);

Every entity is pure configuration: two colors, a glow color, particle colors and two sets of motion parameters — at rest and when active. Interaction simply interpolates between them.

One context, many orbs

Browsers limit the number of live WebGL contexts, and each one has a memory cost. The intelligence field therefore renders all three orbs, their connecting links and the ambient particle field in a single renderer. Links are quadratic curves recomputed each frame from the orbs' positions, with a travelling pulse in the fragment shader.

The budget

• Lazy by default. Three.js is loaded with a dynamic import only when an orb approaches the viewport. Pages without orbs never download it.
• Paused when unseen. An IntersectionObserver stops the render loop when the stage leaves the screen, and the loop also stops when the tab is hidden.
• Adaptive quality. Touch devices, small screens and low core counts get lower geometry detail, fewer particles and a lower pixel-ratio cap — the same orb, simplified rather than removed.
• No layout shift. A CSS orb is rendered on the server in the same place; the WebGL canvas fades in over it, and remains as the fallback if WebGL is unavailable.
• Reduced motion respected. With prefers-reduced-motion, time stops: the orbs render a still frame and update only when their state changes.

Accessible by construction

The canvas is decorative. Every orb has a real button laid over it — focusable, labelled, operable with the keyboard — and the contextual panel is a live region. The visual system and the accessible system share one layout function, so they can never drift apart.