Thinking Oscilloscope

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-thinking-oscilloscope" data-tps="52" data-color="#3cf2a0" 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-thinking-oscilloscope");
  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
float hash11(float p) { p = fract(p * 0.1031); p *= p + 33.33; p *= p + p; return fract(p); }
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); }
// the accent, lifted so a dark pick still glows
vec3 accent() { return uColor / max(0.25, max(uColor.r, max(uColor.g, uColor.b))); }
// rotate a colour's hue around the grey axis, for a companion tone
vec3 hueRot(vec3 c, float a) {
  const vec3 k = vec3(0.57735027);
  float ca = cos(a);
  return max(c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca), 0.0);
}
// 0 at rest, toward 1 as the stream speeds up
float energy() { return 1.0 - exp(-max(uTps, 0.0) / 90.0); }
vec3 stage(vec2 uv) { return vec3(0.008, 0.009, 0.013) + accent() * 0.016 * exp(-dot(uv, uv) * 2.2); }
// soft shoulder so hot cores bloom toward white, plus a dither against banding
vec4 finish(vec3 c, vec2 fc) {
  c = 1.0 - exp(-max(c, 0.0) * 1.35);
  c += (hash12(fc) + hash12(fc + 17.13) - 1.0) / 255.0;
  return vec4(c, 1.0);
}

// the trace: a carrier plus harmonics that wake up with throughput
float wave(float x, vec3 P, float f, float amp, float e) {
  float w = sin(x * f - P.x) * 0.62
          + sin(x * f * 2.13 - P.y + 1.3) * (0.12 + 0.25 * e)
          + sin(x * f * 4.71 - P.z + 0.4) * 0.14 * e;
  float taper = 1.0 - smoothstep(0.75, 1.15, abs(x));
  return w * amp * (0.35 + 0.65 * taper);
}

float segDist(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a, ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h);
}

// distance to the trace, from a short polyline around the pixel's column
float trace(vec2 uv, vec3 P, float f, float amp, float e) {
  const float st = 0.022;
  vec2 a = vec2(uv.x - 2.0 * st, wave(uv.x - 2.0 * st, P, f, amp, e));
  float d = 9.0;
  for (int i = -1; i <= 2; i++) {
    float x = uv.x + float(i) * st;
    vec2 b = vec2(x, wave(x, P, f, amp, e));
    d = min(d, segDist(uv, a, b));
    a = b;
  }
  return d;
}

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();
  vec3 A = accent();
  vec3 B = hueRot(A, -0.9);
  vec3 col = stage(uv) * 0.8;

  // graticule: ten divisions, a brighter centre cross, minor ticks
  vec2 g = abs(fract(uv / 0.1 + 0.5) - 0.5) * 0.1;
  float grid = smoothstep(px * 1.2, 0.0, min(g.x, g.y));
  float axis = smoothstep(px * 1.5, 0.0, min(abs(uv.x), abs(uv.y)));
  vec2 t = abs(fract(uv / 0.02 + 0.5) - 0.5) * 0.02;
  float ticks = smoothstep(px, 0.0, t.x) * step(abs(uv.y), 0.012) + smoothstep(px, 0.0, t.y) * step(abs(uv.x), 0.012);
  col += A * (grid * 0.045 + axis * 0.08 + ticks * 0.08);

  // throughput sets frequency and amplitude, tokens drive the phase
  float f = mix(4.0, 11.0, e);
  float amp = 0.1 + 0.2 * e;
  vec3 kp = vec3(0.05, 0.07, 0.09);
  vec3 ka = vec3(0.6, 0.9, 1.4);
  // phosphor persistence: a short smear behind the beam, never wider than a sliver
  float lagT = min(0.02, 0.09 / (kp.x * uTps + ka.x));
  float I = 0.0;
  for (int j = 0; j < 3; j++) {
    float lag = float(j) * lagT;
    vec3 P = mod(uTokens * kp + iTime * ka - lag * (uTps * kp + ka), TAU);
    float d = trace(uv, P, f, amp, e);
    float fade = 1.0 / (1.0 + float(j) * 1.8);
    float core = smoothstep(0.0026 + px, 0.0026 - px * 0.5, d);
    I += (core + exp(-d * 70.0) * 0.4 + exp(-d * 16.0) * 0.1) * fade;
  }
  col += mix(A, vec3(1.0), 0.25) * I * (0.65 + 0.45 * e);

  // a second, quieter channel underneath
  vec3 P2 = mod(uTokens * vec3(0.04, 0.07, 0.1) + iTime * vec3(0.35, 0.5, 0.8) + vec3(2.0, 0.5, 1.0), TAU);
  float d2 = trace(uv, P2, f * 0.55, amp * 0.55, e * 0.6);
  col += B * (smoothstep(0.0016 + px, 0.0016 - px * 0.5, d2) + exp(-d2 * 50.0) * 0.22) * (0.3 + 0.3 * e);

  // phosphor screen: faint scanlines and a vignette
  col *= 0.94 + 0.06 * sin(fragCoord.y * 3.14159);
  col *= 1.0 - 0.35 * smoothstep(0.6, 1.3, length(uv * vec2(0.8, 1.4)));
  fragColor = finish(col, fragCoord);
}

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 52.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.235, 0.949, 0.627)

#define TAU 6.28318530718
float hash11(float p) { p = fract(p * 0.1031); p *= p + 33.33; p *= p + p; return fract(p); }
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); }
// the accent, lifted so a dark pick still glows
vec3 accent() { return uColor / max(0.25, max(uColor.r, max(uColor.g, uColor.b))); }
// rotate a colour's hue around the grey axis, for a companion tone
vec3 hueRot(vec3 c, float a) {
  const vec3 k = vec3(0.57735027);
  float ca = cos(a);
  return max(c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca), 0.0);
}
// 0 at rest, toward 1 as the stream speeds up
float energy() { return 1.0 - exp(-max(uTps, 0.0) / 90.0); }
vec3 stage(vec2 uv) { return vec3(0.008, 0.009, 0.013) + accent() * 0.016 * exp(-dot(uv, uv) * 2.2); }
// soft shoulder so hot cores bloom toward white, plus a dither against banding
vec4 finish(vec3 c, vec2 fc) {
  c = 1.0 - exp(-max(c, 0.0) * 1.35);
  c += (hash12(fc) + hash12(fc + 17.13) - 1.0) / 255.0;
  return vec4(c, 1.0);
}

// the trace: a carrier plus harmonics that wake up with throughput
float wave(float x, vec3 P, float f, float amp, float e) {
  float w = sin(x * f - P.x) * 0.62
          + sin(x * f * 2.13 - P.y + 1.3) * (0.12 + 0.25 * e)
          + sin(x * f * 4.71 - P.z + 0.4) * 0.14 * e;
  float taper = 1.0 - smoothstep(0.75, 1.15, abs(x));
  return w * amp * (0.35 + 0.65 * taper);
}

float segDist(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a, ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h);
}

// distance to the trace, from a short polyline around the pixel's column
float trace(vec2 uv, vec3 P, float f, float amp, float e) {
  const float st = 0.022;
  vec2 a = vec2(uv.x - 2.0 * st, wave(uv.x - 2.0 * st, P, f, amp, e));
  float d = 9.0;
  for (int i = -1; i <= 2; i++) {
    float x = uv.x + float(i) * st;
    vec2 b = vec2(x, wave(x, P, f, amp, e));
    d = min(d, segDist(uv, a, b));
    a = b;
  }
  return d;
}

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();
  vec3 A = accent();
  vec3 B = hueRot(A, -0.9);
  vec3 col = stage(uv) * 0.8;

  // graticule: ten divisions, a brighter centre cross, minor ticks
  vec2 g = abs(fract(uv / 0.1 + 0.5) - 0.5) * 0.1;
  float grid = smoothstep(px * 1.2, 0.0, min(g.x, g.y));
  float axis = smoothstep(px * 1.5, 0.0, min(abs(uv.x), abs(uv.y)));
  vec2 t = abs(fract(uv / 0.02 + 0.5) - 0.5) * 0.02;
  float ticks = smoothstep(px, 0.0, t.x) * step(abs(uv.y), 0.012) + smoothstep(px, 0.0, t.y) * step(abs(uv.x), 0.012);
  col += A * (grid * 0.045 + axis * 0.08 + ticks * 0.08);

  // throughput sets frequency and amplitude, tokens drive the phase
  float f = mix(4.0, 11.0, e);
  float amp = 0.1 + 0.2 * e;
  vec3 kp = vec3(0.05, 0.07, 0.09);
  vec3 ka = vec3(0.6, 0.9, 1.4);
  // phosphor persistence: a short smear behind the beam, never wider than a sliver
  float lagT = min(0.02, 0.09 / (kp.x * uTps + ka.x));
  float I = 0.0;
  for (int j = 0; j < 3; j++) {
    float lag = float(j) * lagT;
    vec3 P = mod(uTokens * kp + iTime * ka - lag * (uTps * kp + ka), TAU);
    float d = trace(uv, P, f, amp, e);
    float fade = 1.0 / (1.0 + float(j) * 1.8);
    float core = smoothstep(0.0026 + px, 0.0026 - px * 0.5, d);
    I += (core + exp(-d * 70.0) * 0.4 + exp(-d * 16.0) * 0.1) * fade;
  }
  col += mix(A, vec3(1.0), 0.25) * I * (0.65 + 0.45 * e);

  // a second, quieter channel underneath
  vec3 P2 = mod(uTokens * vec3(0.04, 0.07, 0.1) + iTime * vec3(0.35, 0.5, 0.8) + vec3(2.0, 0.5, 1.0), TAU);
  float d2 = trace(uv, P2, f * 0.55, amp * 0.55, e * 0.6);
  col += B * (smoothstep(0.0016 + px, 0.0016 - px * 0.5, d2) + exp(-d2 * 50.0) * 0.22) * (0.3 + 0.3 * e);

  // phosphor screen: faint scanlines and a vignette
  col *= 0.94 + 0.06 * sin(fragCoord.y * 3.14159);
  col *= 1.0 - 0.35 * smoothstep(0.6, 1.3, length(uv * vec2(0.8, 1.4)));
  fragColor = finish(col, fragCoord);
}

Similar shaders