nfx-ui 0.16.2 → 0.20.0

package/dist/chunk-PixelBlast-BiBrG_NH.mjs

@@ -0,0 +1,504 @@
+import { n as ge } from "./chunk-useTheme-C2Ip6OAs.mjs";
+import { memo as ue, useEffect as ye, useMemo as we, useRef as q } from "react";
+import { jsx as ce } from "react/jsx-runtime";
+import { Effect as fe, EffectComposer as re, EffectPass as ae, RenderPass as ie } from "postprocessing";
+import { Clock as Se, Color as Ce, GLSL3 as Ee, LinearFilter as ne, Mesh as Re, OrthographicCamera as Te, PlaneGeometry as Pe, Scene as Ae, ShaderMaterial as be, Texture as Me, Uniform as M, Vector2 as le, WebGLRenderer as ze } from "three";
+var Ie = "style-module__container___Hh3-c", ke = { container: Ie }, Fe = () => {
+  const a = document.createElement("canvas");
+  a.width = 64, a.height = 64;
+  const n = a.getContext("2d");
+  if (!n) throw new Error("2D context not available");
+  n.fillStyle = "black", n.fillRect(0, 0, a.width, a.height);
+  const y = new Me(a);
+  y.minFilter = ne, y.magFilter = ne, y.generateMipmaps = !1;
+  const w = [];
+  let m = null;
+  const s = 64;
+  let R = 0.1 * 64;
+  const z = 1 / s, I = () => {
+    n.fillStyle = "black", n.fillRect(0, 0, a.width, a.height);
+  }, k = (t) => {
+    const l = {
+      x: t.x * 64,
+      y: (1 - t.y) * 64
+    };
+    let c = 1;
+    const T = (x) => Math.sin(x * Math.PI / 2), S = (x) => -x * (x - 2);
+    t.age < s * 0.3 ? c = T(t.age / (s * 0.3)) : c = S(1 - (t.age - s * 0.3) / (s * 0.7)) || 0, c *= t.force;
+    const g = `${(t.vx + 1) / 2 * 255}, ${(t.vy + 1) / 2 * 255}, ${c * 255}`, h = 320;
+    n.shadowOffsetX = h, n.shadowOffsetY = h, n.shadowBlur = R, n.shadowColor = `rgba(${g},${0.22 * c})`, n.beginPath(), n.fillStyle = "rgba(255,0,0,1)", n.arc(l.x - h, l.y - h, R, 0, Math.PI * 2), n.fill();
+  };
+  return {
+    canvas: a,
+    texture: y,
+    addTouch: (t) => {
+      let l = 0, c = 0, T = 0;
+      if (m) {
+        const S = t.x - m.x, g = t.y - m.y;
+        if (S === 0 && g === 0) return;
+        const h = S * S + g * g, x = Math.sqrt(h);
+        c = S / (x || 1), T = g / (x || 1), l = Math.min(h * 1e4, 1);
+      }
+      m = {
+        x: t.x,
+        y: t.y
+      }, w.push({
+        x: t.x,
+        y: t.y,
+        age: 0,
+        force: l,
+        vx: c,
+        vy: T
+      });
+    },
+    update: () => {
+      I();
+      for (let t = w.length - 1; t >= 0; t--) {
+        const l = w[t], c = l.force * z * (1 - l.age / s);
+        l.x += l.vx * c, l.y += l.vy * c, l.age++, l.age > s && w.splice(t, 1);
+      }
+      for (let t = 0; t < w.length; t++) k(w[t]);
+      y.needsUpdate = !0;
+    },
+    set radiusScale(t) {
+      R = 0.1 * 64 * t;
+    },
+    get radiusScale() {
+      return R / (0.1 * 64);
+    },
+    size: 64
+  };
+}, _e = (E, a) => new fe("LiquidEffect", `
+    uniform sampler2D uTexture;
+    uniform float uStrength;
+    uniform float uTime;
+    uniform float uFreq;
+
+    void mainUv(inout vec2 uv) {
+      vec4 tex = texture2D(uTexture, uv);
+      float vx = tex.r * 2.0 - 1.0;
+      float vy = tex.g * 2.0 - 1.0;
+      float intensity = tex.b;
+
+      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);
+
+      float amt = uStrength * intensity * wave;
+
+      uv += vec2(vx, vy) * amt;
+    }
+    `, { uniforms: /* @__PURE__ */ new Map([
+  ["uTexture", new M(E)],
+  ["uStrength", new M(a?.strength ?? 0.025)],
+  ["uTime", new M(0)],
+  ["uFreq", new M(a?.freq ?? 4.5)]
+]) }), se = {
+  square: 0,
+  circle: 1,
+  triangle: 2,
+  diamond: 3
+}, qe = `
+void main() {
+  gl_Position = vec4(position, 1.0);
+}
+`, Be = `
+precision highp float;
+
+uniform vec3  uColor;
+uniform vec2  uResolution;
+uniform float uTime;
+uniform float uPixelSize;
+uniform float uScale;
+uniform float uDensity;
+uniform float uPixelJitter;
+uniform int   uEnableRipples;
+uniform float uRippleSpeed;
+uniform float uRippleThickness;
+uniform float uRippleIntensity;
+uniform float uEdgeFade;
+
+uniform int   uShapeType;
+const int SHAPE_SQUARE   = 0;
+const int SHAPE_CIRCLE   = 1;
+const int SHAPE_TRIANGLE = 2;
+const int SHAPE_DIAMOND  = 3;
+
+const int   MAX_CLICKS = 10;
+
+uniform vec2  uClickPos  [MAX_CLICKS];
+uniform float uClickTimes[MAX_CLICKS];
+
+out vec4 fragColor;
+
+float Bayer2(vec2 a) {
+  a = floor(a);
+  return fract(a.x / 2. + a.y * a.y * .75);
+}
+#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))
+#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))
+
+#define FBM_OCTAVES     5
+#define FBM_LACUNARITY  1.25
+#define FBM_GAIN        1.0
+
+float hash11(float n){ return fract(sin(n)*43758.5453); }
+
+float vnoise(vec3 p){
+  vec3 ip = floor(p);
+  vec3 fp = fract(p);
+  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));
+  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));
+  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));
+  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));
+  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));
+  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));
+  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));
+  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));
+  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);
+  float x00 = mix(n000, n100, w.x);
+  float x10 = mix(n010, n110, w.x);
+  float x01 = mix(n001, n101, w.x);
+  float x11 = mix(n011, n111, w.x);
+  float y0  = mix(x00, x10, w.y);
+  float y1  = mix(x01, x11, w.y);
+  return mix(y0, y1, w.z) * 2.0 - 1.0;
+}
+
+float fbm2(vec2 uv, float t){
+  vec3 p = vec3(uv * uScale, t);
+  float amp = 1.0;
+  float freq = 1.0;
+  float sum = 1.0;
+  for (int i = 0; i < FBM_OCTAVES; ++i){
+    sum  += amp * vnoise(p * freq);
+    freq *= FBM_LACUNARITY;
+    amp  *= FBM_GAIN;
+  }
+  return sum * 0.5 + 0.5;
+}
+
+float maskCircle(vec2 p, float cov){
+  float r = sqrt(cov) * .25;
+  float d = length(p - 0.5) - r;
+  float aa = 0.5 * fwidth(d);
+  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));
+}
+
+float maskTriangle(vec2 p, vec2 id, float cov){
+  bool flip = mod(id.x + id.y, 2.0) > 0.5;
+  if (flip) p.x = 1.0 - p.x;
+  float r = sqrt(cov);
+  float d  = p.y - r*(1.0 - p.x);
+  float aa = fwidth(d);
+  return cov * clamp(0.5 - d/aa, 0.0, 1.0);
+}
+
+float maskDiamond(vec2 p, float cov){
+  float r = sqrt(cov) * 0.564;
+  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);
+}
+
+void main(){
+  float pixelSize = uPixelSize;
+  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;
+  float aspectRatio = uResolution.x / uResolution.y;
+
+  vec2 pixelId = floor(fragCoord / pixelSize);
+  vec2 pixelUV = fract(fragCoord / pixelSize);
+
+  float cellPixelSize = 8.0 * pixelSize;
+  vec2 cellId = floor(fragCoord / cellPixelSize);
+  vec2 cellCoord = cellId * cellPixelSize;
+  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);
+
+  float base = fbm2(uv, uTime * 0.05);
+  base = base * 0.5 - 0.65;
+
+  float feed = base + (uDensity - 0.5) * 0.3;
+
+  float speed     = uRippleSpeed;
+  float thickness = uRippleThickness;
+  const float dampT     = 1.0;
+  const float dampR     = 10.0;
+
+  if (uEnableRipples == 1) {
+    for (int i = 0; i < MAX_CLICKS; ++i){
+      vec2 pos = uClickPos[i];
+      if (pos.x < 0.0) continue;
+      float cellPixelSize = 8.0 * pixelSize;
+      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);
+      float t = max(uTime - uClickTimes[i], 0.0);
+      float r = distance(uv, cuv);
+      float waveR = speed * t;
+      float ring  = exp(-pow((r - waveR) / thickness, 2.0));
+      float atten = exp(-dampT * t) * exp(-dampR * r);
+      feed = max(feed, ring * atten * uRippleIntensity);
+    }
+  }
+
+  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;
+  float bw = step(0.5, feed + bayer);
+
+  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);
+  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;
+  float coverage = bw * jitterScale;
+  float M;
+  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);
+  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);
+  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);
+  else                                   M = coverage;
+
+  if (uEdgeFade > 0.0) {
+    vec2 norm = gl_FragCoord.xy / uResolution;
+    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));
+    float fade = smoothstep(0.0, uEdgeFade, edge);
+    M *= fade;
+  }
+
+  vec3 color = uColor;
+
+  // sRGB gamma correction - convert linear to sRGB for accurate color output
+  vec3 srgbColor = mix(
+    color * 12.92,
+    1.055 * pow(color, vec3(1.0 / 2.4)) - 0.055,
+    step(0.0031308, color)
+  );
+
+  fragColor = vec4(srgbColor, M);
+}
+`, V = 10, me = ue(({ variant: E = "square", pixelSize: a = 3, color: n = "#DC2626", className: y, style: w, antialias: m = !0, patternScale: s = 2, patternDensity: R = 1, liquid: z = !1, liquidStrength: I = 0.1, liquidRadius: k = 1, pixelSizeJitter: B = 0, enableRipples: L = !0, rippleIntensityScale: t = 1, rippleThickness: l = 0.1, rippleSpeed: c = 0.3, liquidWobbleSpeed: T = 4.5, autoPauseOffscreen: S = !0, speed: g = 0.5, transparent: h = !0, edgeFade: x = 0.5, noiseAmount: D = 0 }) => {
+  const $ = q(null), de = q({ visible: !0 }), X = q(g), f = q(null), O = q(null);
+  return ye(() => {
+    const C = $.current;
+    if (!C) return;
+    X.current = g;
+    const ve = [
+      "antialias",
+      "liquid",
+      "noiseAmount"
+    ], K = {
+      antialias: m,
+      liquid: z,
+      noiseAmount: D
+    };
+    let U = !1;
+    if (!f.current) U = !0;
+    else if (O.current) {
+      for (const e of ve) if (O.current[e] !== K[e]) {
+        U = !0;
+        break;
+      }
+    }
+    if (U) {
+      if (f.current) {
+        const o = f.current;
+        o.resizeObserver?.disconnect(), cancelAnimationFrame(o.raf), o.quad?.geometry.dispose(), o.material.dispose(), o.composer?.dispose(), o.renderer.dispose(), o.renderer.domElement.parentElement === C && C.removeChild(o.renderer.domElement), f.current = null;
+      }
+      const e = document.createElement("canvas"), r = new ze({
+        canvas: e,
+        antialias: m,
+        alpha: !0,
+        powerPreference: "high-performance"
+      });
+      r.domElement.style.width = "100%", r.domElement.style.height = "100%", r.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5)), C.appendChild(r.domElement), h ? r.setClearAlpha(0) : r.setClearColor(0, 1);
+      const d = {
+        uResolution: { value: new le(0, 0) },
+        uTime: { value: 0 },
+        uColor: { value: new Ce(n) },
+        uClickPos: { value: Array.from({ length: V }, () => new le(-1, -1)) },
+        uClickTimes: { value: new Float32Array(V) },
+        uShapeType: { value: se[E] ?? 0 },
+        uPixelSize: { value: a * r.getPixelRatio() },
+        uScale: { value: s },
+        uDensity: { value: R },
+        uPixelJitter: { value: B },
+        uEnableRipples: { value: L ? 1 : 0 },
+        uRippleSpeed: { value: c },
+        uRippleThickness: { value: l },
+        uRippleIntensity: { value: t },
+        uEdgeFade: { value: x }
+      }, P = new Ae(), b = new Te(-1, 1, 1, -1, 0, 1), Y = new be({
+        vertexShader: qe,
+        fragmentShader: Be,
+        uniforms: d,
+        transparent: !0,
+        depthTest: !1,
+        depthWrite: !1,
+        glslVersion: Ee
+      }), pe = new Pe(2, 2), j = new Re(pe, Y);
+      P.add(j);
+      const J = new Se(), W = () => {
+        const o = C.clientWidth || 1, i = C.clientHeight || 1;
+        r.setSize(o, i, !1), d.uResolution.value.set(r.domElement.width, r.domElement.height), f.current?.composer && f.current.composer.setSize(r.domElement.width, r.domElement.height), d.uPixelSize.value = a * r.getPixelRatio();
+      };
+      W();
+      const Q = new ResizeObserver(W);
+      Q.observe(C);
+      const Z = (() => {
+        if (typeof window < "u" && window.crypto?.getRandomValues) {
+          const o = /* @__PURE__ */ new Uint32Array(1);
+          return window.crypto.getRandomValues(o), o[0] / 4294967295;
+        }
+        return Math.random();
+      })() * 1e3;
+      let u, A, F;
+      if (z) {
+        A = Fe(), A.radiusScale = k, u = new re(r);
+        const o = new ie(P, b);
+        F = _e(A.texture, {
+          strength: I,
+          freq: T
+        });
+        const i = new ae(b, F);
+        i.renderToScreen = !0, u.addPass(o), u.addPass(i);
+      }
+      if (D > 0) {
+        u || (u = new re(r), u.addPass(new ie(P, b)));
+        const o = new fe("NoiseEffect", "uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} ", { uniforms: /* @__PURE__ */ new Map([["uTime", new M(0)], ["uAmount", new M(D)]]) }), i = new ae(b, o);
+        i.renderToScreen = !0, u && u.passes.length > 0 && u.passes.forEach((v) => {
+          const p = v;
+          p.renderToScreen = !1;
+        }), u.addPass(i);
+      }
+      u && u.setSize(r.domElement.width, r.domElement.height);
+      const ee = (o) => {
+        const i = r.domElement.getBoundingClientRect(), v = r.domElement.width / i.width, p = r.domElement.height / i.height;
+        return {
+          fx: (o.clientX - i.left) * v,
+          fy: (i.height - (o.clientY - i.top)) * p,
+          w: r.domElement.width,
+          h: r.domElement.height
+        };
+      }, he = (o) => {
+        const { fx: i, fy: v } = ee(o), p = f.current?.clickIx ?? 0;
+        d.uClickPos.value[p].set(i, v), d.uClickTimes.value[p] = d.uTime.value, f.current && (f.current.clickIx = (p + 1) % V);
+      }, xe = (o) => {
+        if (!A) return;
+        const { fx: i, fy: v, w: p, h: G } = ee(o);
+        A.addTouch({
+          x: i / p,
+          y: v / G
+        });
+      };
+      r.domElement.addEventListener("pointerdown", he, { passive: !0 }), r.domElement.addEventListener("pointermove", xe, { passive: !0 });
+      let _ = 0, H = 0;
+      const te = 1e3 / 30, N = (o) => {
+        if (S && !de.current.visible) {
+          _ = requestAnimationFrame(N);
+          return;
+        }
+        const i = o - H;
+        if (i < te) {
+          _ = requestAnimationFrame(N);
+          return;
+        }
+        if (H = o - i % te, d.uTime.value = Z + J.getElapsedTime() * X.current, F) {
+          const v = F.uniforms.get("uTime");
+          v && (v.value = d.uTime.value);
+        }
+        u ? (A && A.update(), u.passes.forEach((v) => {
+          const p = v;
+          p.effects && p.effects.forEach((G) => {
+            const oe = G.uniforms?.get("uTime");
+            oe && (oe.value = d.uTime.value);
+          });
+        }), u.render()) : r.render(P, b), _ = requestAnimationFrame(N);
+      };
+      _ = requestAnimationFrame((o) => {
+        H = o, N(o);
+      }), f.current = {
+        renderer: r,
+        scene: P,
+        camera: b,
+        material: Y,
+        clock: J,
+        clickIx: 0,
+        uniforms: d,
+        resizeObserver: Q,
+        raf: _,
+        quad: j,
+        timeOffset: Z,
+        composer: u,
+        touch: A,
+        liquidEffect: F
+      };
+    } else {
+      const e = f.current;
+      if (e.uniforms.uShapeType.value = se[E] ?? 0, e.uniforms.uPixelSize.value = a * e.renderer.getPixelRatio(), e.uniforms.uColor.value.set(n), e.uniforms.uScale.value = s, e.uniforms.uDensity.value = R, e.uniforms.uPixelJitter.value = B, e.uniforms.uEnableRipples.value = L ? 1 : 0, e.uniforms.uRippleIntensity.value = t, e.uniforms.uRippleThickness.value = l, e.uniforms.uRippleSpeed.value = c, e.uniforms.uEdgeFade.value = x, h ? e.renderer.setClearAlpha(0) : e.renderer.setClearColor(0, 1), e.liquidEffect) {
+        const r = e.liquidEffect, d = r.uniforms.get("uStrength");
+        d && (d.value = I);
+        const P = r.uniforms.get("uFreq");
+        P && (P.value = T);
+      }
+      e.touch && (e.touch.radiusScale = k);
+    }
+    return O.current = K, () => {
+      if (f.current && U || !f.current) return;
+      const e = f.current;
+      e.resizeObserver?.disconnect(), cancelAnimationFrame(e.raf), e.quad?.geometry.dispose(), e.material.dispose(), e.composer?.dispose(), e.renderer.dispose(), e.renderer.domElement.parentElement === C && C.removeChild(e.renderer.domElement), f.current = null;
+    };
+  }, [
+    m,
+    z,
+    D,
+    a,
+    s,
+    R,
+    L,
+    t,
+    l,
+    c,
+    B,
+    x,
+    h,
+    I,
+    k,
+    T,
+    S,
+    E,
+    n,
+    g
+  ]), /* @__PURE__ */ ce("div", {
+    ref: $,
+    className: `${ke.container} ${y ?? ""}`,
+    style: w,
+    "aria-label": "PixelBlast interactive background"
+  });
+});
+me.displayName = "PixelBlast";
+var Le = ue((E) => {
+  const { currentTheme: a } = ge(), n = we(() => {
+    const y = a.colors.variables.primary || "#DC2626";
+    return ((m) => {
+      if (m.startsWith("#")) return m;
+      const s = m.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      return s ? `#${parseInt(s[1], 10).toString(16).padStart(2, "0")}${parseInt(s[2], 10).toString(16).padStart(2, "0")}${parseInt(s[3], 10).toString(16).padStart(2, "0")}` : m;
+    })(y);
+  }, [a]);
+  return /* @__PURE__ */ ce(me, {
+    color: n,
+    variant: "square",
+    pixelSize: 6,
+    patternScale: 2,
+    patternDensity: 1,
+    pixelSizeJitter: 0,
+    enableRipples: !0,
+    rippleSpeed: 0.3,
+    rippleThickness: 0.12,
+    rippleIntensityScale: 1.2,
+    liquid: !1,
+    liquidStrength: 0.12,
+    liquidRadius: 1.2,
+    liquidWobbleSpeed: 5,
+    speed: 0.3,
+    edgeFade: 0.25,
+    transparent: !0,
+    antialias: !1,
+    ...E
+  });
+});
+Le.displayName = "PixelBlastBackground";
+export {
+  Le as t
+};
+
+//# sourceMappingURL=chunk-PixelBlast-BiBrG_NH.mjs.map

package/dist/chunk-PixelBlast-BiBrG_NH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-PixelBlast-BiBrG_NH.mjs","names":[],"sources":["../src/designs/animations/PixelBlast/style.module.css","../src/designs/animations/PixelBlast/index.tsx"],"sourcesContent":[".container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n","// Component inspired by github.com/zavalit/bayer-dithering-webgl-demo\n\nimport React, { memo, useEffect, useMemo, useRef } from \"react\";\nimport { Effect, EffectComposer, EffectPass, RenderPass } from \"postprocessing\";\nimport {\n  Clock,\n  Color,\n  GLSL3,\n  LinearFilter,\n  Mesh,\n  OrthographicCamera,\n  PlaneGeometry,\n  Scene,\n  ShaderMaterial,\n  Texture,\n  Uniform,\n  Vector2,\n  WebGLRenderer,\n} from \"three\";\n\nimport { useTheme } from \"@/themes/hooks/useTheme\";\n\nimport styles from \"./style.module.css\";\n\ntype PixelBlastVariant = \"square\" | \"circle\" | \"triangle\" | \"diamond\";\n\ninterface TouchPoint {\n  x: number;\n  y: number;\n  vx: number;\n  vy: number;\n  force: number;\n  age: number;\n}\n\ninterface TouchTexture {\n  canvas: HTMLCanvasElement;\n  texture: Texture;\n  addTouch: (norm: { x: number; y: number }) => void;\n  update: () => void;\n  radiusScale: number;\n  size: number;\n}\n\ninterface ReinitConfig {\n  antialias: boolean;\n  liquid: boolean;\n  noiseAmount: number;\n}\n\ntype PixelBlastProps = {\n  variant?: PixelBlastVariant;\n  pixelSize?: number;\n  color?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  antialias?: boolean;\n  patternScale?: number;\n  patternDensity?: number;\n  liquid?: boolean;\n  liquidStrength?: number;\n  liquidRadius?: number;\n  pixelSizeJitter?: number;\n  enableRipples?: boolean;\n  rippleIntensityScale?: number;\n  rippleThickness?: number;\n  rippleSpeed?: number;\n  liquidWobbleSpeed?: number;\n  autoPauseOffscreen?: boolean;\n  speed?: number;\n  transparent?: boolean;\n  edgeFade?: number;\n  noiseAmount?: number;\n};\n\nconst createTouchTexture = (): TouchTexture => {\n  const size = 64;\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = size;\n  canvas.height = size;\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) throw new Error(\"2D context not available\");\n  ctx.fillStyle = \"black\";\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  const texture = new Texture(canvas);\n  texture.minFilter = LinearFilter;\n  texture.magFilter = LinearFilter;\n  texture.generateMipmaps = false;\n  const trail: TouchPoint[] = [];\n  let last: { x: number; y: number } | null = null;\n  const maxAge = 64;\n  let radius = 0.1 * size;\n  const speed = 1 / maxAge;\n  const clear = () => {\n    ctx.fillStyle = \"black\";\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  };\n  const drawPoint = (p: TouchPoint) => {\n    const pos = { x: p.x * size, y: (1 - p.y) * size };\n    let intensity = 1;\n    const easeOutSine = (t: number) => Math.sin((t * Math.PI) / 2);\n    const easeOutQuad = (t: number) => -t * (t - 2);\n    if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3));\n    else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0;\n    intensity *= p.force;\n    const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}`;\n    const offset = size * 5;\n    ctx.shadowOffsetX = offset;\n    ctx.shadowOffsetY = offset;\n    ctx.shadowBlur = radius;\n    ctx.shadowColor = `rgba(${color},${0.22 * intensity})`;\n    ctx.beginPath();\n    ctx.fillStyle = \"rgba(255,0,0,1)\";\n    ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2);\n    ctx.fill();\n  };\n  const addTouch = (norm: { x: number; y: number }) => {\n    let force = 0;\n    let vx = 0;\n    let vy = 0;\n    if (last) {\n      const dx = norm.x - last.x;\n      const dy = norm.y - last.y;\n      if (dx === 0 && dy === 0) return;\n      const dd = dx * dx + dy * dy;\n      const d = Math.sqrt(dd);\n      vx = dx / (d || 1);\n      vy = dy / (d || 1);\n      force = Math.min(dd * 10000, 1);\n    }\n    last = { x: norm.x, y: norm.y };\n    trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy });\n  };\n  const update = () => {\n    clear();\n    for (let i = trail.length - 1; i >= 0; i--) {\n      const point = trail[i];\n      const f = point.force * speed * (1 - point.age / maxAge);\n      point.x += point.vx * f;\n      point.y += point.vy * f;\n      point.age++;\n      if (point.age > maxAge) trail.splice(i, 1);\n    }\n    for (let i = 0; i < trail.length; i++) drawPoint(trail[i]);\n    texture.needsUpdate = true;\n  };\n  return {\n    canvas,\n    texture,\n    addTouch,\n    update,\n    set radiusScale(v: number) {\n      radius = 0.1 * size * v;\n    },\n    get radiusScale() {\n      return radius / (0.1 * size);\n    },\n    size,\n  };\n};\n\nconst createLiquidEffect = (texture: Texture, opts?: { strength?: number; freq?: number }) => {\n  const fragment = `\n    uniform sampler2D uTexture;\n    uniform float uStrength;\n    uniform float uTime;\n    uniform float uFreq;\n\n    void mainUv(inout vec2 uv) {\n      vec4 tex = texture2D(uTexture, uv);\n      float vx = tex.r * 2.0 - 1.0;\n      float vy = tex.g * 2.0 - 1.0;\n      float intensity = tex.b;\n\n      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);\n\n      float amt = uStrength * intensity * wave;\n\n      uv += vec2(vx, vy) * amt;\n    }\n    `;\n  return new Effect(\"LiquidEffect\", fragment, {\n    uniforms: new Map<string, Uniform>([\n      [\"uTexture\", new Uniform(texture)],\n      [\"uStrength\", new Uniform(opts?.strength ?? 0.025)],\n      [\"uTime\", new Uniform(0)],\n      [\"uFreq\", new Uniform(opts?.freq ?? 4.5)],\n    ]),\n  });\n};\n\nconst SHAPE_MAP: Record<PixelBlastVariant, number> = {\n  square: 0,\n  circle: 1,\n  triangle: 2,\n  diamond: 3,\n};\n\nconst VERTEX_SRC = `\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\n`;\n\nconst FRAGMENT_SRC = `\nprecision highp float;\n\nuniform vec3  uColor;\nuniform vec2  uResolution;\nuniform float uTime;\nuniform float uPixelSize;\nuniform float uScale;\nuniform float uDensity;\nuniform float uPixelJitter;\nuniform int   uEnableRipples;\nuniform float uRippleSpeed;\nuniform float uRippleThickness;\nuniform float uRippleIntensity;\nuniform float uEdgeFade;\n\nuniform int   uShapeType;\nconst int SHAPE_SQUARE   = 0;\nconst int SHAPE_CIRCLE   = 1;\nconst int SHAPE_TRIANGLE = 2;\nconst int SHAPE_DIAMOND  = 3;\n\nconst int   MAX_CLICKS = 10;\n\nuniform vec2  uClickPos  [MAX_CLICKS];\nuniform float uClickTimes[MAX_CLICKS];\n\nout vec4 fragColor;\n\nfloat Bayer2(vec2 a) {\n  a = floor(a);\n  return fract(a.x / 2. + a.y * a.y * .75);\n}\n#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))\n#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))\n\n#define FBM_OCTAVES     5\n#define FBM_LACUNARITY  1.25\n#define FBM_GAIN        1.0\n\nfloat hash11(float n){ return fract(sin(n)*43758.5453); }\n\nfloat vnoise(vec3 p){\n  vec3 ip = floor(p);\n  vec3 fp = fract(p);\n  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);\n  float x00 = mix(n000, n100, w.x);\n  float x10 = mix(n010, n110, w.x);\n  float x01 = mix(n001, n101, w.x);\n  float x11 = mix(n011, n111, w.x);\n  float y0  = mix(x00, x10, w.y);\n  float y1  = mix(x01, x11, w.y);\n  return mix(y0, y1, w.z) * 2.0 - 1.0;\n}\n\nfloat fbm2(vec2 uv, float t){\n  vec3 p = vec3(uv * uScale, t);\n  float amp = 1.0;\n  float freq = 1.0;\n  float sum = 1.0;\n  for (int i = 0; i < FBM_OCTAVES; ++i){\n    sum  += amp * vnoise(p * freq);\n    freq *= FBM_LACUNARITY;\n    amp  *= FBM_GAIN;\n  }\n  return sum * 0.5 + 0.5;\n}\n\nfloat maskCircle(vec2 p, float cov){\n  float r = sqrt(cov) * .25;\n  float d = length(p - 0.5) - r;\n  float aa = 0.5 * fwidth(d);\n  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));\n}\n\nfloat maskTriangle(vec2 p, vec2 id, float cov){\n  bool flip = mod(id.x + id.y, 2.0) > 0.5;\n  if (flip) p.x = 1.0 - p.x;\n  float r = sqrt(cov);\n  float d  = p.y - r*(1.0 - p.x);\n  float aa = fwidth(d);\n  return cov * clamp(0.5 - d/aa, 0.0, 1.0);\n}\n\nfloat maskDiamond(vec2 p, float cov){\n  float r = sqrt(cov) * 0.564;\n  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);\n}\n\nvoid main(){\n  float pixelSize = uPixelSize;\n  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;\n  float aspectRatio = uResolution.x / uResolution.y;\n\n  vec2 pixelId = floor(fragCoord / pixelSize);\n  vec2 pixelUV = fract(fragCoord / pixelSize);\n\n  float cellPixelSize = 8.0 * pixelSize;\n  vec2 cellId = floor(fragCoord / cellPixelSize);\n  vec2 cellCoord = cellId * cellPixelSize;\n  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);\n\n  float base = fbm2(uv, uTime * 0.05);\n  base = base * 0.5 - 0.65;\n\n  float feed = base + (uDensity - 0.5) * 0.3;\n\n  float speed     = uRippleSpeed;\n  float thickness = uRippleThickness;\n  const float dampT     = 1.0;\n  const float dampR     = 10.0;\n\n  if (uEnableRipples == 1) {\n    for (int i = 0; i < MAX_CLICKS; ++i){\n      vec2 pos = uClickPos[i];\n      if (pos.x < 0.0) continue;\n      float cellPixelSize = 8.0 * pixelSize;\n      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);\n      float t = max(uTime - uClickTimes[i], 0.0);\n      float r = distance(uv, cuv);\n      float waveR = speed * t;\n      float ring  = exp(-pow((r - waveR) / thickness, 2.0));\n      float atten = exp(-dampT * t) * exp(-dampR * r);\n      feed = max(feed, ring * atten * uRippleIntensity);\n    }\n  }\n\n  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;\n  float bw = step(0.5, feed + bayer);\n\n  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);\n  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;\n  float coverage = bw * jitterScale;\n  float M;\n  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);\n  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);\n  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);\n  else                                   M = coverage;\n\n  if (uEdgeFade > 0.0) {\n    vec2 norm = gl_FragCoord.xy / uResolution;\n    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));\n    float fade = smoothstep(0.0, uEdgeFade, edge);\n    M *= fade;\n  }\n\n  vec3 color = uColor;\n\n  // sRGB gamma correction - convert linear to sRGB for accurate color output\n  vec3 srgbColor = mix(\n    color * 12.92,\n    1.055 * pow(color, vec3(1.0 / 2.4)) - 0.055,\n    step(0.0031308, color)\n  );\n\n  fragColor = vec4(srgbColor, M);\n}\n`;\n\nconst MAX_CLICKS = 10;\n\nconst PixelBlast: React.FC<PixelBlastProps> = memo(\n  ({\n    variant = \"square\",\n    pixelSize = 3,\n    color = \"#DC2626\",\n    className,\n    style,\n    antialias = true,\n    patternScale = 2,\n    patternDensity = 1,\n    liquid = false,\n    liquidStrength = 0.1,\n    liquidRadius = 1,\n    pixelSizeJitter = 0,\n    enableRipples = true,\n    rippleIntensityScale = 1,\n    rippleThickness = 0.1,\n    rippleSpeed = 0.3,\n    liquidWobbleSpeed = 4.5,\n    autoPauseOffscreen = true,\n    speed = 0.5,\n    transparent = true,\n    edgeFade = 0.5,\n    noiseAmount = 0,\n  }) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const visibilityRef = useRef({ visible: true });\n    const speedRef = useRef(speed);\n\n    const threeRef = useRef<{\n      renderer: WebGLRenderer;\n      scene: Scene;\n      camera: OrthographicCamera;\n      material: ShaderMaterial;\n      clock: Clock;\n      clickIx: number;\n      uniforms: {\n        uResolution: { value: Vector2 };\n        uTime: { value: number };\n        uColor: { value: Color };\n        uClickPos: { value: Vector2[] };\n        uClickTimes: { value: Float32Array };\n        uShapeType: { value: number };\n        uPixelSize: { value: number };\n        uScale: { value: number };\n        uDensity: { value: number };\n        uPixelJitter: { value: number };\n        uEnableRipples: { value: number };\n        uRippleSpeed: { value: number };\n        uRippleThickness: { value: number };\n        uRippleIntensity: { value: number };\n        uEdgeFade: { value: number };\n      };\n      resizeObserver?: ResizeObserver;\n      raf?: number;\n      quad?: Mesh<PlaneGeometry, ShaderMaterial>;\n      timeOffset?: number;\n      composer?: EffectComposer;\n      touch?: ReturnType<typeof createTouchTexture>;\n      liquidEffect?: Effect;\n    } | null>(null);\n    const prevConfigRef = useRef<ReinitConfig | null>(null);\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n      speedRef.current = speed;\n      const needsReinitKeys: (keyof ReinitConfig)[] = [\"antialias\", \"liquid\", \"noiseAmount\"];\n      const cfg: ReinitConfig = { antialias, liquid, noiseAmount };\n      let mustReinit = false;\n      if (!threeRef.current) mustReinit = true;\n      else if (prevConfigRef.current) {\n        for (const k of needsReinitKeys)\n          if (prevConfigRef.current[k] !== cfg[k]) {\n            mustReinit = true;\n            break;\n          }\n      }\n      if (mustReinit) {\n        if (threeRef.current) {\n          const t = threeRef.current;\n          t.resizeObserver?.disconnect();\n          cancelAnimationFrame(t.raf!);\n          t.quad?.geometry.dispose();\n          t.material.dispose();\n          t.composer?.dispose();\n          t.renderer.dispose();\n          if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);\n          threeRef.current = null;\n        }\n        const canvas = document.createElement(\"canvas\");\n        const renderer = new WebGLRenderer({\n          canvas,\n          antialias,\n          alpha: true,\n          powerPreference: \"high-performance\",\n        });\n        renderer.domElement.style.width = \"100%\";\n        renderer.domElement.style.height = \"100%\";\n        // 降低像素比以提高性能\n        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));\n        container.appendChild(renderer.domElement);\n        if (transparent) renderer.setClearAlpha(0);\n        else renderer.setClearColor(0x000000, 1);\n        const uniforms = {\n          uResolution: { value: new Vector2(0, 0) },\n          uTime: { value: 0 },\n          uColor: { value: new Color(color) },\n          uClickPos: {\n            value: Array.from({ length: MAX_CLICKS }, () => new Vector2(-1, -1)),\n          },\n          uClickTimes: { value: new Float32Array(MAX_CLICKS) },\n          uShapeType: { value: SHAPE_MAP[variant] ?? 0 },\n          uPixelSize: { value: pixelSize * renderer.getPixelRatio() },\n          uScale: { value: patternScale },\n          uDensity: { value: patternDensity },\n          uPixelJitter: { value: pixelSizeJitter },\n          uEnableRipples: { value: enableRipples ? 1 : 0 },\n          uRippleSpeed: { value: rippleSpeed },\n          uRippleThickness: { value: rippleThickness },\n          uRippleIntensity: { value: rippleIntensityScale },\n          uEdgeFade: { value: edgeFade },\n        };\n        const scene = new Scene();\n        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);\n        const material = new ShaderMaterial({\n          vertexShader: VERTEX_SRC,\n          fragmentShader: FRAGMENT_SRC,\n          uniforms,\n          transparent: true,\n          depthTest: false,\n          depthWrite: false,\n          glslVersion: GLSL3,\n        });\n\n        const quadGeom = new PlaneGeometry(2, 2);\n        const quad = new Mesh(quadGeom, material);\n        scene.add(quad);\n        const clock = new Clock();\n        const setSize = () => {\n          const w = container.clientWidth || 1;\n          const h = container.clientHeight || 1;\n          renderer.setSize(w, h, false);\n          uniforms.uResolution.value.set(renderer.domElement.width, renderer.domElement.height);\n          if (threeRef.current?.composer) threeRef.current.composer.setSize(renderer.domElement.width, renderer.domElement.height);\n          uniforms.uPixelSize.value = pixelSize * renderer.getPixelRatio();\n        };\n        setSize();\n        const ro = new ResizeObserver(setSize);\n        ro.observe(container);\n        const randomFloat = (): number => {\n          if (typeof window !== \"undefined\" && window.crypto?.getRandomValues) {\n            const u32 = new Uint32Array(1);\n            window.crypto.getRandomValues(u32);\n            return u32[0] / 0xffffffff;\n          }\n          return Math.random();\n        };\n        const timeOffset = randomFloat() * 1000;\n        let composer: EffectComposer | undefined;\n        let touch: ReturnType<typeof createTouchTexture> | undefined;\n        let liquidEffect: Effect | undefined;\n        if (liquid) {\n          touch = createTouchTexture();\n          touch.radiusScale = liquidRadius;\n          composer = new EffectComposer(renderer);\n          const renderPass = new RenderPass(scene, camera);\n          liquidEffect = createLiquidEffect(touch.texture, {\n            strength: liquidStrength,\n            freq: liquidWobbleSpeed,\n          });\n          const effectPass = new EffectPass(camera, liquidEffect);\n          effectPass.renderToScreen = true;\n          composer.addPass(renderPass);\n          composer.addPass(effectPass);\n        }\n        if (noiseAmount > 0) {\n          if (!composer) {\n            composer = new EffectComposer(renderer);\n            composer.addPass(new RenderPass(scene, camera));\n          }\n          const noiseEffect = new Effect(\n            \"NoiseEffect\",\n            `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `,\n            {\n              uniforms: new Map<string, Uniform>([\n                [\"uTime\", new Uniform(0)],\n                [\"uAmount\", new Uniform(noiseAmount)],\n              ]),\n            },\n          );\n          const noisePass = new EffectPass(camera, noiseEffect);\n          noisePass.renderToScreen = true;\n          if (composer && composer.passes.length > 0) {\n            composer.passes.forEach((p: { renderToScreen?: boolean }) => {\n              const pass = p as { renderToScreen?: boolean };\n              pass.renderToScreen = false;\n            });\n          }\n          composer.addPass(noisePass);\n        }\n        if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height);\n        const mapToPixels = (e: PointerEvent) => {\n          const rect = renderer.domElement.getBoundingClientRect();\n          const scaleX = renderer.domElement.width / rect.width;\n          const scaleY = renderer.domElement.height / rect.height;\n          const fx = (e.clientX - rect.left) * scaleX;\n          const fy = (rect.height - (e.clientY - rect.top)) * scaleY;\n          return {\n            fx,\n            fy,\n            w: renderer.domElement.width,\n            h: renderer.domElement.height,\n          };\n        };\n        const onPointerDown = (e: PointerEvent) => {\n          const { fx, fy } = mapToPixels(e);\n          const ix = threeRef.current?.clickIx ?? 0;\n          uniforms.uClickPos.value[ix].set(fx, fy);\n          uniforms.uClickTimes.value[ix] = uniforms.uTime.value;\n          if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS;\n        };\n        const onPointerMove = (e: PointerEvent) => {\n          if (!touch) return;\n          const { fx, fy, w, h } = mapToPixels(e);\n          touch.addTouch({ x: fx / w, y: fy / h });\n        };\n        renderer.domElement.addEventListener(\"pointerdown\", onPointerDown, {\n          passive: true,\n        });\n        renderer.domElement.addEventListener(\"pointermove\", onPointerMove, {\n          passive: true,\n        });\n        let raf = 0;\n        let lastFrameTime = 0;\n        const targetFPS = 30; // 限制到 30 FPS 以提高性能\n        const frameInterval = 1000 / targetFPS;\n\n        const animate = (currentTime: number) => {\n          if (autoPauseOffscreen && !visibilityRef.current.visible) {\n            raf = requestAnimationFrame(animate);\n            return;\n          }\n\n          // 帧率限制\n          const elapsed = currentTime - lastFrameTime;\n          if (elapsed < frameInterval) {\n            raf = requestAnimationFrame(animate);\n            return;\n          }\n          lastFrameTime = currentTime - (elapsed % frameInterval);\n\n          uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.current;\n          if (liquidEffect) {\n            const liqEffect = liquidEffect as Effect & { uniforms: Map<string, Uniform> };\n            const timeUniform = liqEffect.uniforms.get(\"uTime\");\n            if (timeUniform) timeUniform.value = uniforms.uTime.value;\n          }\n          if (composer) {\n            if (touch) touch.update();\n            composer.passes.forEach((p: any) => {\n              const pass = p as { effects?: Array<Effect & { uniforms?: Map<string, Uniform> }> };\n              if (pass.effects) {\n                pass.effects.forEach((eff: Effect & { uniforms?: Map<string, Uniform> }) => {\n                  const timeUniform = eff.uniforms?.get(\"uTime\");\n                  if (timeUniform) timeUniform.value = uniforms.uTime.value;\n                });\n              }\n            });\n            composer.render();\n          } else renderer.render(scene, camera);\n          raf = requestAnimationFrame(animate);\n        };\n        raf = requestAnimationFrame((time) => {\n          lastFrameTime = time;\n          animate(time);\n        });\n        threeRef.current = {\n          renderer,\n          scene,\n          camera,\n          material,\n          clock,\n          clickIx: 0,\n          uniforms,\n          resizeObserver: ro,\n          raf,\n          quad,\n          timeOffset,\n          composer,\n          touch,\n          liquidEffect,\n        };\n      } else {\n        const t = threeRef.current!;\n        t.uniforms.uShapeType.value = SHAPE_MAP[variant] ?? 0;\n        t.uniforms.uPixelSize.value = pixelSize * t.renderer.getPixelRatio();\n        t.uniforms.uColor.value.set(color);\n        t.uniforms.uScale.value = patternScale;\n        t.uniforms.uDensity.value = patternDensity;\n        t.uniforms.uPixelJitter.value = pixelSizeJitter;\n        t.uniforms.uEnableRipples.value = enableRipples ? 1 : 0;\n        t.uniforms.uRippleIntensity.value = rippleIntensityScale;\n        t.uniforms.uRippleThickness.value = rippleThickness;\n        t.uniforms.uRippleSpeed.value = rippleSpeed;\n        t.uniforms.uEdgeFade.value = edgeFade;\n        if (transparent) t.renderer.setClearAlpha(0);\n        else t.renderer.setClearColor(0x000000, 1);\n        if (t.liquidEffect) {\n          const liqEffect = t.liquidEffect as Effect & { uniforms: Map<string, Uniform> };\n          const uStrength = liqEffect.uniforms.get(\"uStrength\");\n          if (uStrength) uStrength.value = liquidStrength;\n          const uFreq = liqEffect.uniforms.get(\"uFreq\");\n          if (uFreq) uFreq.value = liquidWobbleSpeed;\n        }\n        if (t.touch) t.touch.radiusScale = liquidRadius;\n      }\n      prevConfigRef.current = cfg;\n      return () => {\n        if (threeRef.current && mustReinit) return;\n        if (!threeRef.current) return;\n        const t = threeRef.current;\n        t.resizeObserver?.disconnect();\n        cancelAnimationFrame(t.raf!);\n        t.quad?.geometry.dispose();\n        t.material.dispose();\n        t.composer?.dispose();\n        t.renderer.dispose();\n        if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);\n        threeRef.current = null;\n      };\n    }, [\n      antialias,\n      liquid,\n      noiseAmount,\n      pixelSize,\n      patternScale,\n      patternDensity,\n      enableRipples,\n      rippleIntensityScale,\n      rippleThickness,\n      rippleSpeed,\n      pixelSizeJitter,\n      edgeFade,\n      transparent,\n      liquidStrength,\n      liquidRadius,\n      liquidWobbleSpeed,\n      autoPauseOffscreen,\n      variant,\n      color,\n      speed,\n    ]);\n\n    return <div ref={containerRef} className={`${styles.container} ${className ?? \"\"}`} style={style} aria-label=\"PixelBlast interactive background\" />;\n  },\n);\n\nPixelBlast.displayName = \"PixelBlast\";\n\nconst PixelBlastBackground: React.FC<Omit<PixelBlastProps, \"color\">> = memo((props) => {\n  const { currentTheme } = useTheme();\n\n  // 从主题中获取颜色\n  const color = useMemo(() => {\n    const primary = currentTheme.colors.variables.primary || \"#DC2626\";\n\n    const toHex = (color: string): string => {\n      if (color.startsWith(\"#\")) {\n        return color;\n      }\n      const match = color.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/);\n      if (match) {\n        const r = parseInt(match[1], 10).toString(16).padStart(2, \"0\");\n        const g = parseInt(match[2], 10).toString(16).padStart(2, \"0\");\n        const b = parseInt(match[3], 10).toString(16).padStart(2, \"0\");\n        return `#${r}${g}${b}`;\n      }\n      return color;\n    };\n\n    return toHex(primary);\n  }, [currentTheme]);\n\n  return (\n    <PixelBlast\n      color={color}\n      variant=\"square\"\n      pixelSize={6}\n      patternScale={2}\n      patternDensity={1}\n      pixelSizeJitter={0}\n      enableRipples\n      rippleSpeed={0.3}\n      rippleThickness={0.12}\n      rippleIntensityScale={1.2}\n      liquid={false}\n      liquidStrength={0.12}\n      liquidRadius={1.2}\n      liquidWobbleSpeed={5}\n      speed={0.3}\n      edgeFade={0.25}\n      transparent\n      antialias={false}\n      {...props}\n    />\n  );\n});\n\nPixelBlastBackground.displayName = \"PixelBlastBackground\";\n\nexport default PixelBlastBackground;\n"],"mappings":"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"}

package/dist/chunk-ThemeProvider-C4kxX2D0.cjs

@@ -0,0 +1,3 @@
+const u=require("./chunk-preference-BXXryZLY.cjs"),i=require("./chunk-preference-BP-GO9Uk.cjs");let o=require("react"),s=require("@radix-ui/themes"),d=require("react/jsx-runtime");var t=({children:n,onAppearanceChange:a})=>{const e=u.usePreferenceStore(c=>c.theme),r=i.useResolvedAppearance();return(0,o.useEffect)(()=>{document.documentElement.dataset.appearance=r,a?.(r)},[a,r]),(0,d.jsx)(s.Theme,{appearance:r,accentColor:e.accent,grayColor:e.gray,radius:e.radius,scaling:e.scaling,panelBackground:e.panelBackground,hasBackground:!0,className:"radix-app-theme","data-font-family":e.fontFamily,children:n})};t.displayName="ThemeProvider";Object.defineProperty(exports,"ThemeProvider",{enumerable:!0,get:function(){return t}});
+
+//# sourceMappingURL=chunk-ThemeProvider-C4kxX2D0.cjs.map

package/dist/chunk-ThemeProvider-C4kxX2D0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-ThemeProvider-C4kxX2D0.cjs","names":[],"sources":["../src/providers/ThemeProvider/index.tsx"],"sourcesContent":["/**\n * Shared Radix Theme provider — reads unified preference store.\n * Host may pass document side-effects (e.g. favicon) via `onAppearanceChange`.\n */\nimport type { RadixAppearance } from \"@/themes/radix\";\nimport type { ReactNode } from \"react\";\n\nimport { useEffect } from \"react\";\nimport { Theme } from \"@radix-ui/themes\";\n\nimport { useResolvedAppearance } from \"@/hooks/preference\";\nimport { usePreferenceStore } from \"@/stores/preference\";\n\nimport \"@/themes/index.css\";\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  onAppearanceChange?: (appearance: RadixAppearance) => void;\n}\n\nconst ThemeProvider = ({ children, onAppearanceChange }: ThemeProviderProps) => {\n  const theme = usePreferenceStore((s) => s.theme);\n  const resolvedAppearance = useResolvedAppearance();\n\n  useEffect(() => {\n    document.documentElement.dataset.appearance = resolvedAppearance;\n    onAppearanceChange?.(resolvedAppearance);\n  }, [onAppearanceChange, resolvedAppearance]);\n\n  return (\n    <Theme\n      appearance={resolvedAppearance}\n      accentColor={theme.accent}\n      grayColor={theme.gray}\n      radius={theme.radius}\n      scaling={theme.scaling}\n      panelBackground={theme.panelBackground}\n      hasBackground\n      className=\"radix-app-theme\"\n      data-font-family={theme.fontFamily}\n    >\n      {children}\n    </Theme>\n  );\n};\n\nThemeProvider.displayName = \"ThemeProvider\";\nexport default ThemeProvider;\n"],"mappings":"oLAoBA,IAAM,EAAA,CAAiB,CAAE,SAAA,EAAU,mBAAA,CAAA,IAA6C,CAC9E,MAAM,EAAQ,EAAA,mBAAoB,GAAM,EAAE,KAAK,EACzC,EAAqB,EAAA,sBAAsB,EAEjD,SAAA,EAAA,WAAA,IAAgB,CACd,SAAS,gBAAgB,QAAQ,WAAa,EAC9C,IAAqB,CAAkB,CACzC,EAAG,CAAC,EAAoB,CAAkB,CAAC,KAGzC,EAAA,KAAC,EAAA,MAAD,CACE,WAAY,EACZ,YAAa,EAAM,OACnB,UAAW,EAAM,KACjB,OAAQ,EAAM,OACd,QAAS,EAAM,QACf,gBAAiB,EAAM,gBACvB,cAAA,GACA,UAAU,kBACV,mBAAkB,EAAM,WAEvB,SAAA,CACI,CAAA,CAEX,EAEA,EAAc,YAAc"}

package/dist/chunk-ThemeProvider-D0U8V6ky.mjs

@@ -0,0 +1,28 @@
+import { s as m } from "./chunk-preference-x4EdmqU6.mjs";
+import { r as s } from "./chunk-preference-Y15HwKd0.mjs";
+import { useEffect as c } from "react";
+import { Theme as n } from "@radix-ui/themes";
+import { jsx as p } from "react/jsx-runtime";
+var d = ({ children: o, onAppearanceChange: r }) => {
+  const e = m((t) => t.theme), a = s();
+  return c(() => {
+    document.documentElement.dataset.appearance = a, r?.(a);
+  }, [r, a]), /* @__PURE__ */ p(n, {
+    appearance: a,
+    accentColor: e.accent,
+    grayColor: e.gray,
+    radius: e.radius,
+    scaling: e.scaling,
+    panelBackground: e.panelBackground,
+    hasBackground: !0,
+    className: "radix-app-theme",
+    "data-font-family": e.fontFamily,
+    children: o
+  });
+};
+d.displayName = "ThemeProvider";
+export {
+  d as t
+};
+
+//# sourceMappingURL=chunk-ThemeProvider-D0U8V6ky.mjs.map

package/dist/chunk-ThemeProvider-D0U8V6ky.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-ThemeProvider-D0U8V6ky.mjs","names":[],"sources":["../src/providers/ThemeProvider/index.tsx"],"sourcesContent":["/**\n * Shared Radix Theme provider — reads unified preference store.\n * Host may pass document side-effects (e.g. favicon) via `onAppearanceChange`.\n */\nimport type { RadixAppearance } from \"@/themes/radix\";\nimport type { ReactNode } from \"react\";\n\nimport { useEffect } from \"react\";\nimport { Theme } from \"@radix-ui/themes\";\n\nimport { useResolvedAppearance } from \"@/hooks/preference\";\nimport { usePreferenceStore } from \"@/stores/preference\";\n\nimport \"@/themes/index.css\";\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  onAppearanceChange?: (appearance: RadixAppearance) => void;\n}\n\nconst ThemeProvider = ({ children, onAppearanceChange }: ThemeProviderProps) => {\n  const theme = usePreferenceStore((s) => s.theme);\n  const resolvedAppearance = useResolvedAppearance();\n\n  useEffect(() => {\n    document.documentElement.dataset.appearance = resolvedAppearance;\n    onAppearanceChange?.(resolvedAppearance);\n  }, [onAppearanceChange, resolvedAppearance]);\n\n  return (\n    <Theme\n      appearance={resolvedAppearance}\n      accentColor={theme.accent}\n      grayColor={theme.gray}\n      radius={theme.radius}\n      scaling={theme.scaling}\n      panelBackground={theme.panelBackground}\n      hasBackground\n      className=\"radix-app-theme\"\n      data-font-family={theme.fontFamily}\n    >\n      {children}\n    </Theme>\n  );\n};\n\nThemeProvider.displayName = \"ThemeProvider\";\nexport default ThemeProvider;\n"],"mappings":";;;;;AAoBA,IAAM,IAAA,CAAiB,EAAE,UAAA,GAAU,oBAAA,EAAA,MAA6C;AAC9E,QAAM,IAAQ,EAAA,CAAoB,MAAM,EAAE,KAAK,GACzC,IAAqB,EAAsB;AAEjD,SAAA,EAAA,MAAgB;AACd,aAAS,gBAAgB,QAAQ,aAAa,GAC9C,IAAqB,CAAkB;AAAA,EACzC,GAAG,CAAC,GAAoB,CAAkB,CAAC,GAGzC,gBAAA,EAAC,GAAD;AAAA,IACE,YAAY;AAAA,IACZ,aAAa,EAAM;AAAA,IACnB,WAAW,EAAM;AAAA,IACjB,QAAQ,EAAM;AAAA,IACd,SAAS,EAAM;AAAA,IACf,iBAAiB,EAAM;AAAA,IACvB,eAAA;AAAA,IACA,WAAU;AAAA,IACV,oBAAkB,EAAM;AAAA,IAEvB,UAAA;AAAA,EACI,CAAA;AAEX;AAEA,EAAc,cAAc"}