Compiling the shader...
Realtime WebGL
A fragment shader flows across the canvas - no two frames alike. Glass holds the words, violet carries the action, and only the pixels move.
A living background is a premium signal. It says we wrote a shader even for the backdrop - not that we pasted an exported gradient.
A full-screen quad runs an fbm domain-warp field. The shader is compiled once; each frame only advances uniforms.
Every frame is computed on the GPU with an fbm domain-warp field. Nothing is a baked PNG.
Content floats on backdrop-blur panels with a 1px white/10 border and a dark scrim for legibility.
Violet carries every action and focus ring. The gradient supplies all the color it needs.
devicePixelRatio capped at 2, the loop pauses offscreen, and a single frame renders under reduced motion.
const gl = canvas.getContext("webgl");
if (!gl) return; // CSS gradient fallback stays
const dpr = Math.min(devicePixelRatio, 2);
// per frame: only advance uniforms
gl.uniform1f(uTime, performance.now() / 1000);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);A deep base and a raised surface for solid sections; violet is the single UI accent, cyan and magenta live only in the field.
A clean grotesque for content; monospace for kickers and telemetry so the interface reads engineered.
Display / Semibold
Ship the living web
A gradient that breathes, panels that stay legible, and one accent to carry every action a visitor can take.
Body copy holds at a comfortable measure over the near-black base. Because the field is decorative, text never competes with it for attention.
u_speed 0.85 · u_blend 1.40 · u_grain 0.30
Violet for the one action, frosted translucency for everything else, so controls never hide the field.
Badges
Compile
72%Alerts
Each slider writes straight into the fragment shader. Scroll up to the hero or components to watch the same field respond.
Under prefers-reduced-motion the field renders a single static frame; the sliders re-draw that frame instead of animating.
Cards float on the near-black base; only the featured plan borrows the accent.
Hobby
$0
Local renders
Pro
$29
Per seat / month
Scale
Custom
Volume + SSO
Uniform telemetry
| Frame | Uniform | Value | State |
|---|---|---|---|
| 0001 | u_time | 0.00 | static |
| 0420 | u_speed | 0.85 | flowing |
| 0918 | u_blend | 1.40 | warping |
| 1337 | u_grain | 0.30 | textured |
The background alone made the product feel expensive. We shipped one shader and the whole page grew up.
Dana Ford
Head of Design, Prism