@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/chunk-6OJAP6ZL.js

@@ -0,0 +1,832 @@
+import {
+  clamp
+} from "./chunk-KLY5BRRI.js";
+import {
+  TIMING,
+  createScope,
+  reduced,
+  whileVisible
+} from "./chunk-RFDIZYFX.js";
+import {
+  inert,
+  warnOnce
+} from "./chunk-TGV27ZWM.js";
+
+// src/gl/shared/shaders.ts
+var fullscreenVertex = `
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = position * .5 + .5;
+  gl_Position = vec4(position, 0., 1.);
+}`;
+var fragmentHeader = `
+precision highp float;
+varying vec2 vUv;
+uniform sampler2D uImage0;
+uniform sampler2D uImage1;
+uniform vec2 uSize;
+uniform vec2 uImageSize0;
+uniform vec2 uImageSize1;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAmount;
+uniform float uHasImage;
+vec2 cover(vec2 uv, vec2 imageSize) {
+  float aspect = uSize.x / uSize.y;
+  float imageAspect = imageSize.x / imageSize.y;
+  vec2 scale = vec2(min(aspect / imageAspect, 1.), min(imageAspect / aspect, 1.));
+  return (uv - .5) * scale + .5;
+}
+float noise(vec2 point) {
+  return fract(sin(dot(point, vec2(12.9898, 78.233))) * 43758.5453);
+}
+`;
+
+// src/gl/shared/create-shader-effect.ts
+function createRenderer(canvas, fragment, images) {
+  const gl = canvas.getContext("webgl", { alpha: true, antialias: false, premultipliedAlpha: false });
+  if (!gl) throw new Error("WebGL unavailable");
+  const releases = [];
+  const destroy = () => {
+    releases.splice(0).reverse().forEach((release) => release());
+  };
+  try {
+    const compile = (type, source) => {
+      const shader = gl.createShader(type);
+      if (!shader) throw new Error("Shader allocation failed");
+      releases.push(() => gl.deleteShader(shader));
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader) ?? "Shader failed");
+      return shader;
+    };
+    const vertex = compile(gl.VERTEX_SHADER, fullscreenVertex);
+    const pixel = compile(gl.FRAGMENT_SHADER, fragmentHeader + fragment);
+    const program = gl.createProgram();
+    if (!program) throw new Error("Program allocation failed");
+    releases.push(() => gl.deleteProgram(program));
+    gl.attachShader(program, vertex);
+    gl.attachShader(program, pixel);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program) ?? "Link failed");
+    gl.useProgram(program);
+    const buffer = gl.createBuffer();
+    if (!buffer) throw new Error("Buffer allocation failed");
+    releases.push(() => gl.deleteBuffer(buffer));
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const attribute = gl.getAttribLocation(program, "position");
+    gl.enableVertexAttribArray(attribute);
+    gl.vertexAttribPointer(attribute, 2, gl.FLOAT, false, 0, 0);
+    const names = ["uSize", "uImageSize0", "uImageSize1", "uTime", "uProgress", "uAmount", "uImage0", "uImage1", "uHasImage"];
+    const uniforms = Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(program, name)]));
+    const textures = [0, 1].map((index) => {
+      const texture = gl.createTexture();
+      if (!texture) throw new Error("Texture allocation failed");
+      releases.push(() => gl.deleteTexture(texture));
+      gl.activeTexture(gl.TEXTURE0 + index);
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      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.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([26, 40, 55, 255]));
+      gl.uniform1i(uniforms[`uImage${index}`], index);
+      return texture;
+    });
+    const upload = () => {
+      if (images.some((image) => !image.complete || !image.naturalWidth)) return false;
+      gl.useProgram(program);
+      images.slice(0, 2).forEach((image, index) => {
+        gl.activeTexture(gl.TEXTURE0 + index);
+        gl.bindTexture(gl.TEXTURE_2D, textures[index]);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+      });
+      return true;
+    };
+    return {
+      upload,
+      draw(time, progress, amount) {
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.useProgram(program);
+        gl.uniform2f(uniforms.uSize, canvas.width, canvas.height);
+        [0, 1].forEach((index) => gl.uniform2f(uniforms[`uImageSize${index}`], images[index]?.naturalWidth || 1, images[index]?.naturalHeight || 1));
+        gl.uniform1f(uniforms.uTime, time);
+        gl.uniform1f(uniforms.uProgress, progress);
+        gl.uniform1f(uniforms.uAmount, amount);
+        gl.uniform1f(uniforms.uHasImage, images.length ? 1 : 0);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+      },
+      destroy
+    };
+  } catch (error) {
+    destroy();
+    throw error;
+  }
+}
+function createShaderEffect(root, fragment, options = {}) {
+  if (!root) return inert({ mode: "none", setProgress() {
+  }, setAmount() {
+  }, pause() {
+  }, resume() {
+  } });
+  const scope = createScope();
+  const canvas = document.createElement("canvas");
+  canvas.className = "mk-shader__canvas";
+  canvas.setAttribute("aria-hidden", "true");
+  canvas.hidden = true;
+  const images = (options.images ?? [...root.querySelectorAll("img")]).slice(0, 2);
+  if (images.length === 1) images.push(images[0]);
+  let renderer = null;
+  let mode = "none";
+  let progress = clamp(options.progress ?? 0, 0, 1);
+  let amount = clamp(options.amount ?? 1, 0, 100);
+  let time = 0;
+  let paused = false;
+  let ready = false;
+  const draw = () => {
+    if (!scope.disposed && ready && renderer && mode === "webgl") renderer.draw(time, progress, amount);
+  };
+  const fallback = () => {
+    mode = "none";
+    ready = false;
+    canvas.hidden = true;
+  };
+  const load = () => {
+    if (scope.disposed || !renderer) return;
+    try {
+      ready = renderer.upload();
+      canvas.hidden = !ready;
+      if (ready) mode = "webgl";
+      draw();
+    } catch {
+      fallback();
+    }
+  };
+  const resize = (render = true) => {
+    if (scope.disposed) return;
+    const rect = root.getBoundingClientRect();
+    const dpr = Math.min(typeof devicePixelRatio === "number" ? devicePixelRatio : 1, Math.max(0.5, options.maxDpr ?? 1.5));
+    canvas.width = Math.max(1, Math.round(rect.width * dpr));
+    canvas.height = Math.max(1, Math.round(rect.height * dpr));
+    if (render) draw();
+  };
+  const initialize = () => {
+    renderer?.destroy();
+    renderer = null;
+    try {
+      renderer = createRenderer(canvas, fragment, images);
+      mode = "webgl";
+      resize(false);
+      load();
+      return true;
+    } catch {
+      fallback();
+      return false;
+    }
+  };
+  if (!initialize()) {
+    scope.dispose();
+    return inert({ mode: "none", setProgress() {
+    }, setAmount() {
+    }, pause() {
+    }, resume() {
+    } });
+  }
+  scope.attr(root, "class", `${root.className} mk-shader`.trim());
+  root.append(canvas);
+  scope.add(() => {
+    renderer?.destroy();
+    renderer = null;
+    canvas.remove();
+    mode = "none";
+  });
+  images.forEach((image) => {
+    scope.on(image, "load", load);
+    scope.on(image, "error", fallback);
+  });
+  scope.on(canvas, "webglcontextlost", (event) => {
+    event.preventDefault();
+    fallback();
+  });
+  scope.on(canvas, "webglcontextrestored", initialize);
+  if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(() => resize())).observe(root);
+  scope.on(window, "resize", () => resize());
+  if (!reduced()) scope.add(whileVisible(root, (dt) => {
+    if (paused || document.hidden || mode === "none") return;
+    time += dt / 60;
+    draw();
+  }));
+  return {
+    get mode() {
+      return mode;
+    },
+    setProgress(value) {
+      if (scope.disposed || !Number.isFinite(value)) return;
+      progress = clamp(value, 0, 1);
+      draw();
+    },
+    setAmount(value) {
+      if (scope.disposed || !Number.isFinite(value)) return;
+      amount = clamp(value, 0, 100);
+      draw();
+    },
+    pause() {
+      paused = true;
+    },
+    resume() {
+      paused = false;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/gl/liquid-blend/shader.ts
+var liquidFragment = `
+void main() {
+  float center = 1. - smoothstep(0., .5, distance(vUv, vec2(.5)));
+  vec2 wave = vec2(sin(vUv.y * 18. + uTime), cos(vUv.x * 20. - uTime));
+  vec2 distortion = wave * center * uAmount;
+  vec2 currentUv = cover(vUv + distortion * uProgress, uImageSize0);
+  vec2 nextUv = cover(vUv - distortion * (1. - uProgress), uImageSize1);
+  gl_FragColor = mix(texture2D(uImage0, currentUv), texture2D(uImage1, nextUv), uProgress);
+}`;
+
+// src/gl/liquid-blend/create-liquid-blend.ts
+var createLiquidBlend = (root, options = {}) => createShaderEffect(root, liquidFragment, { amount: 0.15, ...options });
+
+// src/gl/matcap/shader.ts
+var matcapFragment = `
+void main() {
+  vec2 point = (vUv - .5) * 2.5;
+  point.x *= uSize.x / uSize.y;
+  float radius = length(point);
+  if (radius > 1.) { gl_FragColor = vec4(.04, .06, .08, 1.); return; }
+  vec3 normal = normalize(vec3(point, sqrt(max(0., 1. - dot(point, point)))));
+  float angle = uTime * .2 + uProgress * 6.28318;
+  vec2 rotated = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * normal.xy;
+  vec2 matcapUv = rotated * .495 + .5;
+  float hemisphere = clamp(1. - dot(normalize(vec3(1., -1., 1.)), normal), 0., 1.);
+  vec3 metal = mix(vec3(.1), vec3(1.), hemisphere) + pow(normal.z, 24.) * uAmount;
+  vec3 mapped = texture2D(uImage0, matcapUv).rgb;
+  metal = mix(metal, mapped + metal * .15, uHasImage);
+  gl_FragColor = vec4(metal, 1.);
+}`;
+
+// src/gl/matcap/create-matcap.ts
+var createMatcap = (root, options = {}) => createShaderEffect(root, matcapFragment, { amount: 0.15, ...options });
+
+// src/gl/shader-grain/shader.ts
+var grainFragment = `
+void main() {
+  vec4 color = texture2D(uImage0, cover(vUv, uImageSize0));
+  float grain = noise(floor(vUv * uSize) + floor(uTime * 24.)) - .5;
+  gl_FragColor = vec4(color.rgb + grain * uAmount, color.a);
+}`;
+
+// src/gl/shader-grain/create-shader-grain.ts
+var createShaderGrain = (root, options = {}) => createShaderEffect(root, grainFragment, { amount: 0.07, ...options });
+
+// src/gl/shader-blur/shader.ts
+var 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;
+}`;
+
+// src/gl/shader-blur/create-shader-blur.ts
+var createShaderBlur = (root, options = {}) => createShaderEffect(root, blurFragment, { amount: 5, ...options });
+
+// src/gl/particle-hero/shaders.ts
+var fullscreenVertex2 = `#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.);
+}`;
+var 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);
+}`;
+var 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;
+}`;
+var 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);
+}`;
+
+// src/gl/particle-hero/create-particle-hero.ts
+var instances = /* @__PURE__ */ new WeakMap();
+var clamp2 = (x, a, b) => Math.max(a, Math.min(b, x));
+var mix = (a, b, t) => a + (b - a) * t;
+var inOut = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+function random(seed) {
+  let s = seed >>> 0;
+  return () => {
+    s = 1664525 * s + 1013904223 >>> 0;
+    return s / 4294967296;
+  };
+}
+function wordMask(word, count, rng) {
+  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 = [];
+  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) * 4e-3;
+    result[i * 4 + 1] = (0.5 - y / 320) * 0.9 + (rng() - 0.5) * 4e-3;
+  }
+  return result;
+}
+function gpuRenderer(canvas, size, pointSize, color, initial, mask) {
+  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 = [];
+  const release = () => {
+    for (const fn of releases.reverse()) fn();
+    releases.length = 0;
+  };
+  try {
+    const shader = (type, source) => {
+      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, fs) => {
+      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) => {
+      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(fullscreenVertex2, 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, names) => 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, tex) => {
+      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);
+        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;
+  }
+}
+function canvasRenderer(canvas, size, pointSize, color, initial, mask) {
+  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 = [];
+  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 % 1e3 / 1e3 < 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);
+    }
+  };
+}
+var NONE = {
+  mode: "none",
+  setWord() {
+  },
+  setTextureMix() {
+  },
+  setPattern() {
+  },
+  pause() {
+  },
+  resume() {
+  },
+  destroy() {
+  }
+};
+function createParticleHero(root, options = {}) {
+  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(clamp2(options.size ?? t.size, 32, 256));
+  const pointSize = clamp2(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 canvas2 = document.createElement("canvas");
+    canvas2.className = "mk-particle-hero__canvas";
+    canvas2.setAttribute("aria-hidden", "true");
+    return canvas2;
+  };
+  let canvas = makeCanvas();
+  let renderer = 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 \u2014 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 = {
+    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 = null;
+  let nextFrequency = 5;
+  let nextModes = 6;
+  let distortion = { from: 2.4, to: rng() * 5, start: 0, end: 2.5 };
+  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) => {
+    if (scope.disposed) return;
+    mask = wordMask(String(word), count, rng);
+    draw.setMask(mask);
+    if (isStill()) drawStill();
+  };
+  const tick = (frames) => {
+    if (paused || scope.disposed) return;
+    const dt = clamp2(frames / 60, 0, 0.05);
+    age += dt;
+    state.time = age * 4;
+    state.dt = dt;
+    state.opacity = clamp2((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(clamp2((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(clamp2((age - cycle.start) / cycle.duration, 0, 1)));
+    draw.render(state);
+  };
+  scope.on(
+    root,
+    "pointermove",
+    (event) => {
+      const box = root.getBoundingClientRect();
+      const e = event;
+      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);
+  if (!still) scope.add(whileVisible(root, tick, "100px"));
+  const instance = {
+    mode: draw.mode,
+    setWord,
+    setTextureMix(value) {
+      if (scope.disposed) return;
+      manualMix = value === null ? null : clamp2(Number(value) || 0, 0, 1);
+      if (isStill()) drawStill();
+    },
+    setPattern(value) {
+      if (scope.disposed) return;
+      state.pattern = clamp2(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;
+}
+
+export {
+  createLiquidBlend,
+  createMatcap,
+  createShaderGrain,
+  createShaderBlur,
+  createParticleHero
+};
+//# sourceMappingURL=chunk-6OJAP6ZL.js.map