Gradient Blob

npm install @vikast908/loaders@0.1.1 @vikast908/core@0.1.1

import '@vikast908/loaders/gradient-blob';

<orbux-gradient-blob state="thinking" size="160px"></orbux-gradient-blob>

<script type="module" src="http://localhost:4321/orbux/gradient-blob.js"></script>

<orbux-gradient-blob state="thinking" size="160px"></orbux-gradient-blob>

import { type AgentState, lerp, type OrbuxFrameInfo, ShaderElement } from '@vikast908/core';

const FRAG = /* glsl */ `
precision highp float;
uniform vec2  uRes;
uniform float uTime;
uniform vec3  uColorA;
uniform vec3  uColorB;
uniform float uActivity;
uniform float uState;

void main(){
  vec2 uv=(gl_FragCoord.xy*2.0-uRes)/min(uRes.x,uRes.y);
  float t=uTime;
  float amp=0.24*(0.6+uActivity);
  vec2 c1=vec2(sin(t*0.7),     cos(t*0.9))     * amp;
  vec2 c2=vec2(sin(t*0.9+2.0), cos(t*0.6+1.0)) * (amp*1.15);
  vec2 c3=vec2(sin(t*0.5+4.0), cos(t*1.1+3.0)) * (amp*0.8);
  float f=0.0;
  f+=0.05/dot(uv-c1,uv-c1);
  f+=0.05/dot(uv-c2,uv-c2);
  f+=0.04/dot(uv-c3,uv-c3);
  float body=smoothstep(0.8,1.4,f);
  float grad=clamp(smoothstep(0.8,2.6,f),0.0,1.0);
  vec3 col=mix(uColorA, uColorB, grad);
  float glow=smoothstep(0.4,1.0,f)*0.3;
  float alpha=clamp(body+glow*0.5,0.0,1.0);
  if(uState>3.5&&uState<4.5) alpha*=smoothstep(0.14,0.28,length(uv));
  if(uState>2.5&&uState<3.5) alpha*=0.78+0.22*step(0.3,abs(sin(atan(uv.y,uv.x)*4.0)));
  gl_FragColor=vec4(col*body + mix(uColorA,uColorB,0.5)*glow, alpha);
}
`;

type RGB = [number, number, number];
interface Visual {
  act: number;
  a: RGB;
  b: RGB;
}

const STATE_VISUALS: Record<AgentState, Visual> = {
  idle: { act: 0.15, a: [0.4, 0.46, 0.78], b: [0.62, 0.5, 0.86] },
  thinking: { act: 0.5, a: [0.42, 0.4, 0.95], b: [0.72, 0.42, 0.95] },
  streaming: { act: 0.95, a: [0.3, 0.7, 0.98], b: [0.55, 0.92, 0.98] },
  'tool-calling': { act: 0.72, a: [0.2, 0.82, 0.68], b: [0.55, 0.92, 0.5] },
  waiting: { act: 0.2, a: [0.42, 0.46, 0.66], b: [0.56, 0.6, 0.8] },
  done: { act: 0.28, a: [0.24, 0.82, 0.5], b: [0.52, 0.94, 0.62] },
  error: { act: 0.55, a: [0.9, 0.32, 0.34], b: [0.98, 0.58, 0.4] },
};

/** Gradient Blob: a soft, gooey metaball with a dreamy pastel gradient. */
export class OrbuxGradientBlob extends ShaderElement {
  #act = 0.5;
  #a: RGB = [0.42, 0.4, 0.95];
  #b: RGB = [0.72, 0.42, 0.95];

  protected fragmentSource(): string {
    return FRAG;
  }
  protected override timeScale(): number {
    return 0.35 + this.#act;
  }
  protected override fallbackBackground(): string {
    return 'background:radial-gradient(circle at 40% 35%,var(--orbux-color,#6366f1),var(--orbux-color-2,#a855f7) 75%);';
  }

  protected paint(gl: WebGLRenderingContext, info: OrbuxFrameInfo): void {
    const v = STATE_VISUALS[info.state];
    let a = v.a;
    let b = v.b;
    if (info.state === 'done') {
      a = this.cssColorRGB('--orbux-color-success', v.a);
      b = v.b;
    } else if (info.state === 'error') {
      a = this.cssColorRGB('--orbux-color-error', v.a);
      b = v.b;
    } else {
      a = this.cssColorRGB('--orbux-color', v.a);
      b = this.cssColorRGB('--orbux-color-2', v.b);
    }
    const rate = info.state === 'done' || info.state === 'error' ? 18 : 3.5;
    const k = info.dt === 0 ? 1 : 1 - Math.exp(-rate * info.dt);
    this.#act = lerp(this.#act, v.act, k);
    for (let i = 0; i < 3; i++) {
      this.#a[i] = lerp(this.#a[i] ?? 0, a[i] ?? 0, k);
      this.#b[i] = lerp(this.#b[i] ?? 0, b[i] ?? 0, k);
    }
    gl.uniform3fv(this.uniform('uColorA'), this.#a);
    gl.uniform3fv(this.uniform('uColorB'), this.#b);
    gl.uniform1f(this.uniform('uActivity'), this.#act);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-gradient-blob')) {
  customElements.define('orbux-gradient-blob', OrbuxGradientBlob);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-gradient-blob': OrbuxGradientBlob;
  }
}