Heat Haze

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-heat-haze" data-tps="55" data-color="#ff7a3d" 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-heat-haze");
  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;
// Gradient noise on a lattice that repeats every PER cells. Moving offsets are
// wrapped to whole periods, so the motion loops without a seam.
const float PER = 32.0;
// Octave turn and scale: an integer matrix keeps the lattice periodic.
const mat2 OCT = mat2(2.0, -1.0, 1.0, 2.0);

vec2 grad(vec2 i) {
  i = mod(i, PER);
  vec3 q = fract(vec3(i.xyx) * vec3(0.1031, 0.1030, 0.0973));
  q += dot(q, q.yzx + 33.33);
  return fract((q.xx + q.yz) * q.zy) * 2.0 - 1.0;
}

float noise(vec2 p) {
  vec2 i = floor(p), f = fract(p);
  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
  float a = dot(grad(i), f);
  float b = dot(grad(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));
  float c = dot(grad(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));
  float d = dot(grad(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));
  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

// A phase that climbs with x but wraps to the noise period.
float wrapP(float x) { return mod(x, PER); }

// Rotate a colour around the grey axis: hue shifts that follow uColor.
vec3 hue(vec3 c, float a) {
  const vec3 k = vec3(0.57735);
  float ca = cos(a);
  return c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca);
}

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

// Soft shoulder tone map plus a one step dither against banding.
vec3 finish(vec3 c, vec2 fc) {
  c = 1.0 - exp(-max(c, 0.0));
  return c + (hash12(fc) - 0.5) / 255.0;
}

const float HZ = -0.12;

// The still scene the haze looks through.
vec3 scene(vec2 q, float px, float drift) {
  float above = q.y - HZ;
  vec3 top = hue(uColor, -1.6) * 0.03 + 0.004;
  vec3 mid = hue(uColor, -0.55) * 0.3;
  vec3 low = uColor * 0.9;
  vec3 sky = mix(low, mid, smoothstep(0.0, 0.16, above));
  sky = mix(sky, top, smoothstep(0.1, 0.6, above));
  // the sun, low on the ridge, cut by slits that widen toward the ground
  vec2 sd = q - vec2(0.38, HZ + 0.1);
  float r = length(sd);
  float disk = smoothstep(0.15 + px, 0.15 - px, r);
  float sl = sd.y * 30.0;
  float gap = clamp(-sd.y * 4.0, 0.0, 0.6);
  float sw = px * 30.0;
  float slit = smoothstep(gap - sw, gap + sw, abs(fract(sl) - 0.5) * 2.0);
  disk *= mix(1.0, slit, step(sd.y, 0.0));
  vec3 sun = mix(uColor, vec3(1.0, 0.92, 0.75), 0.3) * 1.5;
  sun = mix(sun, hue(uColor, -0.35) * 1.4, smoothstep(0.12, -0.15, sd.y));
  sky += uColor * exp(-r * 5.0) * 0.4;
  sky = mix(sky, sun, disk);
  // thin strata of cloud drawn across the sun, dark against the glow
  float st = noise(vec2(q.x * 1.6 + 2.0 + drift, q.y * 34.0)) + 0.5 * noise(vec2(q.x * 4.0 - drift, q.y * 60.0 + 7.0));
  float strata = smoothstep(0.12, 0.42, st) * smoothstep(0.02, 0.08, above) * smoothstep(0.42, 0.15, above);
  sky = mix(sky, hue(uColor, -0.5) * 0.07, strata * 0.75);
  // two ridges: the far one hazy, the near one black
  float far = HZ + 0.05 + 0.035 * noise(vec2(q.x * 3.0 + 4.0, 0.5)) + 0.012 * noise(vec2(q.x * 11.0, 2.5));
  float nearR = HZ + 0.015 + 0.03 * noise(vec2(q.x * 2.0 + 9.0, 1.5)) + 0.008 * noise(vec2(q.x * 9.0, 4.5));
  sky = mix(sky, mix(sky, hue(uColor, 0.6) * 0.1, 0.8), smoothstep(far + px, far - px, q.y));
  sky = mix(sky, vec3(0.004, 0.004, 0.008), smoothstep(nearR + px, nearR - px, q.y));
  return sky;
}

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 = 1.0 - exp(-uTps / 80.0);

  // haze climbs at the token rate; a second, finer layer joins when busy
  float rise1 = wrapP(uTokens * 0.03) + wrapP(iTime * 0.22);
  float rise2 = wrapP(uTokens * 0.048) + wrapP(iTime * 0.3);
  float rise3 = wrapP(uTokens * 0.012) + wrapP(iTime * 0.1);
  float drift = wrapP(iTime * 0.03) + wrapP(uTokens * 0.0009);

  // columns of hot air: where they stand, the haze is strongest
  float colm = smoothstep(-0.25, 0.35, noise(vec2(uv.x * 3.2 + drift, 0.5)) + 0.25 * e);
  float band = exp(-abs(uv.y - HZ - 0.04) * (3.4 - 1.4 * e));
  float heat = band * (0.35 + 0.65 * colm);

  vec2 g = vec2(uv.x * 7.0, uv.y * 8.0);
  vec2 d = vec2(noise(g + vec2(0.0, -rise1)), noise(g + vec2(5.3, -rise1)));
  d += (0.3 + 0.6 * e) * vec2(noise(g * 2.0 + vec2(1.7, -rise2)), noise(g * 2.0 + vec2(8.1, -rise2)));
  float amp = (0.008 + 0.05 * e) * heat;
  vec2 q = uv + d * vec2(0.7, 1.0) * amp;

  vec3 col;
  if (q.y > HZ) {
    col = scene(q, px, drift);
  } else {
    // the ground: a mirage pool mirrors the sky just under the horizon
    vec2 m = vec2(q.x + d.x * amp * 2.0, 2.0 * HZ - q.y + 0.02);
    float pool = exp(-(HZ - q.y) * 9.0);
    col = mix(vec3(0.004, 0.004, 0.008), scene(m, px, drift) * 0.6, pool * (0.55 + 0.25 * e));
  }
  // heat ripples: thin wavy lines of bent light climbing the columns,
  // denser and brighter as the stream speeds up
  float rp = noise(vec2(uv.x * 9.0, uv.y * 4.0) + vec2(0.0, -rise3) + d * 0.6);
  float rip = exp(-abs(rp) / (0.035 + fwidth(rp)));
  float rp2 = noise(vec2(uv.x * 16.0, uv.y * 7.0) + vec2(3.0, -rise3 * 2.0) + d);
  rip += (0.15 + 0.85 * e) * exp(-abs(rp2) / (0.03 + fwidth(rp2)));
  float lum = dot(col, vec3(0.3, 0.5, 0.2));
  col *= 1.0 + (rip * 0.85 - 0.25) * heat * (0.22 + 0.48 * e);
  col += mix(uColor, vec3(1.0), 0.4) * rip * heat * (0.02 + 0.08 * e) * smoothstep(0.0, 0.3, lum + 0.1);
  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 55.0
#define uTokens (iTime * uTps)
#define uColor vec3(1.000, 0.478, 0.239)

// Gradient noise on a lattice that repeats every PER cells. Moving offsets are
// wrapped to whole periods, so the motion loops without a seam.
const float PER = 32.0;
// Octave turn and scale: an integer matrix keeps the lattice periodic.
const mat2 OCT = mat2(2.0, -1.0, 1.0, 2.0);

vec2 grad(vec2 i) {
  i = mod(i, PER);
  vec3 q = fract(vec3(i.xyx) * vec3(0.1031, 0.1030, 0.0973));
  q += dot(q, q.yzx + 33.33);
  return fract((q.xx + q.yz) * q.zy) * 2.0 - 1.0;
}

float noise(vec2 p) {
  vec2 i = floor(p), f = fract(p);
  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
  float a = dot(grad(i), f);
  float b = dot(grad(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));
  float c = dot(grad(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));
  float d = dot(grad(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));
  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

// A phase that climbs with x but wraps to the noise period.
float wrapP(float x) { return mod(x, PER); }

// Rotate a colour around the grey axis: hue shifts that follow uColor.
vec3 hue(vec3 c, float a) {
  const vec3 k = vec3(0.57735);
  float ca = cos(a);
  return c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca);
}

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

// Soft shoulder tone map plus a one step dither against banding.
vec3 finish(vec3 c, vec2 fc) {
  c = 1.0 - exp(-max(c, 0.0));
  return c + (hash12(fc) - 0.5) / 255.0;
}

const float HZ = -0.12;

// The still scene the haze looks through.
vec3 scene(vec2 q, float px, float drift) {
  float above = q.y - HZ;
  vec3 top = hue(uColor, -1.6) * 0.03 + 0.004;
  vec3 mid = hue(uColor, -0.55) * 0.3;
  vec3 low = uColor * 0.9;
  vec3 sky = mix(low, mid, smoothstep(0.0, 0.16, above));
  sky = mix(sky, top, smoothstep(0.1, 0.6, above));
  // the sun, low on the ridge, cut by slits that widen toward the ground
  vec2 sd = q - vec2(0.38, HZ + 0.1);
  float r = length(sd);
  float disk = smoothstep(0.15 + px, 0.15 - px, r);
  float sl = sd.y * 30.0;
  float gap = clamp(-sd.y * 4.0, 0.0, 0.6);
  float sw = px * 30.0;
  float slit = smoothstep(gap - sw, gap + sw, abs(fract(sl) - 0.5) * 2.0);
  disk *= mix(1.0, slit, step(sd.y, 0.0));
  vec3 sun = mix(uColor, vec3(1.0, 0.92, 0.75), 0.3) * 1.5;
  sun = mix(sun, hue(uColor, -0.35) * 1.4, smoothstep(0.12, -0.15, sd.y));
  sky += uColor * exp(-r * 5.0) * 0.4;
  sky = mix(sky, sun, disk);
  // thin strata of cloud drawn across the sun, dark against the glow
  float st = noise(vec2(q.x * 1.6 + 2.0 + drift, q.y * 34.0)) + 0.5 * noise(vec2(q.x * 4.0 - drift, q.y * 60.0 + 7.0));
  float strata = smoothstep(0.12, 0.42, st) * smoothstep(0.02, 0.08, above) * smoothstep(0.42, 0.15, above);
  sky = mix(sky, hue(uColor, -0.5) * 0.07, strata * 0.75);
  // two ridges: the far one hazy, the near one black
  float far = HZ + 0.05 + 0.035 * noise(vec2(q.x * 3.0 + 4.0, 0.5)) + 0.012 * noise(vec2(q.x * 11.0, 2.5));
  float nearR = HZ + 0.015 + 0.03 * noise(vec2(q.x * 2.0 + 9.0, 1.5)) + 0.008 * noise(vec2(q.x * 9.0, 4.5));
  sky = mix(sky, mix(sky, hue(uColor, 0.6) * 0.1, 0.8), smoothstep(far + px, far - px, q.y));
  sky = mix(sky, vec3(0.004, 0.004, 0.008), smoothstep(nearR + px, nearR - px, q.y));
  return sky;
}

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 = 1.0 - exp(-uTps / 80.0);

  // haze climbs at the token rate; a second, finer layer joins when busy
  float rise1 = wrapP(uTokens * 0.03) + wrapP(iTime * 0.22);
  float rise2 = wrapP(uTokens * 0.048) + wrapP(iTime * 0.3);
  float rise3 = wrapP(uTokens * 0.012) + wrapP(iTime * 0.1);
  float drift = wrapP(iTime * 0.03) + wrapP(uTokens * 0.0009);

  // columns of hot air: where they stand, the haze is strongest
  float colm = smoothstep(-0.25, 0.35, noise(vec2(uv.x * 3.2 + drift, 0.5)) + 0.25 * e);
  float band = exp(-abs(uv.y - HZ - 0.04) * (3.4 - 1.4 * e));
  float heat = band * (0.35 + 0.65 * colm);

  vec2 g = vec2(uv.x * 7.0, uv.y * 8.0);
  vec2 d = vec2(noise(g + vec2(0.0, -rise1)), noise(g + vec2(5.3, -rise1)));
  d += (0.3 + 0.6 * e) * vec2(noise(g * 2.0 + vec2(1.7, -rise2)), noise(g * 2.0 + vec2(8.1, -rise2)));
  float amp = (0.008 + 0.05 * e) * heat;
  vec2 q = uv + d * vec2(0.7, 1.0) * amp;

  vec3 col;
  if (q.y > HZ) {
    col = scene(q, px, drift);
  } else {
    // the ground: a mirage pool mirrors the sky just under the horizon
    vec2 m = vec2(q.x + d.x * amp * 2.0, 2.0 * HZ - q.y + 0.02);
    float pool = exp(-(HZ - q.y) * 9.0);
    col = mix(vec3(0.004, 0.004, 0.008), scene(m, px, drift) * 0.6, pool * (0.55 + 0.25 * e));
  }
  // heat ripples: thin wavy lines of bent light climbing the columns,
  // denser and brighter as the stream speeds up
  float rp = noise(vec2(uv.x * 9.0, uv.y * 4.0) + vec2(0.0, -rise3) + d * 0.6);
  float rip = exp(-abs(rp) / (0.035 + fwidth(rp)));
  float rp2 = noise(vec2(uv.x * 16.0, uv.y * 7.0) + vec2(3.0, -rise3 * 2.0) + d);
  rip += (0.15 + 0.85 * e) * exp(-abs(rp2) / (0.03 + fwidth(rp2)));
  float lum = dot(col, vec3(0.3, 0.5, 0.2));
  col *= 1.0 + (rip * 0.85 - 0.25) * heat * (0.22 + 0.48 * e);
  col += mix(uColor, vec3(1.0), 0.4) * rip * heat * (0.02 + 0.08 * e) * smoothstep(0.0, 0.3, lum + 0.1);
  fragColor = vec4(finish(col, fragCoord), 1.0);
}

Similar shaders