3D Neural Constellation

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-neural-constellation" data-tps="200" data-color="#4fc3ff" 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-neural-constellation");
  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
#define PI 3.14159265359
mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
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); }
// a phase in radians that wraps at whole turns, so it stays precise for hours
float turn(float x, float k) { return mod(x * k, TAU); }
vec3 toLin(vec3 c) { return pow(max(c, vec3(0.0)), vec3(2.2)); }
vec3 hueShift(vec3 c, float a) {
  vec3 k = vec3(0.57735);
  float cs = cos(a);
  return max(c * cs + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - cs), vec3(0.0));
}
// ACES filmic curve, gamma and a tiny dither against banding
vec3 finish(vec3 c, vec2 fc) {
  c = max(c, vec3(0.0));
  c = clamp((c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14), 0.0, 1.0);
  c = pow(c, vec3(1.0 / 2.2));
  return c + (hash12(fc) + hash12(fc + 19.19) - 1.0) / 255.0;
}

#define N 18

vec3 gPh;
mat2 gYaw, gTilt;

vec3 nodePos(int i, vec3 ph) {
  float fi = float(i);
  float y = 1.0 - 2.0 * (fi + 0.5) / float(N);
  float r = sqrt(1.0 - y * y);
  float a = fi * 2.39996;
  vec3 p = vec3(cos(a) * r, y, sin(a) * r);
  p *= 0.6 + 0.4 * hash12(vec2(fi, 3.7));
  p *= 1.0 + 0.07 * sin(ph.x + fi * 1.9);
  return p * vec3(1.75, 0.95, 1.0);
}

// a node on screen: xy, then a depth weight in z
vec3 proj(int i, out vec3 w) {
  vec3 p = nodePos(i, gPh);
  w = p;
  p.xz *= gYaw;
  p.yz *= gTilt;
  float z = 3.3 - p.z;
  return vec3(p.xy * 1.45 / z, smoothstep(4.7, 2.3, z));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  vec3 acc = toLin(uColor);
  vec3 acc2 = hueShift(acc, -0.6);
  vec3 hot = mix(acc, vec3(1.0), 0.7);
  float e = 1.0 - exp(-uTps / 90.0);
  float px = 1.0 / iResolution.y;
  gPh = vec3(turn(iTime, 0.33), turn(iTime, 0.41), turn(iTime, 0.29));
  gYaw = rot(0.55 * sin(turn(iTime, 0.11)));
  gTilt = rot(0.3);

  vec3 col = acc * 0.02 * smoothstep(0.9, 0.0, length(uv * vec2(0.6, 1.0)));
  // faint dust drifting behind the network
  vec2 dg = uv * 34.0 + vec2(1.5 * sin(gPh.z), 0.0);
  vec2 dc = floor(dg);
  float dh = hash12(dc);
  vec2 dp = dc + 0.2 + 0.6 * vec2(dh, hash12(dc + 7.1));
  col += acc * smoothstep(0.08, 0.0, length(dg - dp)) * step(0.82, dh) * 0.12;
  float wake = 0.12 + 0.88 * e;
  float sigPh = fract(iTime * 0.09);
  float tokPh = fract(uTokens * 0.005);
  // two chains through the nodes (steps 1 and 5) make the links, each node projected once per chain
  for (int c = 0; c < 2; c++) {
    int stride = c == 0 ? 1 : 5;
    vec3 Wa, Wb;
    vec3 A = proj(0, Wa);
    for (int k = 1; k <= N; k++) {
      int j = (k * stride) % N;
      vec3 B = proj(j, Wb);
      if (c == 0) {
        // the node itself
        float dn = length(uv - B.xy);
        float rad = (1.4 + 2.2 * B.z) * px;
        float tw = 0.75 + 0.25 * sin(gPh.y + float(j) * 1.7);
        col += (hot * smoothstep(rad + px, rad - px, dn) * 1.3 + acc * exp(-dn * dn / (rad * rad * 14.0)) * (0.3 + 0.5 * e)) * tw * (0.35 + 0.65 * B.z);
      }
      vec2 pa = uv - A.xy, ba = B.xy - A.xy;
      float x = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-6), 0.0, 1.0);
      float d = length(pa - ba * x);
      float keep = smoothstep(1.75, 0.7, length(Wa - Wb));
      if (d < 0.035 && keep > 0.0) {
        float fid = float(c * N + k);
        float h1 = hash12(vec2(fid, 1.3)), h3 = fract(h1 * 37.17);
        float depth = 0.5 * (A.z + B.z);
        float dd = d * d / (px * px);
        float line = 0.6 / (1.0 + dd * 0.35);
        col += mix(acc, acc2, h1) * 0.5 * line * keep * depth * (0.25 + 0.35 * e);

        // a signal travelling the link, as fast as the tokens arrive
        float u = fract(h1 * 7.0 + sigPh + tokPh * (h3 > 0.5 ? 1.0 : 2.0));
        vec2 S = A.xy, T = B.xy;
        if (fract(h1 * 13.0) > 0.5) { x = 1.0 - x; S = B.xy; T = A.xy; }
        float on = smoothstep(h3 - 0.12, h3 + 0.12, wake) * keep;
        float tail = smoothstep(u - 0.35, u, x) * smoothstep(u + 0.01, u, x);
        float hd = length(uv - mix(S, T, u));
        float fade = sin(PI * u);
        float g = tail * tail * 0.8 / (1.0 + dd * 0.8) + 1.2 / (1.0 + hd * hd / (2.0 * px * px));
        // the node it reaches lights up as it lands
        g += smoothstep(0.7, 1.0, u) * 0.4 / (1.0 + dot(uv - T, uv - T) * 6000.0);
        col += hot * g * fade * on * depth * (0.5 + 0.9 * e);
      }
      A = B; Wa = Wb;
    }
  }

  fragColor = vec4(finish(col, 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 200.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.310, 0.765, 1.000)

#define TAU 6.28318530718
#define PI 3.14159265359
mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
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); }
// a phase in radians that wraps at whole turns, so it stays precise for hours
float turn(float x, float k) { return mod(x * k, TAU); }
vec3 toLin(vec3 c) { return pow(max(c, vec3(0.0)), vec3(2.2)); }
vec3 hueShift(vec3 c, float a) {
  vec3 k = vec3(0.57735);
  float cs = cos(a);
  return max(c * cs + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - cs), vec3(0.0));
}
// ACES filmic curve, gamma and a tiny dither against banding
vec3 finish(vec3 c, vec2 fc) {
  c = max(c, vec3(0.0));
  c = clamp((c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14), 0.0, 1.0);
  c = pow(c, vec3(1.0 / 2.2));
  return c + (hash12(fc) + hash12(fc + 19.19) - 1.0) / 255.0;
}

#define N 18

vec3 gPh;
mat2 gYaw, gTilt;

vec3 nodePos(int i, vec3 ph) {
  float fi = float(i);
  float y = 1.0 - 2.0 * (fi + 0.5) / float(N);
  float r = sqrt(1.0 - y * y);
  float a = fi * 2.39996;
  vec3 p = vec3(cos(a) * r, y, sin(a) * r);
  p *= 0.6 + 0.4 * hash12(vec2(fi, 3.7));
  p *= 1.0 + 0.07 * sin(ph.x + fi * 1.9);
  return p * vec3(1.75, 0.95, 1.0);
}

// a node on screen: xy, then a depth weight in z
vec3 proj(int i, out vec3 w) {
  vec3 p = nodePos(i, gPh);
  w = p;
  p.xz *= gYaw;
  p.yz *= gTilt;
  float z = 3.3 - p.z;
  return vec3(p.xy * 1.45 / z, smoothstep(4.7, 2.3, z));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  vec3 acc = toLin(uColor);
  vec3 acc2 = hueShift(acc, -0.6);
  vec3 hot = mix(acc, vec3(1.0), 0.7);
  float e = 1.0 - exp(-uTps / 90.0);
  float px = 1.0 / iResolution.y;
  gPh = vec3(turn(iTime, 0.33), turn(iTime, 0.41), turn(iTime, 0.29));
  gYaw = rot(0.55 * sin(turn(iTime, 0.11)));
  gTilt = rot(0.3);

  vec3 col = acc * 0.02 * smoothstep(0.9, 0.0, length(uv * vec2(0.6, 1.0)));
  // faint dust drifting behind the network
  vec2 dg = uv * 34.0 + vec2(1.5 * sin(gPh.z), 0.0);
  vec2 dc = floor(dg);
  float dh = hash12(dc);
  vec2 dp = dc + 0.2 + 0.6 * vec2(dh, hash12(dc + 7.1));
  col += acc * smoothstep(0.08, 0.0, length(dg - dp)) * step(0.82, dh) * 0.12;
  float wake = 0.12 + 0.88 * e;
  float sigPh = fract(iTime * 0.09);
  float tokPh = fract(uTokens * 0.005);
  // two chains through the nodes (steps 1 and 5) make the links, each node projected once per chain
  for (int c = 0; c < 2; c++) {
    int stride = c == 0 ? 1 : 5;
    vec3 Wa, Wb;
    vec3 A = proj(0, Wa);
    for (int k = 1; k <= N; k++) {
      int j = (k * stride) % N;
      vec3 B = proj(j, Wb);
      if (c == 0) {
        // the node itself
        float dn = length(uv - B.xy);
        float rad = (1.4 + 2.2 * B.z) * px;
        float tw = 0.75 + 0.25 * sin(gPh.y + float(j) * 1.7);
        col += (hot * smoothstep(rad + px, rad - px, dn) * 1.3 + acc * exp(-dn * dn / (rad * rad * 14.0)) * (0.3 + 0.5 * e)) * tw * (0.35 + 0.65 * B.z);
      }
      vec2 pa = uv - A.xy, ba = B.xy - A.xy;
      float x = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-6), 0.0, 1.0);
      float d = length(pa - ba * x);
      float keep = smoothstep(1.75, 0.7, length(Wa - Wb));
      if (d < 0.035 && keep > 0.0) {
        float fid = float(c * N + k);
        float h1 = hash12(vec2(fid, 1.3)), h3 = fract(h1 * 37.17);
        float depth = 0.5 * (A.z + B.z);
        float dd = d * d / (px * px);
        float line = 0.6 / (1.0 + dd * 0.35);
        col += mix(acc, acc2, h1) * 0.5 * line * keep * depth * (0.25 + 0.35 * e);

        // a signal travelling the link, as fast as the tokens arrive
        float u = fract(h1 * 7.0 + sigPh + tokPh * (h3 > 0.5 ? 1.0 : 2.0));
        vec2 S = A.xy, T = B.xy;
        if (fract(h1 * 13.0) > 0.5) { x = 1.0 - x; S = B.xy; T = A.xy; }
        float on = smoothstep(h3 - 0.12, h3 + 0.12, wake) * keep;
        float tail = smoothstep(u - 0.35, u, x) * smoothstep(u + 0.01, u, x);
        float hd = length(uv - mix(S, T, u));
        float fade = sin(PI * u);
        float g = tail * tail * 0.8 / (1.0 + dd * 0.8) + 1.2 / (1.0 + hd * hd / (2.0 * px * px));
        // the node it reaches lights up as it lands
        g += smoothstep(0.7, 1.0, u) * 0.4 / (1.0 + dot(uv - T, uv - T) * 6000.0);
        col += hot * g * fade * on * depth * (0.5 + 0.9 * e);
      }
      A = B; Wa = Wb;
    }
  }

  fragColor = vec4(finish(col, fragCoord), 1.0);
}

Similar shaders