Beads on Threads

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-beads-on-threads" data-tps="140" data-color="#f472b6" 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-beads-on-threads");
  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 threadY(float x, float phj, float t, float vib, float fj) {
  float A = 0.24 + 0.03 * sin(x * 0.7 + t * 0.2);
  return A * sin(2.4 * x - phj + t * 0.25) + vib * sin(x * 13.0 - t * 4.0 + fj * 2.0);
}

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 vib = 0.004 + 0.012 * e;
  const float C = 0.11;
  vec3 Ld = normalize(vec3(-0.5, 0.65, 0.6));

  vec3 col = vec3(0.004, 0.004, 0.008) + uColor * 0.035 * exp(-uv.y * uv.y / 0.06) * (0.6 + 0.6 * e);
  float frontZ = -9.0;
  vec3 frontC = vec3(0.0);
  float frontA = 0.0;
  for (int j = 0; j < 5; j++) {
    float fj = float(j);
    float phj = fj * TAU / 5.0;
    vec3 tint = mix(uColor, uColor.yzx, 0.12 * fj / 4.0);
    // the thread itself
    float A = 0.24 + 0.03 * sin(uv.x * 0.7 + t * 0.2);
    float arg = 2.4 * uv.x - phj + t * 0.25;
    float yc = threadY(uv.x, phj, t, vib, fj);
    float slope = A * 2.4 * cos(arg) + vib * 13.0 * cos(uv.x * 13.0 - t * 4.0 + fj * 2.0);
    float z = cos(arg);
    float dl = abs(uv.y - yc) * inversesqrt(1.0 + slope * slope);
    float lw = 0.0009 * (1.0 + 0.5 * z);
    col += tint * (smoothstep(lw + px, lw - px, dl) * 0.32 + exp(-dl / 0.012) * 0.05) * (0.45 + 0.35 * z);

    // beads strung on it
    float n = 6.0 + mod(fj * 3.0, 4.0);
    float scroll = tk * n / 128.0 + it * n / 64.0;
    float vel = max(uTps, 0.0) * n / 128.0 + n / 64.0;
    float st = clamp(vel / 40.0, 0.0, 0.9) * C;
    float blur = smoothstep(0.08, 0.5, vel / 60.0);
    float s = uv.x / C - scroll;
    float ci = floor(s);
    for (int q = -1; q <= 1; q++) {
      float cc = ci + float(q);
      float id = mod(cc, 256.0);
      float ha = h3(vec3(id, fj, 1.0));
      float on = smoothstep(ha - 0.08, ha + 0.08, 0.38 + 0.55 * e);
      if (on <= 0.0) continue;
      float hb = h3(vec3(id, fj, 2.0)), hc = h3(vec3(id, fj, 3.0));
      float xb = (cc + mix(0.32, 0.68, hb) + scroll) * C;
      float argb = 2.4 * xb - phj + t * 0.25;
      vec2 B = vec2(xb, threadY(xb, phj, t, vib, fj));
      vec2 T = vec2(xb - st, threadY(xb - st, phj, t, vib, fj));
      float zb = cos(argb);
      float rb = C * 0.2 * (0.7 + 0.3 * zb) * (0.8 + 0.4 * hc);
      float tt;
      float d = segd(uv, T, B, tt);
      float alpha = smoothstep(rb + px, rb - px, d) * on;
      vec2 l = (uv - B) / rb;
      vec3 nn = vec3(l, sqrt(max(1.0 - dot(l, l), 0.0)));
      float diff = max(dot(nn, Ld), 0.0);
      float spec = pow(max(dot(reflect(-Ld, nn), vec3(0.0, 0.0, 1.0)), 0.0), 28.0);
      vec3 sphere = tint * (0.18 + 0.95 * diff) + vec3(1.0) * spec * 0.9;
      vec3 streakC = mix(tint, vec3(1.0), 0.3) * mix(0.25, 1.1, tt * tt);
      vec3 bc = mix(sphere, streakC, blur) * (0.5 + 0.5 * (zb * 0.5 + 0.5)) * (0.85 + 0.4 * e);
      if (alpha > 0.01 && zb > frontZ) { frontZ = zb; frontC = bc; frontA = alpha; }
      col += tint * on * exp(-max(d - rb, 0.0) / (rb * 0.8)) * 0.12 * (0.5 + 0.5 * zb);
    }
  }
  col = mix(col, frontC, frontA);
  col *= 1.0 - 0.25 * 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 140.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.957, 0.447, 0.714)

#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 threadY(float x, float phj, float t, float vib, float fj) {
  float A = 0.24 + 0.03 * sin(x * 0.7 + t * 0.2);
  return A * sin(2.4 * x - phj + t * 0.25) + vib * sin(x * 13.0 - t * 4.0 + fj * 2.0);
}

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 vib = 0.004 + 0.012 * e;
  const float C = 0.11;
  vec3 Ld = normalize(vec3(-0.5, 0.65, 0.6));

  vec3 col = vec3(0.004, 0.004, 0.008) + uColor * 0.035 * exp(-uv.y * uv.y / 0.06) * (0.6 + 0.6 * e);
  float frontZ = -9.0;
  vec3 frontC = vec3(0.0);
  float frontA = 0.0;
  for (int j = 0; j < 5; j++) {
    float fj = float(j);
    float phj = fj * TAU / 5.0;
    vec3 tint = mix(uColor, uColor.yzx, 0.12 * fj / 4.0);
    // the thread itself
    float A = 0.24 + 0.03 * sin(uv.x * 0.7 + t * 0.2);
    float arg = 2.4 * uv.x - phj + t * 0.25;
    float yc = threadY(uv.x, phj, t, vib, fj);
    float slope = A * 2.4 * cos(arg) + vib * 13.0 * cos(uv.x * 13.0 - t * 4.0 + fj * 2.0);
    float z = cos(arg);
    float dl = abs(uv.y - yc) * inversesqrt(1.0 + slope * slope);
    float lw = 0.0009 * (1.0 + 0.5 * z);
    col += tint * (smoothstep(lw + px, lw - px, dl) * 0.32 + exp(-dl / 0.012) * 0.05) * (0.45 + 0.35 * z);

    // beads strung on it
    float n = 6.0 + mod(fj * 3.0, 4.0);
    float scroll = tk * n / 128.0 + it * n / 64.0;
    float vel = max(uTps, 0.0) * n / 128.0 + n / 64.0;
    float st = clamp(vel / 40.0, 0.0, 0.9) * C;
    float blur = smoothstep(0.08, 0.5, vel / 60.0);
    float s = uv.x / C - scroll;
    float ci = floor(s);
    for (int q = -1; q <= 1; q++) {
      float cc = ci + float(q);
      float id = mod(cc, 256.0);
      float ha = h3(vec3(id, fj, 1.0));
      float on = smoothstep(ha - 0.08, ha + 0.08, 0.38 + 0.55 * e);
      if (on <= 0.0) continue;
      float hb = h3(vec3(id, fj, 2.0)), hc = h3(vec3(id, fj, 3.0));
      float xb = (cc + mix(0.32, 0.68, hb) + scroll) * C;
      float argb = 2.4 * xb - phj + t * 0.25;
      vec2 B = vec2(xb, threadY(xb, phj, t, vib, fj));
      vec2 T = vec2(xb - st, threadY(xb - st, phj, t, vib, fj));
      float zb = cos(argb);
      float rb = C * 0.2 * (0.7 + 0.3 * zb) * (0.8 + 0.4 * hc);
      float tt;
      float d = segd(uv, T, B, tt);
      float alpha = smoothstep(rb + px, rb - px, d) * on;
      vec2 l = (uv - B) / rb;
      vec3 nn = vec3(l, sqrt(max(1.0 - dot(l, l), 0.0)));
      float diff = max(dot(nn, Ld), 0.0);
      float spec = pow(max(dot(reflect(-Ld, nn), vec3(0.0, 0.0, 1.0)), 0.0), 28.0);
      vec3 sphere = tint * (0.18 + 0.95 * diff) + vec3(1.0) * spec * 0.9;
      vec3 streakC = mix(tint, vec3(1.0), 0.3) * mix(0.25, 1.1, tt * tt);
      vec3 bc = mix(sphere, streakC, blur) * (0.5 + 0.5 * (zb * 0.5 + 0.5)) * (0.85 + 0.4 * e);
      if (alpha > 0.01 && zb > frontZ) { frontZ = zb; frontC = bc; frontA = alpha; }
      col += tint * on * exp(-max(d - rb, 0.0) / (rb * 0.8)) * 0.12 * (0.5 + 0.5 * zb);
    }
  }
  col = mix(col, frontC, frontA);
  col *= 1.0 - 0.25 * 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