Gradient Mesh Flow
A luminous mesh gradient of six soft colour points drifting and swirling over a deep pool, with a fine grain. Faster token rates send the points drifting quicker and twist the swirl.
Also known as: gradient mesh animation, mesh gradient shader, ai loading gradient.
HTML + JS
A canvas and a module script, nothing to install. Set canvas.dataset.tps from your stream, or call
canvas.token() once per token.
<canvas id="shader-gradient-mesh-flow" data-tps="110" data-color="#6a5cff" style="display:block;width:100%;height:240px;border-radius:12px"></canvas>
<script type="module">
// Set canvas.dataset.tps from your stream, or call canvas.token() per token.
const canvas = document.getElementById("shader-gradient-mesh-flow");
const gl = canvas.getContext("webgl2", { alpha: false, antialias: false });
const fragment = `#version 300 es
precision highp float;
uniform vec3 iResolution;
uniform float iTime;
uniform float uTokens;
uniform float uTps;
uniform vec3 uColor;
out vec4 outColor;
// Gradient noise on a lattice that repeats every PER cells. Moving offsets are
// wrapped to whole periods, so the motion loops without a seam.
const float PER = 32.0;
// Octave turn and scale: an integer matrix keeps the lattice periodic.
const mat2 OCT = mat2(2.0, -1.0, 1.0, 2.0);
vec2 grad(vec2 i) {
i = mod(i, PER);
vec3 q = fract(vec3(i.xyx) * vec3(0.1031, 0.1030, 0.0973));
q += dot(q, q.yzx + 33.33);
return fract((q.xx + q.yz) * q.zy) * 2.0 - 1.0;
}
float noise(vec2 p) {
vec2 i = floor(p), f = fract(p);
vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
float a = dot(grad(i), f);
float b = dot(grad(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));
float c = dot(grad(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));
float d = dot(grad(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
// A phase that climbs with x but wraps to the noise period.
float wrapP(float x) { return mod(x, PER); }
// Rotate a colour around the grey axis: hue shifts that follow uColor.
vec3 hue(vec3 c, float a) {
const vec3 k = vec3(0.57735);
float ca = cos(a);
return c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca);
}
float hash12(vec2 p) {
vec3 q = fract(vec3(p.xyx) * 0.1031);
q += dot(q, q.yzx + 33.33);
return fract((q.x + q.y) * q.z);
}
// Soft shoulder tone map plus a one step dither against banding.
vec3 finish(vec3 c, vec2 fc) {
c = 1.0 - exp(-max(c, 0.0));
return c + (hash12(fc) - 0.5) / 255.0;
}
mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, s, -s, c); }
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
float e = 1.0 - exp(-uTps / 130.0);
// phases wrapped to a full turn and only used in whole multiples
float at = mod(uTokens * 0.0055, 6.2831853);
float ai = mod(iTime * 0.06, 6.2831853);
vec2 wn = vec2(wrapP(uTokens * 0.0022) + wrapP(iTime * 0.02), -wrapP(uTokens * 0.0016));
// a gentle swirl about the middle that leans with the stream
float rr = length(uv * vec2(0.6, 1.0));
float sw = (0.5 + 0.9 * e) * sin(at + ai);
vec2 p = rot(sw * exp(-rr * rr * 1.6)) * uv;
p += (0.1 + 0.08 * e) * vec2(noise(uv * 1.1 + wn), noise(uv * 1.1 + vec2(4.3, 1.7) - wn.yx));
vec3 acc = vec3(0.0);
float wsum = 0.0;
for (int k = 0; k < 6; k++) {
float fk = float(k);
float m1 = float(1 + k % 2);
float m2 = float(1 + (k + 1) % 2);
vec2 home = vec2(cos(fk * 2.4 + 0.3) * 0.62, sin(fk * 2.4 + 0.3) * 0.3);
vec2 c = home + vec2(0.42 * sin(at * m1 + ai + fk * 1.7), 0.22 * cos(at * m2 - ai + fk * 2.3));
vec2 d = (p - c) * vec2(0.8, 1.1);
// the bright point is tighter; the deep point is broad and dark
float s = k == 3 ? 11.0 : (k == 4 ? 4.0 : 6.5);
float w = exp(-dot(d, d) * s);
vec3 ck = k == 0 ? uColor
: k == 1 ? hue(uColor, 0.5) * 0.95
: k == 2 ? hue(uColor, -0.55)
: k == 3 ? mix(uColor, vec3(1.0), 0.35) * 1.2
: k == 4 ? hue(uColor, -0.25) * 0.05
: hue(uColor, 0.95) * 0.8;
acc += ck * w;
wsum += w;
}
// normalised weights: every pixel is a smooth blend of the points, no seams
vec3 col = acc / (wsum + 1e-4);
// the further from every point, the deeper it sinks: depth without mud
col *= mix(0.15, 1.0, smoothstep(0.0, 0.5, wsum));
col *= 0.62 + 0.3 * e;
col *= 1.0 - 0.35 * dot(uv * vec2(0.55, 1.0), uv * vec2(0.55, 1.0));
// keep the colour rich: lift saturation, then a soft roll off that keeps hue
float l = dot(col, vec3(0.3, 0.55, 0.15));
col = max(mix(vec3(l), col, 1.3), 0.0);
col *= 1.25 / (1.0 + 0.3 * max(col.r, max(col.g, col.b)));
col = min(col, 1.0);
// fine static grain over the light, plus the dither in finish
col += (hash12(fragCoord * 1.37 + 11.0) - 0.5) * 0.028 * (0.4 + col);
col += (hash12(fragCoord) - 0.5) / 255.0;
fragColor = vec4(col, 1.0);
}
void main() {
mainImage(outColor, gl_FragCoord.xy);
outColor.a = 1.0;
}
`;
const vertex = `#version 300 es
void main() {
vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
}
`;
const compile = (type, src) => {
const s = gl.createShader(type);
gl.shaderSource(s, src);
gl.compileShader(s);
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
return s;
};
const program = gl.createProgram();
gl.attachShader(program, compile(gl.VERTEX_SHADER, vertex));
gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
gl.linkProgram(program);
gl.useProgram(program);
const u = (n) => gl.getUniformLocation(program, n);
const [res, time, tokens, rate, color] = ["iResolution", "iTime", "uTokens", "uTps", "uColor"].map(u);
const hex = parseInt((canvas.dataset.color || "#7c5cff").slice(1), 16);
gl.uniform3f(color, ((hex >> 16) & 255) / 255, ((hex >> 8) & 255) / 255, (hex & 255) / 255);
// canvas.token(): count real tokens and derive the rate from the last second.
const stamps = [];
canvas.token = () => {
stamps.push(performance.now());
canvas.dataset.tps = "auto";
};
const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
let count = 0, last = performance.now(), visible = true, frame = 0;
new IntersectionObserver(([e]) => {
visible = e.isIntersecting;
if (visible && !frame) frame = requestAnimationFrame(draw);
}).observe(canvas);
function draw(now) {
frame = 0;
const dt = Math.min((now - last) / 1000, 0.1);
last = now;
while (stamps.length && now - stamps[0] > 1000) stamps.shift();
const wobble = 1 + 0.25 * Math.sin(now / 588) + 0.15 * Math.sin(now / 233 + 1) + 0.08 * Math.sin(now / 91 + 2);
const tps = canvas.dataset.tps === "auto" ? stamps.length : Number(canvas.dataset.tps) * wobble;
count += tps * dt;
const dpr = Math.min(devicePixelRatio || 1, 2);
const w = Math.round(canvas.clientWidth * dpr), h = Math.round(canvas.clientHeight * dpr);
if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
gl.viewport(0, 0, w, h);
gl.uniform3f(res, w, h, 1);
gl.uniform1f(time, still ? 2 : now / 1000);
gl.uniform1f(tokens, still ? Number(canvas.dataset.tps) * 2 : count);
gl.uniform1f(rate, tps);
gl.drawArrays(gl.TRIANGLES, 0, 3);
if (visible && !still) frame = requestAnimationFrame(draw);
}
frame = requestAnimationFrame(draw);
</script>GLSL for Shadertoy
// Inputs the site passes in, as constants for Shadertoy.
// uTps: tokens per second. uTokens: tokens so far. uColor: the accent.
#define uTps 110.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.416, 0.361, 1.000)
// Gradient noise on a lattice that repeats every PER cells. Moving offsets are
// wrapped to whole periods, so the motion loops without a seam.
const float PER = 32.0;
// Octave turn and scale: an integer matrix keeps the lattice periodic.
const mat2 OCT = mat2(2.0, -1.0, 1.0, 2.0);
vec2 grad(vec2 i) {
i = mod(i, PER);
vec3 q = fract(vec3(i.xyx) * vec3(0.1031, 0.1030, 0.0973));
q += dot(q, q.yzx + 33.33);
return fract((q.xx + q.yz) * q.zy) * 2.0 - 1.0;
}
float noise(vec2 p) {
vec2 i = floor(p), f = fract(p);
vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
float a = dot(grad(i), f);
float b = dot(grad(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));
float c = dot(grad(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));
float d = dot(grad(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
// A phase that climbs with x but wraps to the noise period.
float wrapP(float x) { return mod(x, PER); }
// Rotate a colour around the grey axis: hue shifts that follow uColor.
vec3 hue(vec3 c, float a) {
const vec3 k = vec3(0.57735);
float ca = cos(a);
return c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca);
}
float hash12(vec2 p) {
vec3 q = fract(vec3(p.xyx) * 0.1031);
q += dot(q, q.yzx + 33.33);
return fract((q.x + q.y) * q.z);
}
// Soft shoulder tone map plus a one step dither against banding.
vec3 finish(vec3 c, vec2 fc) {
c = 1.0 - exp(-max(c, 0.0));
return c + (hash12(fc) - 0.5) / 255.0;
}
mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, s, -s, c); }
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
float e = 1.0 - exp(-uTps / 130.0);
// phases wrapped to a full turn and only used in whole multiples
float at = mod(uTokens * 0.0055, 6.2831853);
float ai = mod(iTime * 0.06, 6.2831853);
vec2 wn = vec2(wrapP(uTokens * 0.0022) + wrapP(iTime * 0.02), -wrapP(uTokens * 0.0016));
// a gentle swirl about the middle that leans with the stream
float rr = length(uv * vec2(0.6, 1.0));
float sw = (0.5 + 0.9 * e) * sin(at + ai);
vec2 p = rot(sw * exp(-rr * rr * 1.6)) * uv;
p += (0.1 + 0.08 * e) * vec2(noise(uv * 1.1 + wn), noise(uv * 1.1 + vec2(4.3, 1.7) - wn.yx));
vec3 acc = vec3(0.0);
float wsum = 0.0;
for (int k = 0; k < 6; k++) {
float fk = float(k);
float m1 = float(1 + k % 2);
float m2 = float(1 + (k + 1) % 2);
vec2 home = vec2(cos(fk * 2.4 + 0.3) * 0.62, sin(fk * 2.4 + 0.3) * 0.3);
vec2 c = home + vec2(0.42 * sin(at * m1 + ai + fk * 1.7), 0.22 * cos(at * m2 - ai + fk * 2.3));
vec2 d = (p - c) * vec2(0.8, 1.1);
// the bright point is tighter; the deep point is broad and dark
float s = k == 3 ? 11.0 : (k == 4 ? 4.0 : 6.5);
float w = exp(-dot(d, d) * s);
vec3 ck = k == 0 ? uColor
: k == 1 ? hue(uColor, 0.5) * 0.95
: k == 2 ? hue(uColor, -0.55)
: k == 3 ? mix(uColor, vec3(1.0), 0.35) * 1.2
: k == 4 ? hue(uColor, -0.25) * 0.05
: hue(uColor, 0.95) * 0.8;
acc += ck * w;
wsum += w;
}
// normalised weights: every pixel is a smooth blend of the points, no seams
vec3 col = acc / (wsum + 1e-4);
// the further from every point, the deeper it sinks: depth without mud
col *= mix(0.15, 1.0, smoothstep(0.0, 0.5, wsum));
col *= 0.62 + 0.3 * e;
col *= 1.0 - 0.35 * dot(uv * vec2(0.55, 1.0), uv * vec2(0.55, 1.0));
// keep the colour rich: lift saturation, then a soft roll off that keeps hue
float l = dot(col, vec3(0.3, 0.55, 0.15));
col = max(mix(vec3(l), col, 1.3), 0.0);
col *= 1.25 / (1.0 + 0.3 * max(col.r, max(col.g, col.b)));
col = min(col, 1.0);
// fine static grain over the light, plus the dither in finish
col += (hash12(fragCoord * 1.37 + 11.0) - 0.5) * 0.028 * (0.4 + col);
col += (hash12(fragCoord) - 0.5) / 255.0;
fragColor = vec4(col, 1.0);
}
Customizing this shader
- Speed:
uTpsis the token rate anduTokensthe running count. The standalone runner adds a natural wobble to a fixed rate, the way real streams speed up and slow down. - Color: set
data-coloron the canvas, or changeuColorin the Shadertoy version. Currently previewing#6a5cff. - Size: style the canvas with CSS. It renders at up to twice your screen's pixel density and stops drawing while it is off screen.
- Reduced motion: the runner draws a single still frame for people who asked their OS for less motion.