Token Rain

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-rain" data-tps="48" data-color="#4ff0b8" 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-rain");
  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); }

// One layer of falling glyph columns. Each column is a stream of 3x5 glyphs
// that falls at its own whole-number fraction of the token rate.
vec3 rainLayer(vec2 uv, float cw, float lid, float spd, float e, float tk, float it, float px) {
  float ch = cw * 1.4;
  float col = floor(uv.x / cw);
  float hc = h2(vec2(col, lid * 31.0 + 1.0));
  float hc2 = h2(vec2(col, lid * 31.0 + 2.0));
  float n = 5.0 + floor(hc * 6.0);
  float vel = (max(uTps, 0.0) * n / 64.0 + n / 32.0) * spd;
  float scroll = (tk * n / 64.0 + it * n / 32.0) * spd;
  float yw = uv.y / ch + scroll + floor(h2(vec2(col, lid * 31.0 + 5.0)) * 16.0) + 0.37 * hc;
  float sm = mod(floor(yw), 256.0);
  float seg = floor(sm / 16.0);
  float hs = h3(vec3(col, seg, lid));
  float hs2 = h3(vec3(col, seg, lid + 7.0));
  float hs3 = h3(vec3(col, seg, lid + 13.0));
  float len = mix(1.5, 11.5, clamp(e * (0.35 + 0.65 * hs) + 0.1, 0.0, 1.0));
  float j = sm - seg * 16.0 - floor(hs2 * 4.0);
  float jf = j + fract(yw);
  float inRun = step(0.0, j) * clamp(len - j, 0.0, 1.0);
  float segOn = smoothstep(hs3 - 0.12, hs3 + 0.12, 0.4 + 0.55 * e);
  float colOn = smoothstep(hc2 - 0.12, hc2 + 0.12, 0.3 + 0.65 * e);
  float a = inRun * segOn * colOn;
  if (a <= 0.0) return vec3(0.0);
  float env = exp(-max(jf - 1.0, 0.0) / max(len * 0.38, 0.6));
  float head = smoothstep(1.7, 0.7, jf);

  vec2 g = vec2(fract(uv.x / cw), fract(yw));
  vec2 bc = (g - vec2(0.18, 0.1)) / vec2(0.64, 0.8) * vec2(3.0, 5.0);
  vec2 bi = floor(bc);
  vec2 bf = fract(bc) - 0.5;
  uint bits = hu(uint(int(sm)) * 747796405u ^ hu(uint(int(col)) + uint(int(lid)) * 1013u));
  bool inX = bi.x >= 0.0 && bi.x < 3.0;
  bool inside = inX && bi.y >= 0.0 && bi.y < 5.0;
  float on = inside ? float((bits >> uint(int(bi.x) + 3 * int(bi.y))) & 1u) : 0.0;
  float aa = px * 3.0 / (cw * 0.64);
  float d = length(max(abs(bf) - 0.16, 0.0)) - 0.22;
  float sharp = on * smoothstep(aa, -aa, d);
  // fast streams smear each glyph column into a line as bright as its bits
  float cnt = 0.0;
  if (inX) {
    for (int k = 0; k < 5; k++) cnt += float((bits >> uint(int(bi.x) + 3 * k)) & 1u);
  }
  float streak = inX ? (0.25 + cnt / 6.0) * smoothstep(0.28 + aa, 0.28 - aa, abs(bf.x)) : 0.0;
  float blur = smoothstep(0.06, 0.55, vel / 60.0);
  float glyph = mix(sharp, streak * 0.85, blur);

  vec3 tint = mix(uColor, vec3(1.0), head * 0.7);
  vec3 c = tint * glyph * env * (1.0 + head * 1.4);
  c += uColor * env * 0.06;
  vec2 q = (g - 0.5) * vec2(1.0, 1.3);
  c += mix(uColor, vec3(1.0), 0.35) * head * exp(-dot(q, q) * 5.0) * 0.3;
  return c * a;
}

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, 65536.0);
  float it = mod(iTime, 32768.0);
  vec3 col = vec3(0.004, 0.005, 0.008) + uColor * 0.02 * (0.7 - uv.y * 0.6);
  col += rainLayer(uv + vec2(0.37, 0.0), 0.022, 2.0, 0.5, e, tk, it, px) * 0.22;
  col += rainLayer(uv + vec2(0.11, 0.0), 0.032, 1.0, 0.75, e, tk, it, px) * 0.48;
  col += rainLayer(uv, 0.048, 0.0, 1.0, e, tk, it, px) * (0.8 + 0.35 * e);
  col *= 1.0 - 0.3 * dot(uv * vec2(0.5, 1.0), uv * vec2(0.5, 1.0));
  col = tone(col * 1.25);
  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 48.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.310, 0.941, 0.722)

#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); }

// One layer of falling glyph columns. Each column is a stream of 3x5 glyphs
// that falls at its own whole-number fraction of the token rate.
vec3 rainLayer(vec2 uv, float cw, float lid, float spd, float e, float tk, float it, float px) {
  float ch = cw * 1.4;
  float col = floor(uv.x / cw);
  float hc = h2(vec2(col, lid * 31.0 + 1.0));
  float hc2 = h2(vec2(col, lid * 31.0 + 2.0));
  float n = 5.0 + floor(hc * 6.0);
  float vel = (max(uTps, 0.0) * n / 64.0 + n / 32.0) * spd;
  float scroll = (tk * n / 64.0 + it * n / 32.0) * spd;
  float yw = uv.y / ch + scroll + floor(h2(vec2(col, lid * 31.0 + 5.0)) * 16.0) + 0.37 * hc;
  float sm = mod(floor(yw), 256.0);
  float seg = floor(sm / 16.0);
  float hs = h3(vec3(col, seg, lid));
  float hs2 = h3(vec3(col, seg, lid + 7.0));
  float hs3 = h3(vec3(col, seg, lid + 13.0));
  float len = mix(1.5, 11.5, clamp(e * (0.35 + 0.65 * hs) + 0.1, 0.0, 1.0));
  float j = sm - seg * 16.0 - floor(hs2 * 4.0);
  float jf = j + fract(yw);
  float inRun = step(0.0, j) * clamp(len - j, 0.0, 1.0);
  float segOn = smoothstep(hs3 - 0.12, hs3 + 0.12, 0.4 + 0.55 * e);
  float colOn = smoothstep(hc2 - 0.12, hc2 + 0.12, 0.3 + 0.65 * e);
  float a = inRun * segOn * colOn;
  if (a <= 0.0) return vec3(0.0);
  float env = exp(-max(jf - 1.0, 0.0) / max(len * 0.38, 0.6));
  float head = smoothstep(1.7, 0.7, jf);

  vec2 g = vec2(fract(uv.x / cw), fract(yw));
  vec2 bc = (g - vec2(0.18, 0.1)) / vec2(0.64, 0.8) * vec2(3.0, 5.0);
  vec2 bi = floor(bc);
  vec2 bf = fract(bc) - 0.5;
  uint bits = hu(uint(int(sm)) * 747796405u ^ hu(uint(int(col)) + uint(int(lid)) * 1013u));
  bool inX = bi.x >= 0.0 && bi.x < 3.0;
  bool inside = inX && bi.y >= 0.0 && bi.y < 5.0;
  float on = inside ? float((bits >> uint(int(bi.x) + 3 * int(bi.y))) & 1u) : 0.0;
  float aa = px * 3.0 / (cw * 0.64);
  float d = length(max(abs(bf) - 0.16, 0.0)) - 0.22;
  float sharp = on * smoothstep(aa, -aa, d);
  // fast streams smear each glyph column into a line as bright as its bits
  float cnt = 0.0;
  if (inX) {
    for (int k = 0; k < 5; k++) cnt += float((bits >> uint(int(bi.x) + 3 * k)) & 1u);
  }
  float streak = inX ? (0.25 + cnt / 6.0) * smoothstep(0.28 + aa, 0.28 - aa, abs(bf.x)) : 0.0;
  float blur = smoothstep(0.06, 0.55, vel / 60.0);
  float glyph = mix(sharp, streak * 0.85, blur);

  vec3 tint = mix(uColor, vec3(1.0), head * 0.7);
  vec3 c = tint * glyph * env * (1.0 + head * 1.4);
  c += uColor * env * 0.06;
  vec2 q = (g - 0.5) * vec2(1.0, 1.3);
  c += mix(uColor, vec3(1.0), 0.35) * head * exp(-dot(q, q) * 5.0) * 0.3;
  return c * a;
}

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, 65536.0);
  float it = mod(iTime, 32768.0);
  vec3 col = vec3(0.004, 0.005, 0.008) + uColor * 0.02 * (0.7 - uv.y * 0.6);
  col += rainLayer(uv + vec2(0.37, 0.0), 0.022, 2.0, 0.5, e, tk, it, px) * 0.22;
  col += rainLayer(uv + vec2(0.11, 0.0), 0.032, 1.0, 0.75, e, tk, it, px) * 0.48;
  col += rainLayer(uv, 0.048, 0.0, 1.0, e, tk, it, px) * (0.8 + 0.35 * e);
  col *= 1.0 - 0.3 * dot(uv * vec2(0.5, 1.0), uv * vec2(0.5, 1.0));
  col = tone(col * 1.25);
  fragColor = vec4(col + dither(fragCoord), 1.0);
}

Similar shaders