WebGL Shaders: AI Thinking & Token Speed
40 live GLSL shaders you can paste into any page or straight into Shadertoy. The first set shows an AI thinking: each shader runs on a token rate, so it moves at the speed your model is actually streaming.
AI thinking
Forty ways to show a model thinking. Each one is driven by a token rate, so a slow reasoning model and a fast one look different: drag the speed and watch the shader keep up.
How to use these shaders
Copy the standalone HTML into any page: it is a canvas and a small module script with the shader inside, no library needed. Size the canvas with CSS and it renders at your screen's pixel density.
To tie a shader to a real model, set canvas.dataset.tps to the current tokens per second as your stream arrives, or call canvas.token() once per token and let the runner work out the rate. Set it to 0 and the shader settles into its idle state.
The GLSL version pastes into Shadertoy as is: uTokens, uTps and uColor are defined at the top as constants you can change. Every shader is a single pass with no textures.
Frequently asked questions
How do I show an AI thinking animation that matches token speed?
Feed the shader your stream's rate. Each shader here reads uTps (tokens per second) and uTokens (tokens so far), so set canvas.dataset.tps from your stream or call canvas.token() per token, and the motion speeds up and slows down with the model.
Do these shaders work in React, Vue or Svelte?
Yes. The runner is plain JavaScript that takes a canvas element, so mount the canvas in your component and run the script in an effect or onMount. Stop the animation frame when the component unmounts.
Are WebGL shaders heavy on the GPU?
These are single-pass fragment shaders sized for UI: they render at the canvas size, stop drawing when the canvas is off screen, and fall back to a still frame for people who ask for reduced motion.
Can I use these on Shadertoy?
Yes. Each entry has a GLSL version with the three custom inputs defined as constants, so it runs in Shadertoy unchanged.