Curl Drift

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-curl-drift" data-tps="12" data-color="#5fe3f5" 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-curl-drift");
  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); }

vec3 vnoised(vec2 p) {
  vec2 i = floor(p), f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f), du = 6.0 * f * (1.0 - f);
  float a = h2(i), b = h2(i + vec2(1.0, 0.0)), c = h2(i + vec2(0.0, 1.0)), d = h2(i + vec2(1.0, 1.0));
  float k = a - b - c + d;
  return vec3(a + (b - a) * u.x + (c - a) * u.y + k * u.x * u.y, du * (vec2(b - a, c - a) + k * u.yx));
}
// curl of a stream function: noise plus a gentle left to right current
vec2 flow(vec2 p, float t) {
  vec3 n1 = vnoised(p * 1.7 + vec2(t * 0.05, -t * 0.03));
  vec3 n2 = vnoised(p * 3.6 + vec2(-t * 0.04, t * 0.05) + 7.3);
  vec2 g = n1.yz * 1.7 + n2.yz * 3.6 * 0.35 + vec2(0.0, 0.85);
  return vec2(g.y, -g.x);
}

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, 4096.0);
  float t = mod(iTime, 8000.0);

  const float G = 0.08;      // seed cell
  const float H = 0.013;     // trace step
  const float LAM = 0.1;     // spacing of particles along a streak
  const float LMAX = 0.22;
  float rho = max(0.0042, px * 0.85);
  vec2 p = uv;
  float s = 0.0;
  float acc = 0.0, hot = 0.0;
  for (int j = 0; j < 18; j++) {
    vec2 v = flow(p, t);
    vec2 dir = v * inversesqrt(dot(v, v) + 1e-6);
    vec2 cell = floor(p / G);
    float ha = h2(cell), hb = h2(cell + vec2(71.0, 13.0)), hc = h2(cell + vec2(29.0, 57.0));
    vec2 sp = (cell + 0.5 + (vec2(ha, hb) - 0.5) * 0.5) * G;
    vec2 dd = sp - p;
    float ax = dot(dd, -dir);
    float lat = abs(dd.x * dir.y - dd.y * dir.x);
    float wAlong = max(0.0, 1.0 - abs(ax) / H);
    if (wAlong > 0.0 && lat < rho * 1.5) {
      float on = smoothstep(hc - 0.1, hc + 0.1, 0.38 + 0.57 * e);
      float n = 10.0 + floor(h2(cell + vec2(5.0, 91.0)) * 7.0);
      float ph = tk * n / 256.0 + it * n / 64.0 + hc * 3.0;
      float vel = (max(uTps, 0.0) * n / 256.0 + n / 64.0) * LAM;
      float tf = clamp(0.24 + vel * 0.6, 0.24, 0.93);
      float sArc = s + ax;
      float u = fract(ph - sArc / LAM);
      float env = smoothstep(0.0, 0.02, sArc) * smoothstep(LMAX, LMAX * 0.5, sArc);
      float tail = exp(-u / tf) * smoothstep(1.0, 0.86, u);
      float lw = smoothstep(rho, rho * 0.15, lat);
      float val = wAlong * lw * env * tail * on;
      acc += val;
      hot += val * exp(-u / (tf * 0.25));
    }
    p -= dir * H;
    s += H;
  }
  vec3 col = vec3(0.004, 0.005, 0.009) + uColor * 0.02 * (0.8 - length(uv) * 0.5);
  col += uColor * acc * (1.2 + 0.5 * e) + mix(uColor, vec3(1.0), 0.6) * hot * (0.7 + 0.4 * e);
  col *= 1.0 - 0.25 * dot(uv * vec2(0.5, 1.0), uv * vec2(0.5, 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 12.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.373, 0.890, 0.961)

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

vec3 vnoised(vec2 p) {
  vec2 i = floor(p), f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f), du = 6.0 * f * (1.0 - f);
  float a = h2(i), b = h2(i + vec2(1.0, 0.0)), c = h2(i + vec2(0.0, 1.0)), d = h2(i + vec2(1.0, 1.0));
  float k = a - b - c + d;
  return vec3(a + (b - a) * u.x + (c - a) * u.y + k * u.x * u.y, du * (vec2(b - a, c - a) + k * u.yx));
}
// curl of a stream function: noise plus a gentle left to right current
vec2 flow(vec2 p, float t) {
  vec3 n1 = vnoised(p * 1.7 + vec2(t * 0.05, -t * 0.03));
  vec3 n2 = vnoised(p * 3.6 + vec2(-t * 0.04, t * 0.05) + 7.3);
  vec2 g = n1.yz * 1.7 + n2.yz * 3.6 * 0.35 + vec2(0.0, 0.85);
  return vec2(g.y, -g.x);
}

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, 4096.0);
  float t = mod(iTime, 8000.0);

  const float G = 0.08;      // seed cell
  const float H = 0.013;     // trace step
  const float LAM = 0.1;     // spacing of particles along a streak
  const float LMAX = 0.22;
  float rho = max(0.0042, px * 0.85);
  vec2 p = uv;
  float s = 0.0;
  float acc = 0.0, hot = 0.0;
  for (int j = 0; j < 18; j++) {
    vec2 v = flow(p, t);
    vec2 dir = v * inversesqrt(dot(v, v) + 1e-6);
    vec2 cell = floor(p / G);
    float ha = h2(cell), hb = h2(cell + vec2(71.0, 13.0)), hc = h2(cell + vec2(29.0, 57.0));
    vec2 sp = (cell + 0.5 + (vec2(ha, hb) - 0.5) * 0.5) * G;
    vec2 dd = sp - p;
    float ax = dot(dd, -dir);
    float lat = abs(dd.x * dir.y - dd.y * dir.x);
    float wAlong = max(0.0, 1.0 - abs(ax) / H);
    if (wAlong > 0.0 && lat < rho * 1.5) {
      float on = smoothstep(hc - 0.1, hc + 0.1, 0.38 + 0.57 * e);
      float n = 10.0 + floor(h2(cell + vec2(5.0, 91.0)) * 7.0);
      float ph = tk * n / 256.0 + it * n / 64.0 + hc * 3.0;
      float vel = (max(uTps, 0.0) * n / 256.0 + n / 64.0) * LAM;
      float tf = clamp(0.24 + vel * 0.6, 0.24, 0.93);
      float sArc = s + ax;
      float u = fract(ph - sArc / LAM);
      float env = smoothstep(0.0, 0.02, sArc) * smoothstep(LMAX, LMAX * 0.5, sArc);
      float tail = exp(-u / tf) * smoothstep(1.0, 0.86, u);
      float lw = smoothstep(rho, rho * 0.15, lat);
      float val = wAlong * lw * env * tail * on;
      acc += val;
      hot += val * exp(-u / (tf * 0.25));
    }
    p -= dir * H;
    s += H;
  }
  vec3 col = vec3(0.004, 0.005, 0.009) + uColor * 0.02 * (0.8 - length(uv) * 0.5);
  col += uColor * acc * (1.2 + 0.5 * e) + mix(uColor, vec3(1.0), 0.6) * hot * (0.7 + 0.4 * e);
  col *= 1.0 - 0.25 * dot(uv * vec2(0.5, 1.0), uv * vec2(0.5, 1.0));
  col = tone(col * 1.3);
  fragColor = vec4(col + dither(fragCoord), 1.0);
}

Similar shaders