Token River

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-token-river" data-tps="32" data-color="#4fa8ff" 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-token-river");
  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;
#define TAU 6.28318530718
uint hu(uint x) { x ^= x >> 16u; x *= 0x7feb352du; x ^= x >> 15u; x *= 0x846ca68bu; x ^= x >> 16u; return x; }
float hf(uint x) { return float(hu(x) >> 8u) * (1.0 / 16777216.0); }
float h1(float a) { return hf(uint(int(floor(a)))); }
float h2(vec2 a) { ivec2 i = ivec2(floor(a)); return hf(uint(i.x) * 0x27d4eb2du ^ hu(uint(i.y) + 0x9e3779b9u)); }
float h3(vec3 a) { ivec3 i = ivec3(floor(a)); return hf(uint(i.x) * 0x27d4eb2du ^ hu(uint(i.y) * 0x165667b1u ^ hu(uint(i.z) + 0x9e3779b9u))); }
float segd(vec2 p, vec2 a, vec2 b, out float t) {
  vec2 pa = p - a, ba = b - a;
  t = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-9), 0.0, 1.0);
  return length(pa - ba * t);
}
vec3 tone(vec3 c) { return 1.0 - exp(-c); }
float dither(vec2 f) { return (h2(f) - 0.5) / 255.0; }
// 0 at idle, about 0.23 at 15 tok/s, 0.46 at 60, 0.7 at 200, 1 at 800
float energy() { return clamp(log2(1.0 + max(uTps, 0.0) / 8.0) / log2(101.0), 0.0, 1.0); }

float meander(float x, float t) { return 0.085 * sin(x * 1.25 + t * 0.21) + 0.04 * sin(x * 2.9 - t * 0.33 + 1.7); }
float dmeander(float x, float t) { return 0.10625 * cos(x * 1.25 + t * 0.21) + 0.116 * cos(x * 2.9 - t * 0.33 + 1.7); }

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  float px = 1.0 / iResolution.y;
  float e = energy();
  float tk = mod(uTokens, 32768.0);
  float it = mod(iTime, 16384.0);
  float t = mod(iTime, 6000.0);

  float wid = 1.0 + 0.28 * sin(uv.x * 0.8 + t * 0.13 + 2.0);
  float sp = 0.05 * wid;
  float m = meander(uv.x, t);
  float slope = dmeander(uv.x, t);
  float v = (uv.y - m) / sp;
  float lane0 = clamp(floor(v + 0.5), -4.0, 4.0);
  float c = 0.1;

  vec3 col = vec3(0.004, 0.005, 0.009);
  col += uColor * 0.05 * exp(-v * v / 22.0) * (0.6 + 0.6 * e);
  col += uColor * 0.012 * exp(-v * v / 90.0);

  for (int k = -1; k <= 1; k++) {
    float L = lane0 + float(k);
    if (abs(L) > 4.0) continue;
    float depth = 1.0 - abs(L) / 5.5;
    float n = 10.0 - abs(L);
    float scroll = tk * n / 64.0 + it * n / 32.0;
    float vel = max(uTps, 0.0) * n / 64.0 + n / 32.0;
    float st = clamp(vel / 45.0, 0.0, 0.9);
    float dy = (uv.y - m - L * sp) * inversesqrt(1.0 + slope * slope);
    float s = uv.x / c - scroll;
    float ci = floor(s);
    float r = sp * 0.24 * (0.8 + 0.3 * depth);
    for (int q = -1; q <= 1; q++) {
      float cc = ci + float(q);
      float id = mod(cc, 512.0);
      float ha = h3(vec3(id, L, 1.0));
      float on = smoothstep(ha - 0.08, ha + 0.08, 0.28 + 0.64 * e);
      if (on <= 0.0) continue;
      float hb = h3(vec3(id, L, 2.0));
      float hc = h3(vec3(id, L, 3.0));
      float hd = h3(vec3(id, L, 4.0));
      float hl = mix(0.1, 0.33, hb);
      float cx = cc + mix(hl + 0.05, 0.95 - hl, hc);
      float lx = (s - cx) * c;
      float a = -(hl + st) * c, b = hl * c;
      float xx = lx - clamp(lx, a, b);
      float d = length(vec2(xx, dy)) - r;
      float along = clamp((lx - a) / (b - a), 0.0, 1.0);
      float trail = st / (st + 2.0 * hl);
      float bright = mix(1.0, mix(0.12, 1.0, along * along), trail) / (1.0 + trail * 0.8);
      float fill = smoothstep(px, -px, d);
      float glow = exp(-max(d, 0.0) / (r * 1.1));
      float core = smoothstep(r * 0.55, 0.0, abs(dy)) * fill;
      float special = step(0.9, hd);
      vec3 tint = mix(uColor, vec3(1.0), 0.12 + 0.55 * special);
      col += tint * on * bright * depth * (fill * 0.75 + core * 0.5 + glow * 0.22) * (0.7 + 0.5 * e);
    }
  }
  col *= 1.0 - 0.25 * dot(uv * vec2(0.55, 1.0), uv * vec2(0.55, 1.0));
  col = tone(col * 1.3);
  fragColor = vec4(col + dither(fragCoord), 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>

// Inputs the site passes in, as constants for Shadertoy.
// uTps: tokens per second. uTokens: tokens so far. uColor: the accent.
#define uTps 32.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.310, 0.659, 1.000)

#define TAU 6.28318530718
uint hu(uint x) { x ^= x >> 16u; x *= 0x7feb352du; x ^= x >> 15u; x *= 0x846ca68bu; x ^= x >> 16u; return x; }
float hf(uint x) { return float(hu(x) >> 8u) * (1.0 / 16777216.0); }
float h1(float a) { return hf(uint(int(floor(a)))); }
float h2(vec2 a) { ivec2 i = ivec2(floor(a)); return hf(uint(i.x) * 0x27d4eb2du ^ hu(uint(i.y) + 0x9e3779b9u)); }
float h3(vec3 a) { ivec3 i = ivec3(floor(a)); return hf(uint(i.x) * 0x27d4eb2du ^ hu(uint(i.y) * 0x165667b1u ^ hu(uint(i.z) + 0x9e3779b9u))); }
float segd(vec2 p, vec2 a, vec2 b, out float t) {
  vec2 pa = p - a, ba = b - a;
  t = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-9), 0.0, 1.0);
  return length(pa - ba * t);
}
vec3 tone(vec3 c) { return 1.0 - exp(-c); }
float dither(vec2 f) { return (h2(f) - 0.5) / 255.0; }
// 0 at idle, about 0.23 at 15 tok/s, 0.46 at 60, 0.7 at 200, 1 at 800
float energy() { return clamp(log2(1.0 + max(uTps, 0.0) / 8.0) / log2(101.0), 0.0, 1.0); }

float meander(float x, float t) { return 0.085 * sin(x * 1.25 + t * 0.21) + 0.04 * sin(x * 2.9 - t * 0.33 + 1.7); }
float dmeander(float x, float t) { return 0.10625 * cos(x * 1.25 + t * 0.21) + 0.116 * cos(x * 2.9 - t * 0.33 + 1.7); }

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  float px = 1.0 / iResolution.y;
  float e = energy();
  float tk = mod(uTokens, 32768.0);
  float it = mod(iTime, 16384.0);
  float t = mod(iTime, 6000.0);

  float wid = 1.0 + 0.28 * sin(uv.x * 0.8 + t * 0.13 + 2.0);
  float sp = 0.05 * wid;
  float m = meander(uv.x, t);
  float slope = dmeander(uv.x, t);
  float v = (uv.y - m) / sp;
  float lane0 = clamp(floor(v + 0.5), -4.0, 4.0);
  float c = 0.1;

  vec3 col = vec3(0.004, 0.005, 0.009);
  col += uColor * 0.05 * exp(-v * v / 22.0) * (0.6 + 0.6 * e);
  col += uColor * 0.012 * exp(-v * v / 90.0);

  for (int k = -1; k <= 1; k++) {
    float L = lane0 + float(k);
    if (abs(L) > 4.0) continue;
    float depth = 1.0 - abs(L) / 5.5;
    float n = 10.0 - abs(L);
    float scroll = tk * n / 64.0 + it * n / 32.0;
    float vel = max(uTps, 0.0) * n / 64.0 + n / 32.0;
    float st = clamp(vel / 45.0, 0.0, 0.9);
    float dy = (uv.y - m - L * sp) * inversesqrt(1.0 + slope * slope);
    float s = uv.x / c - scroll;
    float ci = floor(s);
    float r = sp * 0.24 * (0.8 + 0.3 * depth);
    for (int q = -1; q <= 1; q++) {
      float cc = ci + float(q);
      float id = mod(cc, 512.0);
      float ha = h3(vec3(id, L, 1.0));
      float on = smoothstep(ha - 0.08, ha + 0.08, 0.28 + 0.64 * e);
      if (on <= 0.0) continue;
      float hb = h3(vec3(id, L, 2.0));
      float hc = h3(vec3(id, L, 3.0));
      float hd = h3(vec3(id, L, 4.0));
      float hl = mix(0.1, 0.33, hb);
      float cx = cc + mix(hl + 0.05, 0.95 - hl, hc);
      float lx = (s - cx) * c;
      float a = -(hl + st) * c, b = hl * c;
      float xx = lx - clamp(lx, a, b);
      float d = length(vec2(xx, dy)) - r;
      float along = clamp((lx - a) / (b - a), 0.0, 1.0);
      float trail = st / (st + 2.0 * hl);
      float bright = mix(1.0, mix(0.12, 1.0, along * along), trail) / (1.0 + trail * 0.8);
      float fill = smoothstep(px, -px, d);
      float glow = exp(-max(d, 0.0) / (r * 1.1));
      float core = smoothstep(r * 0.55, 0.0, abs(dy)) * fill;
      float special = step(0.9, hd);
      vec3 tint = mix(uColor, vec3(1.0), 0.12 + 0.55 * special);
      col += tint * on * bright * depth * (fill * 0.75 + core * 0.5 + glow * 0.22) * (0.7 + 0.5 * e);
    }
  }
  col *= 1.0 - 0.25 * dot(uv * vec2(0.55, 1.0), uv * vec2(0.55, 1.0));
  col = tone(col * 1.3);
  fragColor = vec4(col + dither(fragCoord), 1.0);
}

Similar shaders