@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/gl/particle-hero/create-particle-hero.ts

@@ -0,0 +1,544 @@
+import { whileVisible } from '../../core/loop';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { warnOnce, type Instance } from '../../core/types';
+import { fullscreenVertex, pointsFragment, pointsVertex, simulationFragment } from './shaders';
+
+/*
+ * iyo.ai's hero, adapted: a cloud of points simulated on the GPU (two RGBA32F
+ * textures, position + velocity, ping-pong) that settles on the zero lines of a
+ * shifting interference pattern — Chladni modes from [3, 5, 7] every 6–12 s, a
+ * frequency of 20–45 every 5–10 s, a distortion tween of 1.2–3 s — while part of
+ * the points (40–80 %, eased) leave to draw a word, then return. The pointer
+ * pushes them away in proportion to its speed. It fades in over 1 s after 0.3 s.
+ *
+ * iyo runs 1 638 400 points on Three.js with its own word pictures; this is a
+ * smaller own implementation (size² points, 16 384 by default) with words drawn
+ * locally. Without WebGL2 float targets it falls back to ~1800 points on a 2D
+ * canvas; with no canvas at all it does nothing. Reduced motion draws one still
+ * frame. The canvas is decorative (aria-hidden): the hero's text lives in HTML.
+ */
+
+export type ParticleHeroMode = 'webgl2' | 'canvas2d' | 'none';
+
+export interface ParticleHeroOptions {
+  /** Words the points draw in turn. */
+  words?: string[];
+  /** The state texture's side: size² points (32–256). */
+  size?: number;
+  /** Point size in CSS pixels (1–8). */
+  pointSize?: number;
+  /** RGB, 0–1 each. */
+  color?: [number, number, number];
+  seed?: number;
+  /** Skip WebGL (to try the fallback). */
+  forceFallback?: boolean;
+  onMode?: (mode: ParticleHeroMode) => void;
+}
+
+export interface ParticleHeroInstance extends Instance {
+  readonly mode: ParticleHeroMode;
+  /** Draw this word next (the cycle carries on afterwards). */
+  setWord(word: string): void;
+  /** Share of points on the word, 0–1; null gives control back to the cycle. */
+  setTextureMix(value: number | null): void;
+  /** Base field: 0 circles, 1 grid, 2 squares. */
+  setPattern(value: number): void;
+  pause(): void;
+  resume(): void;
+}
+
+interface State {
+  time: number;
+  dt: number;
+  mix: number;
+  frequency: number;
+  distortion: number;
+  noise: number;
+  jitter: number;
+  m: number;
+  n: number;
+  mouseX: number;
+  mouseY: number;
+  mouseSpeed: number;
+  pattern: number;
+  aspect: number;
+  dpr: number;
+  opacity: number;
+}
+
+interface Renderer {
+  mode: Exclude<ParticleHeroMode, 'none'>;
+  render(state: State, steps?: number): void;
+  setMask(data: Float32Array): void;
+  destroy(): void;
+}
+
+const instances = new WeakMap<HTMLElement, ParticleHeroInstance>();
+const clamp = (x: number, a: number, b: number) => Math.max(a, Math.min(b, x));
+const mix = (a: number, b: number, t: number) => a + (b - a) * t;
+/** power2.inOut-like cubic. */
+const inOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+
+function random(seed: number) {
+  let s = seed >>> 0;
+  return () => {
+    s = (1664525 * s + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
+}
+
+/** Points sampled from the dark pixels of a word drawn on a 640 × 320 canvas (iyo: red < 120). */
+function wordMask(word: string, count: number, rng: () => number) {
+  const result = new Float32Array(count * 4);
+  const canvas = document.createElement('canvas');
+  canvas.width = 640;
+  canvas.height = 320;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  const dark: Array<[number, number]> = [];
+  if (ctx) {
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, 640, 320);
+    ctx.fillStyle = '#000';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    let size = 140;
+    ctx.font = `600 ${size}px system-ui, sans-serif`;
+    while (ctx.measureText(word).width > 590 && size > 16) {
+      size -= 4;
+      ctx.font = `600 ${size}px system-ui, sans-serif`;
+    }
+    ctx.fillText(word, 320, 160);
+    const pixels = ctx.getImageData(0, 0, 640, 320).data;
+    for (let y = 0; y < 320; y += 2) for (let x = 0; x < 640; x += 2) if (pixels[(y * 640 + x) * 4]! < 120) dark.push([x, y]);
+  }
+  for (let i = 0; i < count; i++) {
+    const [x, y] = dark.length ? dark[Math.floor(rng() * dark.length)]! : [320, 160];
+    result[i * 4] = (x / 640 - 0.5) * 1.75 + (rng() - 0.5) * 0.004;
+    result[i * 4 + 1] = (0.5 - y / 320) * 0.9 + (rng() - 0.5) * 0.004;
+  }
+  return result;
+}
+
+function gpuRenderer(
+  canvas: HTMLCanvasElement,
+  size: number,
+  pointSize: number,
+  color: number[],
+  initial: Float32Array,
+  mask: Float32Array,
+): Renderer {
+  const gl = canvas.getContext('webgl2', { alpha: true, antialias: false, powerPreference: 'high-performance', premultipliedAlpha: true });
+  if (!gl || !gl.getExtension('EXT_color_buffer_float')) throw new Error('WebGL2 float render targets unavailable');
+  const releases: Array<() => void> = [];
+  const release = () => {
+    for (const fn of releases.reverse()) fn();
+    releases.length = 0;
+  };
+  try {
+    const shader = (type: number, source: string) => {
+      const s = gl.createShader(type)!;
+      releases.push(() => gl.deleteShader(s));
+      gl.shaderSource(s, source);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s) ?? 'shader');
+      return s;
+    };
+    const program = (vs: string, fs: string) => {
+      const p = gl.createProgram()!;
+      releases.push(() => gl.deleteProgram(p));
+      gl.attachShader(p, shader(gl.VERTEX_SHADER, vs));
+      gl.attachShader(p, shader(gl.FRAGMENT_SHADER, fs));
+      gl.linkProgram(p);
+      if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p) ?? 'program');
+      return p;
+    };
+    const texture = (data: Float32Array) => {
+      const tex = gl.createTexture()!;
+      releases.push(() => gl.deleteTexture(tex));
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, size, size, 0, gl.RGBA, gl.FLOAT, data);
+      return tex;
+    };
+    const sim = program(fullscreenVertex, simulationFragment);
+    const draw = program(pointsVertex, pointsFragment);
+    const states = [texture(initial), texture(initial)];
+    const maskTexture = texture(mask);
+    const buffers = states.map((tex) => {
+      const fb = gl.createFramebuffer()!;
+      releases.push(() => gl.deleteFramebuffer(fb));
+      gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) throw new Error('incomplete float framebuffer');
+      return fb;
+    });
+    const vao = gl.createVertexArray()!;
+    releases.push(() => gl.deleteVertexArray(vao));
+    const uniforms = (p: WebGLProgram, names: string[]) => Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(p, name)]));
+    const simU = uniforms(sim, [
+      'uState',
+      'uMask',
+      'uTime',
+      'uDt',
+      'uMix',
+      'uFrequency',
+      'uDistortion',
+      'uNoise',
+      'uJitter',
+      'uMouseSpeed',
+      'uAspect',
+      'uModes',
+      'uMouse',
+      'uPattern',
+    ]);
+    const drawU = uniforms(draw, ['uState', 'uSize', 'uAspect', 'uDpr', 'uPointSize', 'uColor', 'uOpacity']);
+    const bind = (unit: number, tex: WebGLTexture) => {
+      gl.activeTexture(gl.TEXTURE0 + unit);
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+    };
+    let read = 0;
+    return {
+      mode: 'webgl2',
+      render(s, steps = 1) {
+        gl.bindVertexArray(vao);
+        gl.disable(gl.BLEND);
+        gl.useProgram(sim);
+        gl.uniform1i(simU.uState!, 0);
+        gl.uniform1i(simU.uMask!, 1);
+        gl.uniform1f(simU.uTime!, s.time);
+        gl.uniform1f(simU.uDt!, s.dt);
+        gl.uniform1f(simU.uMix!, s.mix);
+        gl.uniform1f(simU.uFrequency!, s.frequency);
+        gl.uniform1f(simU.uDistortion!, s.distortion);
+        gl.uniform1f(simU.uNoise!, s.noise);
+        gl.uniform1f(simU.uJitter!, s.jitter);
+        gl.uniform1f(simU.uMouseSpeed!, s.mouseSpeed);
+        gl.uniform1f(simU.uAspect!, s.aspect);
+        gl.uniform2f(simU.uModes!, s.m, s.n);
+        gl.uniform2f(simU.uMouse!, s.mouseX, s.mouseY);
+        gl.uniform1i(simU.uPattern!, s.pattern);
+        bind(1, maskTexture);
+        for (let i = 0; i < steps; i++) {
+          bind(0, states[read]!);
+          gl.bindFramebuffer(gl.FRAMEBUFFER, buffers[1 - read]!);
+          gl.viewport(0, 0, size, size);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          read = 1 - read;
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(draw);
+        bind(0, states[read]!);
+        gl.uniform1i(drawU.uState!, 0);
+        gl.uniform1i(drawU.uSize!, size);
+        gl.uniform1f(drawU.uAspect!, s.aspect);
+        gl.uniform1f(drawU.uDpr!, s.dpr);
+        gl.uniform1f(drawU.uPointSize!, pointSize);
+        gl.uniform3fv(drawU.uColor!, color);
+        gl.uniform1f(drawU.uOpacity!, s.opacity);
+        gl.enable(gl.BLEND);
+        // RGB premultiplied, coverage accumulated once, for the page's compositing.
+        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.POINTS, 0, size * size);
+      },
+      setMask(data) {
+        bind(1, maskTexture);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, size, size, gl.RGBA, gl.FLOAT, data);
+      },
+      destroy: release,
+    };
+  } catch (error) {
+    release();
+    throw error;
+  }
+}
+
+/** ~1800 points eased toward a breathing circle or the word: no Chladni field. */
+function canvasRenderer(
+  canvas: HTMLCanvasElement,
+  size: number,
+  pointSize: number,
+  color: number[],
+  initial: Float32Array,
+  mask: Float32Array,
+): Renderer {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('no 2D context');
+  const stride = Math.max(1, Math.floor((size * size) / 1800));
+  const ids: number[] = [];
+  for (let i = 0; i < size * size; i += stride) ids.push(i);
+  const points = Float32Array.from(initial);
+  let target = mask;
+  const rgb = color.map((c) => Math.round(c * 255)).join(',');
+  return {
+    mode: 'canvas2d',
+    setMask(data) {
+      target = data;
+    },
+    render(s, steps = 1) {
+      for (let step = 0; step < steps; step++)
+        for (const i of ids) {
+          const o = i * 4;
+          const angle = i * 2.3999632297;
+          const radius = 0.3 + 0.52 * Math.sin(angle * 0.025 + s.time * 0.07);
+          let x = Math.cos(angle) * radius;
+          let y = Math.sin(angle) * radius;
+          if (((i * 137) % 1000) / 1000 < s.mix) {
+            x = target[o]!;
+            y = target[o + 1]!;
+          }
+          points[o] = points[o]! + (x - points[o]!) * 0.075;
+          points[o + 1] = points[o + 1]! + (y - points[o + 1]!) * 0.075;
+        }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = `rgba(${rgb},${0.4 * s.opacity})`;
+      for (const i of ids) {
+        const x = (points[i * 4]! * 0.5 + 0.5) * canvas.width;
+        const y = (0.5 - points[i * 4 + 1]! * 0.5) * canvas.height;
+        ctx.beginPath();
+        ctx.arc(x, y, pointSize * s.dpr * 0.55, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    },
+    destroy() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    },
+  };
+}
+
+const NONE: ParticleHeroInstance = {
+  mode: 'none',
+  setWord() {},
+  setTextureMix() {},
+  setPattern() {},
+  pause() {},
+  resume() {},
+  destroy() {},
+};
+
+export function createParticleHero(root: HTMLElement | null, options: ParticleHeroOptions = {}): ParticleHeroInstance {
+  if (!root) {
+    warnOnce('particle-hero: missing element');
+    return NONE;
+  }
+  const existing = instances.get(root);
+  if (existing) return existing;
+  const t = TIMING.particleHero;
+  const rng = random(options.seed ?? 1907);
+  const size = Math.round(clamp(options.size ?? t.size, 32, 256));
+  const pointSize = clamp(options.pointSize ?? t.pointSize, 1, 8);
+  const color = options.color ?? [1, 1, 1];
+  const words = options.words?.length ? options.words.map(String) : ['CREATE', 'NATURAL', 'IDEAS'];
+  const count = size * size;
+  const still = reduced();
+
+  const initial = new Float32Array(count * 4);
+  for (let i = 0; i < count; i++) {
+    initial[i * 4] = (rng() - 0.5) * 1.7;
+    initial[i * 4 + 1] = (rng() - 0.5) * 1.7;
+  }
+  let mask = wordMask(words[0]!, count, rng);
+
+  const makeCanvas = () => {
+    const canvas = document.createElement('canvas');
+    canvas.className = 'mk-particle-hero__canvas';
+    canvas.setAttribute('aria-hidden', 'true');
+    return canvas;
+  };
+  let canvas = makeCanvas();
+  let renderer: Renderer | null = null;
+  if (!options.forceFallback) {
+    try {
+      renderer = gpuRenderer(canvas, size, pointSize, color, initial, mask);
+    } catch {
+      canvas = makeCanvas();
+    }
+  }
+  if (!renderer) {
+    try {
+      renderer = canvasRenderer(canvas, size, pointSize, color, initial, mask);
+    } catch {
+      warnOnce('particle-hero: no WebGL2 and no 2D canvas — nothing drawn');
+      return NONE;
+    }
+  }
+  const draw = renderer;
+
+  const scope = createScope();
+  if (!root.classList.contains('mk-particle-hero')) {
+    root.classList.add('mk-particle-hero');
+    scope.add(() => {
+      root.classList.remove('mk-particle-hero');
+      if (root.getAttribute('class') === '') root.removeAttribute('class');
+    });
+  }
+  root.append(canvas);
+  scope.add(() => canvas.remove());
+  scope.attr(root, 'data-mk-mode', draw.mode);
+  scope.add(() => draw.destroy());
+
+  const state: State = {
+    time: 0,
+    dt: 1 / 60,
+    mix: still ? 0.8 : 0,
+    frequency: 35,
+    distortion: 2.4,
+    noise: 0.2,
+    jitter: 0.08,
+    m: 3,
+    n: 5,
+    mouseX: 9,
+    mouseY: 9,
+    mouseSpeed: 0,
+    pattern: 0,
+    aspect: 1,
+    dpr: 1,
+    opacity: still ? 1 : 0,
+  };
+  let paused = false;
+  let age = 0;
+  let wordIndex = 0;
+  let manualMix: number | null = null;
+  let nextFrequency = 5;
+  let nextModes = 6;
+  let distortion = { from: 2.4, to: rng() * 5, start: 0, end: 2.5 };
+  // Word cycle: points gather on the word, shift share, leave, next word.
+  let cycle = { stage: 0, start: 0, duration: 4.2, from: 0, to: 0.65 };
+  let pointer = { x: 9, y: 9 };
+  let previous = { x: 9, y: 9 };
+
+  const drawStill = () => {
+    state.opacity = 1;
+    state.mix = manualMix ?? 0.8;
+    state.mouseSpeed = 0;
+    state.dt = 1 / 60;
+    draw.render(state, t.stillSteps);
+  };
+  const isStill = () => still || paused;
+  const resize = () => {
+    const box = root.getBoundingClientRect();
+    const w = Math.max(1, box.width);
+    const h = Math.max(1, box.height);
+    state.dpr = Math.min(window.devicePixelRatio || 1, t.maxDpr);
+    state.aspect = w / h;
+    canvas.width = Math.round(w * state.dpr);
+    canvas.height = Math.round(h * state.dpr);
+    if (isStill()) drawStill();
+  };
+  const setWord = (word: string) => {
+    if (scope.disposed) return;
+    mask = wordMask(String(word), count, rng);
+    draw.setMask(mask);
+    if (isStill()) drawStill();
+  };
+
+  const tick = (frames: number) => {
+    if (paused || scope.disposed) return;
+    const dt = clamp(frames / 60, 0, 0.05);
+    age += dt;
+    state.time = age * 4;
+    state.dt = dt;
+    state.opacity = clamp((age - t.fadeDelay) / t.fadeIn, 0, 1);
+    state.mouseX = mix(state.mouseX, pointer.x, 0.1);
+    state.mouseY = mix(state.mouseY, pointer.y, 0.1);
+    const speed = Math.min(Math.hypot(state.mouseX - previous.x, state.mouseY - previous.y) * 5, 1);
+    state.mouseSpeed = mix(state.mouseSpeed, speed, 0.2);
+    previous = { x: state.mouseX, y: state.mouseY };
+    if (age >= nextFrequency) {
+      state.frequency = 20 + rng() * 25;
+      state.jitter = rng() * 0.3;
+      state.noise = rng() * 0.5;
+      nextFrequency = age + 5 + rng() * 5;
+    }
+    if (age >= nextModes) {
+      const modes = [3, 5, 7];
+      state.m = modes[Math.floor(rng() * 3)]!;
+      state.n = modes[Math.floor(rng() * 3)]!;
+      nextModes = age + 6 + rng() * 6;
+    }
+    if (age >= distortion.end) distortion = { from: state.distortion, to: rng() * 5, start: age, end: age + 1.2 + rng() * 1.8 };
+    state.distortion = mix(
+      distortion.from,
+      distortion.to,
+      inOut(clamp((age - distortion.start) / (distortion.end - distortion.start), 0, 1)),
+    );
+    if (age - cycle.start >= cycle.duration) {
+      const stage = (cycle.stage + 1) % 3;
+      cycle = { stage, start: age, from: cycle.to, to: 0, duration: 2 + rng() };
+      if (stage === 0) {
+        wordIndex = (wordIndex + 1) % words.length;
+        setWord(words[wordIndex]!);
+      }
+      if (stage !== 2) {
+        cycle.to = 0.4 + rng() * 0.4;
+        cycle.duration = 2 + rng() * 2;
+      }
+    }
+    state.mix = manualMix ?? mix(cycle.from, cycle.to, inOut(clamp((age - cycle.start) / cycle.duration, 0, 1)));
+    draw.render(state);
+  };
+
+  scope.on(
+    root,
+    'pointermove',
+    (event) => {
+      const box = root.getBoundingClientRect();
+      const e = event as PointerEvent;
+      pointer = {
+        x: (((e.clientX - box.left) / Math.max(box.width, 1)) * 2 - 1) * Math.max(state.aspect, 1),
+        y: 1 - ((e.clientY - box.top) / Math.max(box.height, 1)) * 2,
+      };
+    },
+    { passive: true },
+  );
+  scope.on(root, 'pointerleave', () => (pointer = { x: 9, y: 9 }), { passive: true });
+  scope.on(canvas, 'webglcontextlost', (event) => {
+    event.preventDefault();
+    paused = true;
+    scope.attr(root, 'data-mk-mode', 'context-lost');
+  });
+  if (typeof ResizeObserver === 'function') scope.observe(new ResizeObserver(resize)).observe(root);
+  else scope.on(window, 'resize', resize);
+  // The shared ticker runs while the hero is near the screen and the tab is visible.
+  if (!still) scope.add(whileVisible(root, tick, '100px'));
+
+  const instance: ParticleHeroInstance = {
+    mode: draw.mode,
+    setWord,
+    setTextureMix(value) {
+      if (scope.disposed) return;
+      manualMix = value === null ? null : clamp(Number(value) || 0, 0, 1);
+      if (isStill()) drawStill();
+    },
+    setPattern(value) {
+      if (scope.disposed) return;
+      state.pattern = clamp(Math.round(Number(value) || 0), 0, 2);
+      if (isStill()) drawStill();
+    },
+    pause() {
+      if (!scope.disposed) paused = true;
+    },
+    resume() {
+      if (scope.disposed) return;
+      paused = false;
+      if (still) drawStill();
+    },
+    destroy() {
+      if (scope.disposed) return;
+      scope.dispose();
+      instances.delete(root);
+    },
+  };
+  instances.set(root, instance);
+  resize();
+  if (still) drawStill();
+  options.onMode?.(draw.mode);
+  return instance;
+}

package/src/gl/particle-hero/particle-hero.css

@@ -0,0 +1,19 @@
+/* The particle hero's canvas fills its host, under the host's own content. The host sets the height. */
+.mk-particle-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+.mk-particle-hero__canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.mk-particle-hero > :not(.mk-particle-hero__canvas) {
+  position: relative;
+  z-index: 1;
+}

package/src/gl/particle-hero/shaders.ts

@@ -0,0 +1,84 @@
+/*
+ * Shaders for the particle hero. Own GLSL (not iyo's): state texture XY = position,
+ * ZW = velocity; the simulation pulls each point toward the zero lines of a
+ * radial / grid / square field mixed with a Chladni plate (four Newton-like
+ * projections, step .4) or toward a word, and pushes it away from the pointer.
+ */
+
+export const fullscreenVertex = `#version 300 es
+precision highp float;
+out vec2 vUv;
+void main() {
+  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
+  vUv = p;
+  gl_Position = vec4(p * 2. - 1., 0., 1.);
+}`;
+
+export const simulationFragment = `#version 300 es
+precision highp float;
+in vec2 vUv;
+uniform sampler2D uState, uMask;
+uniform float uTime, uDt, uMix, uFrequency, uDistortion, uNoise, uJitter, uMouseSpeed, uAspect;
+uniform vec2 uModes, uMouse;
+uniform int uPattern;
+out vec4 outState;
+float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }
+float field(vec2 p) {
+  float base = sin(length(p) * uFrequency * .35);
+  if (uPattern == 1) base = sin(p.x * uFrequency * .35) * sin(p.y * uFrequency * .35);
+  if (uPattern == 2) base = sin(max(abs(p.x), abs(p.y)) * uFrequency * .35);
+  float chladni = sin(uModes.x * 3.14159265 * (p.x + 1.) * .5) * sin(uModes.y * 3.14159265 * (p.y + 1.) * .5);
+  float spots = (hash(floor(p * 12.)) - .5) * uNoise * .08;
+  float jitter = sin(uTime * 42. + hash(p * 30.) * 6.283) * uJitter * .015;
+  return mix(base, chladni, clamp(uDistortion * .2, 0., .85)) + spots + jitter;
+}
+void main() {
+  vec4 state = texture(uState, vUv);
+  vec2 pos = state.xy;
+  vec2 vel = state.zw;
+  vec2 p = (vUv - .5) * 2.;
+  for (int i = 0; i < 4; i++) {
+    float f = field(p);
+    float e = .003;
+    vec2 g = vec2(field(p + vec2(e, 0.)) - field(p - vec2(e, 0.)), field(p + vec2(0., e)) - field(p - vec2(0., e))) / (2. * e);
+    float q = dot(g, g);
+    if (q > .00001) p -= f * g / q * .4;
+  }
+  vec2 word = texture(uMask, vUv).xy;
+  float text = step(hash(vUv), uMix);
+  vec2 target = mix(p * .88, word, text);
+  target.x *= max(uAspect, 1.);
+  float dt60 = uDt * 60.;
+  vel *= pow(.91, dt60);
+  vec2 delta = target - pos;
+  float dist = length(delta);
+  if (dist > .004 * (1. - text)) vel += delta / max(dist, .00001) * mix(.0016, .0009, text) * dt60;
+  vec2 away = pos - uMouse;
+  float r = length(away);
+  vel += away / max(r, .0001) * (1. - smoothstep(0., .28, r)) * uMouseSpeed * .017 * dt60;
+  vel += vec2(sin(uTime + vUv.x * 400.), cos(uTime + vUv.y * 400.)) * .00003 * dt60;
+  pos += vel * dt60;
+  outState = vec4(pos, vel);
+}`;
+
+export const pointsVertex = `#version 300 es
+precision highp float;
+uniform sampler2D uState;
+uniform int uSize;
+uniform float uAspect, uDpr, uPointSize;
+void main() {
+  ivec2 uv = ivec2(gl_VertexID % uSize, gl_VertexID / uSize);
+  vec2 p = texelFetch(uState, uv, 0).xy;
+  gl_Position = vec4(p.x / max(uAspect, 1.), p.y, 0., 1.);
+  gl_PointSize = uPointSize * uDpr;
+}`;
+
+export const pointsFragment = `#version 300 es
+precision highp float;
+uniform vec3 uColor;
+uniform float uOpacity;
+out vec4 outColor;
+void main() {
+  float a = (1. - smoothstep(.12, .5, length(gl_PointCoord - .5))) * .44 * uOpacity;
+  outColor = vec4(uColor, a);
+}`;

package/src/gl/shader-blur/README.md

@@ -0,0 +1,23 @@
+# shader-blur
+
+Desenfoque direccional de siete muestras por shader (Siena).
+
+```ts
+import { createShaderBlur } from '@yewdiel21/motion-kit/gl';
+import { useShaderBlur } from '@yewdiel21/motion-kit/react';
+import '@yewdiel21/motion-kit/css';
+const effect = createShaderBlur(root);
+effect.setProgress(.5);
+effect.setAmount(5);
+effect.destroy();
+```
+
+Opciones compartidas: `images?: HTMLImageElement[]` (por defecto las dos primeras imágenes de root; una se repite), `progress` 0–1, `amount`, `maxDpr` 1.5. Las imágenes pueden terminar de cargar después de crear la instancia. Recursos del mismo origen o con CORS configurado antes de cargar la imagen. El kit no descarga imágenes. Root debe tener dimensiones; el canvas decorativo cubre su caja y deja el HTML accesible debajo.
+
+Controles: `setProgress(0..1)`, `setAmount(0..100)`, `pause()`, `resume()`, `mode: 'webgl' | 'none'`, `destroy()`. React: `useShaderBlur(ref, options, deps)`, ref a la instancia. No usa `autoInit`: importar explícitamente desde `/gl` conserva la separación de GPU del paquete principal.
+
+Pausa fuera de pantalla y con pestaña oculta. Movimiento reducido: frame fijo, con controles manuales. Sin WebGL, error de textura o contexto perdido: canvas oculto, HTML original disponible. Contexto restaurado: recompila y vuelve a cargar texturas. Destroy libera texturas, buffer, shaders y programa, desconecta observers y restaura la clase original.
+
+Siena `siena.webgl.work`: siete muestras, pesos .19648255/.29690696/.09447040/.01038136 y offsets 1.41176471/3.29411765/5.17647059. Amount 5 en píxeles de la imagen; progreso rota la dirección de horizontal a vertical. Amount 0 conserva la imagen.
+
+Desde 0.9.0. Fuentes de parámetros: `REA - Dousan OFFFICE Siena/`. Shaders originales, sin redistribuir código ni assets de terceros.

package/src/gl/shader-blur/create-shader-blur.ts

@@ -0,0 +1,7 @@
+import { createShaderEffect, type ShaderEffectInstance, type ShaderEffectOptions } from '../shared/create-shader-effect';
+import { blurFragment } from './shader';
+
+export type ShaderBlurOptions = ShaderEffectOptions;
+export type ShaderBlurInstance = ShaderEffectInstance;
+export const createShaderBlur = (root: HTMLElement | null, options: ShaderBlurOptions = {}): ShaderBlurInstance =>
+  createShaderEffect(root, blurFragment, { amount: 5, ...options });

package/src/gl/shader-blur/shader.ts

@@ -0,0 +1,11 @@
+export const blurFragment = `
+void main() {
+  vec2 uv = cover(vUv, uImageSize0);
+  float angle = uProgress * 1.5707963;
+  vec2 delta = vec2(cos(angle), sin(angle)) * uAmount / uImageSize0;
+  vec4 color = texture2D(uImage0, uv) * .1964825501511404;
+  color += (texture2D(uImage0, uv + delta * 1.411764705882353) + texture2D(uImage0, uv - delta * 1.411764705882353)) * .2969069646728344;
+  color += (texture2D(uImage0, uv + delta * 3.2941176470588234) + texture2D(uImage0, uv - delta * 3.2941176470588234)) * .09447039785044732;
+  color += (texture2D(uImage0, uv + delta * 5.176470588235294) + texture2D(uImage0, uv - delta * 5.176470588235294)) * .010381362401148057;
+  gl_FragColor = color;
+}`;