Roiling Thought Blob

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-roiling-thought-blob" data-tps="90" data-color="#ff4f8b" 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-roiling-thought-blob");
  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;
}

vec3 gM0, gM1, gM2, gM3, gP1, gP2, gA;

float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float disp(vec3 p) {
  float d = gA.x * sin(p.x * 2.3 + gP1.x) * sin(p.y * 2.1 + gP1.y) * sin(p.z * 2.5 + gP1.z);
  vec3 q = p.yzx;
  d += gA.y * sin(q.x * 4.7 + gP2.x) * sin(q.y * 4.3 + gP2.y) * sin(q.z * 5.1 + gP2.z);
  d += gA.z * sin(p.x * 9.1 + gP2.z) * sin(p.y * 8.3 + gP1.x) * sin(p.z * 8.7 + gP2.y);
  return d;
}

float map(vec3 p) {
  float d = length(p - gM0) - 0.5;
  d = smin(d, length(p - gM1) - 0.47, 0.4);
  d = smin(d, length(p - gM2) - 0.42, 0.4);
  d = smin(d, length(p - gM3) - 0.4, 0.4);
  return d + disp(p);
}

vec3 blobEnv(vec3 r, vec3 acc, vec3 acc2) {
  float key = smoothstep(0.84, 0.97, dot(r, normalize(vec3(-0.5, 0.8, 0.45))));
  float rimA = smoothstep(0.55, 1.0, dot(r, normalize(vec3(1.0, 0.25, -0.35))));
  float rimB = smoothstep(0.55, 1.0, dot(r, normalize(vec3(-1.0, -0.2, -0.3))));
  float low = smoothstep(0.1, -0.7, r.y) * 0.06;
  return vec3(1.0) * key * 1.8 + acc * rimA * 1.4 + acc2 * rimB * 1.0 + acc * (low + 0.01);
}

vec3 calcNormal(vec3 p) {
  vec2 k = vec2(1.0, -1.0) * 0.0015;
  return normalize(k.xyy * map(p + k.xyy) + k.yyx * map(p + k.yyx) + k.yxy * map(p + k.yxy) + k.xxx * map(p + k.xxx));
}

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.45);
  vec3 hot = mix(acc, vec3(1.0, 0.92, 0.85), 0.55);
  float e = 1.0 - exp(-uTps / 90.0);
  float a = turn(iTime, 0.23) + turn(uTokens, 0.008);
  float b = turn(iTime, 0.17) + turn(uTokens, 0.014);
  float c = turn(iTime, 0.29) + turn(uTokens, 0.024);
  // two mirrored pairs of lobes, so the mass stays centred while it morphs
  gM0 = vec3(0.4 * sin(a), 0.14 * cos(b), 0.25 * sin(b));
  gM1 = vec3(-0.4 * sin(a + 0.9), -0.14 * cos(b + 0.7), -0.25 * sin(c));
  gM2 = vec3(0.22 * cos(c + 2.0), 0.24 * sin(a + 1.0), 0.3 * cos(b + 2.0));
  gM3 = vec3(-0.22 * cos(c + 2.6), -0.24 * sin(a + 1.8), -0.3 * cos(a + 3.0));
  gP1 = vec3(a, b + 1.0, c + 2.0);
  gP2 = vec3(2.0 * b, c + 1.0, 2.0 * a + 3.0);
  gA = vec3(0.085 + 0.07 * e, 0.03 + 0.06 * e, 0.008 + 0.024 * e);

  vec3 ro = vec3(0.0, 0.3, 3.4);
  vec3 rd = normalize(vec3(uv, -1.5));
  rd.yz *= rot(-0.085);
  vec3 col = acc * 0.014 * smoothstep(1.1, 0.0, length(uv - vec2(0.0, -0.1)));

  // march from the bounding sphere, keeping the closest pass for soft edges
  float bb = dot(ro, rd);
  float h = bb * bb - dot(ro, ro) + 1.5 * 1.5;
  if (h > 0.0) {
    float t = -bb - sqrt(h);
    float tEnd = -bb + sqrt(h);
    float dmin = 1e3, tmin = t;
    for (int i = 0; i < 64; i++) {
      float d = map(ro + rd * t);
      if (d < dmin) { dmin = d; tmin = t; }
      if (d < 0.0008 * t || t > tEnd) break;
      t += d * 0.8;
    }
    float pxw = 1.6 * tmin / (1.5 * iResolution.y);
    float cover = 1.0 - smoothstep(0.0, pxw, dmin);
    if (cover > 0.0) {
      vec3 p = ro + rd * tmin;
      vec3 n = calcNormal(p);
      float ao = clamp(map(p + n * 0.16) / 0.16, 0.0, 1.0);
      // how much blob lies behind the surface: thin parts let the inner light through
      float thick = clamp(-map(p - n * 0.3) / 0.3, 0.0, 1.0);
      float cosv = clamp(-dot(rd, n), 0.0, 1.0);
      vec3 r = reflect(rd, n);
      float F = 0.08 + 0.92 * pow(1.0 - cosv, 5.0);

      // black glass skin: reflections of a soft studio, coloured rims
      vec3 body = blobEnv(r, acc, acc2) * F * (0.4 + 0.6 * ao) * 1.6;
      body += acc * 0.012 * ao;
      // light from the molten core: veins along the moving folds, creases and thin parts
      float dv = disp(p);
      float vein = exp(-abs(dv + 0.015) * mix(70.0, 45.0, e));
      float crease = pow(1.0 - ao, 1.6);
      float inner = vein * (0.35 + 0.65 * smoothstep(0.0, 0.5, cosv)) + crease * 0.8 + (1.0 - thick) * 0.25;
      body += mix(acc, hot, clamp(vein * e, 0.0, 1.0)) * inner * (0.2 + 2.0 * e) * (1.0 - F);
      col = mix(col, body, cover);
    }
  }
  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 90.0
#define uTokens (iTime * uTps)
#define uColor vec3(1.000, 0.310, 0.545)

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

vec3 gM0, gM1, gM2, gM3, gP1, gP2, gA;

float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float disp(vec3 p) {
  float d = gA.x * sin(p.x * 2.3 + gP1.x) * sin(p.y * 2.1 + gP1.y) * sin(p.z * 2.5 + gP1.z);
  vec3 q = p.yzx;
  d += gA.y * sin(q.x * 4.7 + gP2.x) * sin(q.y * 4.3 + gP2.y) * sin(q.z * 5.1 + gP2.z);
  d += gA.z * sin(p.x * 9.1 + gP2.z) * sin(p.y * 8.3 + gP1.x) * sin(p.z * 8.7 + gP2.y);
  return d;
}

float map(vec3 p) {
  float d = length(p - gM0) - 0.5;
  d = smin(d, length(p - gM1) - 0.47, 0.4);
  d = smin(d, length(p - gM2) - 0.42, 0.4);
  d = smin(d, length(p - gM3) - 0.4, 0.4);
  return d + disp(p);
}

vec3 blobEnv(vec3 r, vec3 acc, vec3 acc2) {
  float key = smoothstep(0.84, 0.97, dot(r, normalize(vec3(-0.5, 0.8, 0.45))));
  float rimA = smoothstep(0.55, 1.0, dot(r, normalize(vec3(1.0, 0.25, -0.35))));
  float rimB = smoothstep(0.55, 1.0, dot(r, normalize(vec3(-1.0, -0.2, -0.3))));
  float low = smoothstep(0.1, -0.7, r.y) * 0.06;
  return vec3(1.0) * key * 1.8 + acc * rimA * 1.4 + acc2 * rimB * 1.0 + acc * (low + 0.01);
}

vec3 calcNormal(vec3 p) {
  vec2 k = vec2(1.0, -1.0) * 0.0015;
  return normalize(k.xyy * map(p + k.xyy) + k.yyx * map(p + k.yyx) + k.yxy * map(p + k.yxy) + k.xxx * map(p + k.xxx));
}

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.45);
  vec3 hot = mix(acc, vec3(1.0, 0.92, 0.85), 0.55);
  float e = 1.0 - exp(-uTps / 90.0);
  float a = turn(iTime, 0.23) + turn(uTokens, 0.008);
  float b = turn(iTime, 0.17) + turn(uTokens, 0.014);
  float c = turn(iTime, 0.29) + turn(uTokens, 0.024);
  // two mirrored pairs of lobes, so the mass stays centred while it morphs
  gM0 = vec3(0.4 * sin(a), 0.14 * cos(b), 0.25 * sin(b));
  gM1 = vec3(-0.4 * sin(a + 0.9), -0.14 * cos(b + 0.7), -0.25 * sin(c));
  gM2 = vec3(0.22 * cos(c + 2.0), 0.24 * sin(a + 1.0), 0.3 * cos(b + 2.0));
  gM3 = vec3(-0.22 * cos(c + 2.6), -0.24 * sin(a + 1.8), -0.3 * cos(a + 3.0));
  gP1 = vec3(a, b + 1.0, c + 2.0);
  gP2 = vec3(2.0 * b, c + 1.0, 2.0 * a + 3.0);
  gA = vec3(0.085 + 0.07 * e, 0.03 + 0.06 * e, 0.008 + 0.024 * e);

  vec3 ro = vec3(0.0, 0.3, 3.4);
  vec3 rd = normalize(vec3(uv, -1.5));
  rd.yz *= rot(-0.085);
  vec3 col = acc * 0.014 * smoothstep(1.1, 0.0, length(uv - vec2(0.0, -0.1)));

  // march from the bounding sphere, keeping the closest pass for soft edges
  float bb = dot(ro, rd);
  float h = bb * bb - dot(ro, ro) + 1.5 * 1.5;
  if (h > 0.0) {
    float t = -bb - sqrt(h);
    float tEnd = -bb + sqrt(h);
    float dmin = 1e3, tmin = t;
    for (int i = 0; i < 64; i++) {
      float d = map(ro + rd * t);
      if (d < dmin) { dmin = d; tmin = t; }
      if (d < 0.0008 * t || t > tEnd) break;
      t += d * 0.8;
    }
    float pxw = 1.6 * tmin / (1.5 * iResolution.y);
    float cover = 1.0 - smoothstep(0.0, pxw, dmin);
    if (cover > 0.0) {
      vec3 p = ro + rd * tmin;
      vec3 n = calcNormal(p);
      float ao = clamp(map(p + n * 0.16) / 0.16, 0.0, 1.0);
      // how much blob lies behind the surface: thin parts let the inner light through
      float thick = clamp(-map(p - n * 0.3) / 0.3, 0.0, 1.0);
      float cosv = clamp(-dot(rd, n), 0.0, 1.0);
      vec3 r = reflect(rd, n);
      float F = 0.08 + 0.92 * pow(1.0 - cosv, 5.0);

      // black glass skin: reflections of a soft studio, coloured rims
      vec3 body = blobEnv(r, acc, acc2) * F * (0.4 + 0.6 * ao) * 1.6;
      body += acc * 0.012 * ao;
      // light from the molten core: veins along the moving folds, creases and thin parts
      float dv = disp(p);
      float vein = exp(-abs(dv + 0.015) * mix(70.0, 45.0, e));
      float crease = pow(1.0 - ao, 1.6);
      float inner = vein * (0.35 + 0.65 * smoothstep(0.0, 0.5, cosv)) + crease * 0.8 + (1.0 - thick) * 0.25;
      body += mix(acc, hot, clamp(vein * e, 0.0, 1.0)) * inner * (0.2 + 2.0 * e) * (1.0 - F);
      col = mix(col, body, cover);
    }
  }
  fragColor = vec4(finish(col, fragCoord), 1.0);
}

Similar shaders