AI CSS Animations

Orbiting Swarm

Particles circle a glowing core on tilted orbits, like a thought held in mind. As the token rate climbs, more of them join in and their trails lengthen into bright arcs.

Also known as: particle orbit core, swarm around a sphere.

HTML + JS

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-orbiting-swarm" data-tps="20" data-color="#9d7bff" 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-orbiting-swarm");
  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); }

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, 512.0);
  float r0 = length(uv);
  float cr = 0.085;

  vec3 col = vec3(0.004, 0.004, 0.008) + uColor * 0.03 * exp(-r0 * 2.5);
  float cc = cos(0.42), cs = sin(0.42);

  vec2 uvs = uv * vec2(1.0 / 1.6, 1.0);
  float ruv = length(uvs);
  for (int i = 0; i < 36; i++) {
    float fi = float(i);
    float vis = smoothstep(fi - 1.5, fi + 1.5, 8.0 + 28.0 * e);
    if (vis <= 0.0) break;
    float ha = h1(fi * 7.0 + 1.0);
    float R = mix(0.15, 0.44, ha);
    // nothing on this orbit can reach a pixel outside its projected bounds
    if (ruv > R * 1.25 + 0.03) continue;
    float hb = h1(fi * 7.0 + 2.0), hc = h1(fi * 7.0 + 3.0);
    float hd = h1(fi * 7.0 + 4.0), he = h1(fi * 7.0 + 5.0);
    float incl = (hb - 0.5) * 1.4;
    float node = hc * TAU;
    float n = floor(mix(16.0, 6.0, ha)) + floor(hd * 3.0);
    float rev = fract(tk * n / 1024.0 + it * n / 512.0 + he);
    float rps = max(uTps, 0.0) * n / 1024.0 + n / 512.0;
    float tr = clamp(rps * TAU * 0.075 + 0.1, 0.1, 2.4);
    // orbit plane basis, then the camera tilt
    float ci = cos(incl), si = sin(incl), cn = cos(node), sn = sin(node);
    vec3 b1 = vec3(cn, 0.0, -sn);
    vec3 b2 = vec3(sn * ci, -si, cn * ci);
    b1 = vec3(b1.x, cc * b1.y - cs * b1.z, cs * b1.y + cc * b1.z);
    b2 = vec3(b2.x, cc * b2.y - cs * b2.z, cs * b2.y + cc * b2.z);
    float a = rev * TAU;
    float ca = cos(a), sa = sin(a);
    float stp = tr / 2.0;
    float cd = cos(stp), sd = sin(stp);
    vec2 P[3];
    float zh = 0.0;
    for (int k = 0; k < 3; k++) {
      vec3 p = R * (ca * b1 + sa * b2);
      if (k == 0) zh = p.z / R;
      P[k] = p.xy * vec2(1.6, 1.0) / (1.0 - p.z * 0.4);
      float ca2 = ca * cd + sa * sd;
      sa = sa * cd - ca * sd;
      ca = ca2;
    }
    float best = 1e9, u = 0.0, tt;
    for (int k = 0; k < 2; k++) {
      float d = segd(uv, P[k], P[k + 1], tt);
      if (d < best) { best = d; u = (float(k) + tt) / 2.0; }
    }
    float w = 0.0032 * (1.0 + 0.45 * zh) + px * 0.4;
    float occ = 1.0 - smoothstep(0.03, -0.03, zh) * (1.0 - smoothstep(cr * 0.8, cr * 1.05, length(P[0])));
    float trail = (1.0 - u) * (1.0 - u) * (smoothstep(w + px, w - px, best) * 0.7 + w * w * 3.0 / (best * best + w * w * 3.0) * 0.35);
    float hd2 = length(uv - P[0]);
    float headDot = smoothstep(w * 1.7 + px, w * 1.7 - px, hd2) * 0.9 + 0.00002 / (hd2 * hd2 + 0.00002) * 0.4;
    float depthB = 0.55 + 0.45 * (zh * 0.5 + 0.5);
    vec3 pc = mix(uColor, vec3(1.0), 0.15 + 0.45 * (1.0 - ha));
    col += pc * (trail + headDot) * vis * occ * depthB * (0.8 + 0.5 * e);
  }

  // the core: a lit sphere with a slow inner swirl
  float rot = TAU * fract(tk / 512.0 + it / 64.0);
  vec2 q = uv / cr;
  float rq = length(q);
  float body = smoothstep(1.0 + px / cr, 1.0 - px / cr, rq);
  float nz = sqrt(max(1.0 - rq * rq, 0.0));
  float ang = atan(q.y, q.x);
  float swirl = 0.5 + 0.5 * sin(ang * 3.0 + rot + rq * 5.0) * sin(ang * 2.0 - rot * 2.0 + 1.0);
  vec3 coreC = uColor * (0.25 + 0.55 * nz + 0.45 * swirl * nz) + vec3(1.0) * pow(nz, 5.0) * (0.35 + 0.4 * e);
  coreC += mix(uColor, vec3(1.0), 0.3) * pow(1.0 - nz, 2.5) * 1.1;
  col = mix(col, coreC * (0.75 + 0.6 * e), body);
  col += uColor * (0.006 / (r0 * r0 + 0.006)) * (0.25 + 0.45 * e) * (1.0 - body * 0.5);

  col *= 1.0 - 0.25 * dot(uv * vec2(0.5, 1.0), uv * vec2(0.5, 1.0));
  col = tone(col * 1.2);
  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>

GLSL for Shadertoy

// Inputs the site passes in, as constants for Shadertoy.
// uTps: tokens per second. uTokens: tokens so far. uColor: the accent.
#define uTps 20.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.616, 0.482, 1.000)

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

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, 512.0);
  float r0 = length(uv);
  float cr = 0.085;

  vec3 col = vec3(0.004, 0.004, 0.008) + uColor * 0.03 * exp(-r0 * 2.5);
  float cc = cos(0.42), cs = sin(0.42);

  vec2 uvs = uv * vec2(1.0 / 1.6, 1.0);
  float ruv = length(uvs);
  for (int i = 0; i < 36; i++) {
    float fi = float(i);
    float vis = smoothstep(fi - 1.5, fi + 1.5, 8.0 + 28.0 * e);
    if (vis <= 0.0) break;
    float ha = h1(fi * 7.0 + 1.0);
    float R = mix(0.15, 0.44, ha);
    // nothing on this orbit can reach a pixel outside its projected bounds
    if (ruv > R * 1.25 + 0.03) continue;
    float hb = h1(fi * 7.0 + 2.0), hc = h1(fi * 7.0 + 3.0);
    float hd = h1(fi * 7.0 + 4.0), he = h1(fi * 7.0 + 5.0);
    float incl = (hb - 0.5) * 1.4;
    float node = hc * TAU;
    float n = floor(mix(16.0, 6.0, ha)) + floor(hd * 3.0);
    float rev = fract(tk * n / 1024.0 + it * n / 512.0 + he);
    float rps = max(uTps, 0.0) * n / 1024.0 + n / 512.0;
    float tr = clamp(rps * TAU * 0.075 + 0.1, 0.1, 2.4);
    // orbit plane basis, then the camera tilt
    float ci = cos(incl), si = sin(incl), cn = cos(node), sn = sin(node);
    vec3 b1 = vec3(cn, 0.0, -sn);
    vec3 b2 = vec3(sn * ci, -si, cn * ci);
    b1 = vec3(b1.x, cc * b1.y - cs * b1.z, cs * b1.y + cc * b1.z);
    b2 = vec3(b2.x, cc * b2.y - cs * b2.z, cs * b2.y + cc * b2.z);
    float a = rev * TAU;
    float ca = cos(a), sa = sin(a);
    float stp = tr / 2.0;
    float cd = cos(stp), sd = sin(stp);
    vec2 P[3];
    float zh = 0.0;
    for (int k = 0; k < 3; k++) {
      vec3 p = R * (ca * b1 + sa * b2);
      if (k == 0) zh = p.z / R;
      P[k] = p.xy * vec2(1.6, 1.0) / (1.0 - p.z * 0.4);
      float ca2 = ca * cd + sa * sd;
      sa = sa * cd - ca * sd;
      ca = ca2;
    }
    float best = 1e9, u = 0.0, tt;
    for (int k = 0; k < 2; k++) {
      float d = segd(uv, P[k], P[k + 1], tt);
      if (d < best) { best = d; u = (float(k) + tt) / 2.0; }
    }
    float w = 0.0032 * (1.0 + 0.45 * zh) + px * 0.4;
    float occ = 1.0 - smoothstep(0.03, -0.03, zh) * (1.0 - smoothstep(cr * 0.8, cr * 1.05, length(P[0])));
    float trail = (1.0 - u) * (1.0 - u) * (smoothstep(w + px, w - px, best) * 0.7 + w * w * 3.0 / (best * best + w * w * 3.0) * 0.35);
    float hd2 = length(uv - P[0]);
    float headDot = smoothstep(w * 1.7 + px, w * 1.7 - px, hd2) * 0.9 + 0.00002 / (hd2 * hd2 + 0.00002) * 0.4;
    float depthB = 0.55 + 0.45 * (zh * 0.5 + 0.5);
    vec3 pc = mix(uColor, vec3(1.0), 0.15 + 0.45 * (1.0 - ha));
    col += pc * (trail + headDot) * vis * occ * depthB * (0.8 + 0.5 * e);
  }

  // the core: a lit sphere with a slow inner swirl
  float rot = TAU * fract(tk / 512.0 + it / 64.0);
  vec2 q = uv / cr;
  float rq = length(q);
  float body = smoothstep(1.0 + px / cr, 1.0 - px / cr, rq);
  float nz = sqrt(max(1.0 - rq * rq, 0.0));
  float ang = atan(q.y, q.x);
  float swirl = 0.5 + 0.5 * sin(ang * 3.0 + rot + rq * 5.0) * sin(ang * 2.0 - rot * 2.0 + 1.0);
  vec3 coreC = uColor * (0.25 + 0.55 * nz + 0.45 * swirl * nz) + vec3(1.0) * pow(nz, 5.0) * (0.35 + 0.4 * e);
  coreC += mix(uColor, vec3(1.0), 0.3) * pow(1.0 - nz, 2.5) * 1.1;
  col = mix(col, coreC * (0.75 + 0.6 * e), body);
  col += uColor * (0.006 / (r0 * r0 + 0.006)) * (0.25 + 0.45 * e) * (1.0 - body * 0.5);

  col *= 1.0 - 0.25 * dot(uv * vec2(0.5, 1.0), uv * vec2(0.5, 1.0));
  col = tone(col * 1.2);
  fragColor = vec4(col + dither(fragCoord), 1.0);
}

Customizing this shader

  • Speed: uTps is the token rate and uTokens the running count. The standalone runner adds a natural wobble to a fixed rate, the way real streams speed up and slow down.
  • Color: set data-color on the canvas, or change uColor in the Shadertoy version. Currently previewing #9d7bff.
  • Size: style the canvas with CSS. It renders at up to twice your screen's pixel density and stops drawing while it is off screen.
  • Reduced motion: the runner draws a single still frame for people who asked their OS for less motion.

Similar shaders

Glass Orb with Swirling Thought
Roiling Thought Blob
3D Neural Constellation
Drifting Gyroid Lattice