@elyri/motion 0.0.0-stage → 0.0.1

package/dist/index.cjs

@@ -0,0 +1,4288 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/animations/CountUp/CountUp.tsx
+var readColorScheme = () => {
+  const root = document.documentElement;
+  const attr = root.dataset.theme;
+  if (attr === "light" || attr === "dark") return attr;
+  if (root.classList.contains("light")) return "light";
+  if (root.classList.contains("dark")) return "dark";
+  return "dark";
+};
+var subscribe = (onChange) => {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"] });
+  return () => observer.disconnect();
+};
+var getServerSnapshot = () => "dark";
+function useColorScheme() {
+  return react.useSyncExternalStore(subscribe, readColorScheme, getServerSnapshot);
+}
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var mediaQuery = null;
+var query = () => mediaQuery ??= window.matchMedia(REDUCED_MOTION_QUERY);
+var subscribe2 = (onChange) => {
+  const media = query();
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+};
+var getSnapshot = () => query().matches;
+var getServerSnapshot2 = () => false;
+var ReducedMotionContext = react.createContext(null);
+function ReducedMotionProvider({ reduced, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ReducedMotionContext.Provider, { value: reduced, children });
+}
+function usePrefersReducedMotion() {
+  const override = react.useContext(ReducedMotionContext);
+  const system = react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
+  return override ?? system;
+}
+var VERTEX_SHADER = `
+attribute vec2 aPosition;
+void main() {
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+}
+`;
+var FRAME_INTERVAL = 1e3 / 60 - 1;
+var compile = (gl, fragmentShader) => {
+  const program = gl.createProgram();
+  if (!program) return null;
+  for (const [type, source] of [
+    [gl.VERTEX_SHADER, VERTEX_SHADER],
+    [gl.FRAGMENT_SHADER, fragmentShader]
+  ]) {
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.error("[elyri] shader compile failed:", gl.getShaderInfoLog(shader));
+    }
+    gl.attachShader(program, shader);
+    gl.deleteShader(shader);
+  }
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error("[elyri] shader link failed:", gl.getProgramInfoLog(program));
+    gl.deleteProgram(program);
+    return null;
+  }
+  return program;
+};
+function useShaderCanvas(options) {
+  const canvasRef = react.useRef(null);
+  const optionsRef = react.useRef(options);
+  const redrawRef = react.useRef(void 0);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const { fragmentShader } = options;
+  react.useEffect(() => {
+    optionsRef.current = options;
+    redrawRef.current?.();
+  });
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    const gl = canvas?.getContext("webgl", { alpha: false, antialias: false });
+    if (!canvas || !gl) return;
+    const program = compile(gl, fragmentShader);
+    if (!program) return;
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    gl.useProgram(program);
+    const position = gl.getAttribLocation(program, "aPosition");
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    const locations = /* @__PURE__ */ new Map();
+    const uniform = (name) => {
+      if (!locations.has(name)) locations.set(name, gl.getUniformLocation(program, name));
+      return locations.get(name) ?? null;
+    };
+    let width = 1;
+    let height = 1;
+    let dpr = 1;
+    let time = prefersReducedMotion ? optionsRef.current.stillTime ?? 2.4 : 0;
+    const light = { x: 0.62, y: 0.32 };
+    let pointer = null;
+    const wander = () => ({ x: 0.5 + 0.32 * Math.sin(time * 0.31), y: 0.42 + 0.26 * Math.cos(time * 0.23) });
+    const draw = () => {
+      gl.uniform2f(uniform("uResolution"), width, height);
+      gl.uniform1f(uniform("uTime"), time);
+      gl.uniform2f(uniform("uPointer"), light.x * width, light.y * height);
+      optionsRef.current.onDraw?.({ gl, uniform, dpr });
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+      canvas.dataset.ready = "";
+    };
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      dpr = Math.min(window.devicePixelRatio || 1, optionsRef.current.maxDpr ?? 2);
+      width = Math.max(1, Math.round(rect.width * dpr));
+      height = Math.max(1, Math.round(rect.height * dpr));
+      canvas.width = width;
+      canvas.height = height;
+      gl.viewport(0, 0, width, height);
+      draw();
+    };
+    const handlePointerMove = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width;
+      const y = (event.clientY - rect.top) / rect.height;
+      pointer = x >= 0 && x <= 1 && y >= 0 && y <= 1 ? { x, y } : null;
+      if (prefersReducedMotion && pointer && (optionsRef.current.interactive ?? true)) {
+        Object.assign(light, pointer);
+        draw();
+      }
+    };
+    const handlePointerLeave = () => {
+      pointer = null;
+    };
+    let frame = 0;
+    let last = 0;
+    let inView = true;
+    const tick = (now) => {
+      frame = requestAnimationFrame(tick);
+      if (last && now - last < FRAME_INTERVAL) return;
+      const dt = last ? Math.min((now - last) / 1e3, 0.1) : 0;
+      last = now;
+      const { speed = 1, interactive = true } = optionsRef.current;
+      time += dt * speed;
+      const target = pointer && interactive ? pointer : wander();
+      const ease = 1 - Math.exp(-dt * 4);
+      light.x += (target.x - light.x) * ease;
+      light.y += (target.y - light.y) * ease;
+      draw();
+    };
+    const start = () => {
+      if (prefersReducedMotion || frame || !inView || document.hidden) return;
+      last = 0;
+      frame = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      frame = 0;
+    };
+    const handleVisibility = () => document.hidden ? stop() : start();
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(canvas);
+    const intersectionObserver = new IntersectionObserver(([entry]) => {
+      inView = entry.isIntersecting;
+      if (inView) start();
+      else stop();
+    });
+    intersectionObserver.observe(canvas);
+    window.addEventListener("pointermove", handlePointerMove, { passive: true });
+    document.documentElement.addEventListener("pointerleave", handlePointerLeave);
+    document.addEventListener("visibilitychange", handleVisibility);
+    redrawRef.current = () => {
+      if (prefersReducedMotion) draw();
+    };
+    resize();
+    start();
+    return () => {
+      stop();
+      redrawRef.current = void 0;
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+      window.removeEventListener("pointermove", handlePointerMove);
+      document.documentElement.removeEventListener("pointerleave", handlePointerLeave);
+      document.removeEventListener("visibilitychange", handleVisibility);
+      gl.deleteBuffer(buffer);
+      gl.deleteProgram(program);
+    };
+  }, [fragmentShader, prefersReducedMotion]);
+  return canvasRef;
+}
+
+// src/utils/cn.ts
+function cn(...values) {
+  const classes = [];
+  for (const value of values) {
+    if (!value) continue;
+    classes.push(Array.isArray(value) ? cn(...value) : String(value));
+  }
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/utils/color.ts
+function hexToLinearRgb(hex) {
+  let value = hex.replace("#", "");
+  if (value.length === 3) value = [...value].map((char) => char + char).join("");
+  const int = parseInt(value.slice(0, 6), 16);
+  return [int >> 16 & 255, int >> 8 & 255, int & 255].map((channel) => (channel / 255) ** 2.2);
+}
+
+// src/utils/text.ts
+var splitTextUnits = (text, by) => {
+  let index = 0;
+  return text.split(/(\s+)/).filter(Boolean).map((part, partIndex) => {
+    if (/^\s+$/.test(part)) return { kind: "space", key: `space-${partIndex}`, value: part };
+    const units = by === "char" ? Array.from(part) : [part];
+    return {
+      kind: "word",
+      key: `word-${partIndex}`,
+      units: units.map((char) => ({ char, index: index++ }))
+    };
+  });
+};
+var group = (value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+var easeOutCubic = (progress) => 1 - (1 - progress) ** 3;
+function CountUp({
+  className,
+  to,
+  from = 0,
+  duration = 1200,
+  decimals = 0,
+  separator = false,
+  prefix,
+  suffix,
+  once = true
+}) {
+  const elementRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [value, setValue] = react.useState(from);
+  const [isIntersecting, setIsIntersecting] = react.useState(false);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsIntersecting(true);
+          if (once) observer.disconnect();
+          return;
+        }
+        if (!once) setIsIntersecting(false);
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [once, prefersReducedMotion]);
+  react.useEffect(() => {
+    if (!isIntersecting || prefersReducedMotion) return;
+    let frame = 0;
+    const startedAt = performance.now();
+    const tick = (now) => {
+      const progress = duration > 0 ? Math.min((now - startedAt) / duration, 1) : 1;
+      setValue(from + (to - from) * easeOutCubic(progress));
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [isIntersecting, from, to, duration, prefersReducedMotion]);
+  const fixed = (prefersReducedMotion ? to : value).toFixed(decimals);
+  const [integer, fraction] = fixed.split(".");
+  const grouped = separator ? group(integer) : integer;
+  const display = fraction ? `${grouped}.${fraction}` : grouped;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: elementRef, className: cn("elyri-count-up", className), children: [
+    prefix,
+    display,
+    suffix
+  ] });
+}
+function FadeIn({
+  children,
+  className,
+  direction = "up",
+  delay = 0,
+  duration = 600,
+  distance = 24,
+  once = true
+}) {
+  const elementRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isIntersecting, setIsIntersecting] = react.useState(false);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsIntersecting(true);
+          if (once) observer.disconnect();
+          return;
+        }
+        if (!once) setIsIntersecting(false);
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [once, prefersReducedMotion]);
+  const style = {
+    "--elyri-fade-in-delay": `${delay}ms`,
+    "--elyri-fade-in-duration": `${duration}ms`,
+    "--elyri-fade-in-distance": `${distance}px`
+  };
+  const isVisible = prefersReducedMotion || isIntersecting;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: elementRef,
+      className: cn("elyri-fade-in", `elyri-fade-in--${direction}`, isVisible && "elyri-fade-in--visible", className),
+      style,
+      children
+    }
+  );
+}
+var easeOutCubic2 = (progress) => 1 - (1 - progress) ** 3;
+function Magnetic({ children, className, strength = 0.35, range = 120, resetDuration = 400 }) {
+  const elementRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+    let moveFrame = 0;
+    let resetFrame = 0;
+    let offset = { x: 0, y: 0 };
+    let pointer = null;
+    const setOffset = (x, y) => {
+      offset = { x, y };
+      element.style.setProperty("--elyri-magnetic-x", `${x}px`);
+      element.style.setProperty("--elyri-magnetic-y", `${y}px`);
+    };
+    const startReset = () => {
+      if (resetFrame || !offset.x && !offset.y) return;
+      const from = { ...offset };
+      const startedAt = performance.now();
+      const step = (now) => {
+        const progress = Math.min((now - startedAt) / resetDuration, 1);
+        const remaining = 1 - easeOutCubic2(progress);
+        setOffset(from.x * remaining, from.y * remaining);
+        resetFrame = progress < 1 ? requestAnimationFrame(step) : 0;
+      };
+      resetFrame = requestAnimationFrame(step);
+    };
+    const handlePointerMove = (event) => {
+      pointer = { x: event.clientX, y: event.clientY };
+      if (moveFrame) return;
+      moveFrame = requestAnimationFrame(() => {
+        moveFrame = 0;
+        if (!pointer) return;
+        const rect = element.getBoundingClientRect();
+        const dx = pointer.x - (rect.left + rect.width / 2);
+        const dy = pointer.y - (rect.top + rect.height / 2);
+        const inside = Math.abs(dx) <= rect.width / 2 + range && Math.abs(dy) <= rect.height / 2 + range;
+        if (inside) {
+          cancelAnimationFrame(resetFrame);
+          resetFrame = 0;
+          const overflowX = Math.max(0, Math.abs(dx) - rect.width / 2);
+          const overflowY = Math.max(0, Math.abs(dy) - rect.height / 2);
+          const proximity = 1 - Math.min(Math.max(overflowX, overflowY) / range, 1);
+          setOffset(dx * strength * proximity, dy * strength * proximity);
+          return;
+        }
+        startReset();
+      });
+    };
+    window.addEventListener("pointermove", handlePointerMove, { passive: true });
+    document.documentElement.addEventListener("pointerleave", startReset);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      document.documentElement.removeEventListener("pointerleave", startReset);
+      cancelAnimationFrame(moveFrame);
+      cancelAnimationFrame(resetFrame);
+    };
+  }, [prefersReducedMotion, range, strength, resetDuration]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: elementRef, className: cn("elyri-magnetic", className), children });
+}
+function ScaleIn({ children, className, from = 0.9, delay = 0, duration = 600, once = true }) {
+  const elementRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isIntersecting, setIsIntersecting] = react.useState(false);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsIntersecting(true);
+          if (once) observer.disconnect();
+          return;
+        }
+        if (!once) setIsIntersecting(false);
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [once, prefersReducedMotion]);
+  const style = {
+    "--elyri-scale-in-from": from,
+    "--elyri-scale-in-delay": `${delay}ms`,
+    "--elyri-scale-in-duration": `${duration}ms`
+  };
+  const isVisible = prefersReducedMotion || isIntersecting;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: elementRef,
+      className: cn("elyri-scale-in", isVisible && "elyri-scale-in--visible", className),
+      style,
+      children
+    }
+  );
+}
+function Spotlight({
+  children,
+  className,
+  color = "#7c8cff",
+  size = 240,
+  glow = true,
+  borderGlow = true,
+  radius = 16
+}) {
+  const elementRef = react.useRef(null);
+  const frameRef = react.useRef(0);
+  const pointerRef = react.useRef(null);
+  const itemsRef = react.useRef([]);
+  react.useEffect(
+    () => () => {
+      cancelAnimationFrame(frameRef.current);
+    },
+    []
+  );
+  const handlePointerMove = (event) => {
+    pointerRef.current = { x: event.clientX, y: event.clientY };
+    if (frameRef.current) return;
+    frameRef.current = requestAnimationFrame(() => {
+      frameRef.current = 0;
+      const element = elementRef.current;
+      const pointer = pointerRef.current;
+      if (!element || !pointer) return;
+      const rect = element.getBoundingClientRect();
+      element.style.setProperty("--elyri-spotlight-x", `${pointer.x - rect.left}px`);
+      element.style.setProperty("--elyri-spotlight-y", `${pointer.y - rect.top}px`);
+      for (const item of itemsRef.current) {
+        const itemRect = item.getBoundingClientRect();
+        item.style.setProperty("--elyri-spotlight-x", `${pointer.x - itemRect.left}px`);
+        item.style.setProperty("--elyri-spotlight-y", `${pointer.y - itemRect.top}px`);
+      }
+    });
+  };
+  const handlePointerEnter = (event) => {
+    itemsRef.current = Array.from(
+      event.currentTarget.querySelectorAll(".elyri-spotlight__item")
+    );
+    handlePointerMove(event);
+  };
+  const style = {
+    "--elyri-spotlight-color": color,
+    "--elyri-spotlight-size": `${size}px`,
+    "--elyri-spotlight-radius": `${radius}px`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: elementRef,
+      className: cn(
+        "elyri-spotlight",
+        glow && "elyri-spotlight--glow",
+        borderGlow && "elyri-spotlight--border",
+        className
+      ),
+      style,
+      onPointerEnter: handlePointerEnter,
+      onPointerMove: handlePointerMove,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-spotlight__content", children })
+    }
+  );
+}
+var RESET_DURATION = 400;
+var easeOutCubic3 = (progress) => 1 - (1 - progress) ** 3;
+function Tilt({ children, className, max = 10, perspective = 800, glare = true }) {
+  const elementRef = react.useRef(null);
+  const moveFrameRef = react.useRef(0);
+  const resetFrameRef = react.useRef(0);
+  const rotationRef = react.useRef({ x: 0, y: 0 });
+  const pointerRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isActive, setIsActive] = react.useState(false);
+  react.useEffect(
+    () => () => {
+      cancelAnimationFrame(moveFrameRef.current);
+      cancelAnimationFrame(resetFrameRef.current);
+    },
+    []
+  );
+  const setRotation = (x, y) => {
+    rotationRef.current = { x, y };
+    const element = elementRef.current;
+    if (!element) return;
+    element.style.setProperty("--elyri-tilt-rotate-x", `${x}deg`);
+    element.style.setProperty("--elyri-tilt-rotate-y", `${y}deg`);
+  };
+  const handlePointerMove = (event) => {
+    if (prefersReducedMotion) return;
+    cancelAnimationFrame(resetFrameRef.current);
+    resetFrameRef.current = 0;
+    pointerRef.current = { x: event.clientX, y: event.clientY };
+    setIsActive(true);
+    if (moveFrameRef.current) return;
+    moveFrameRef.current = requestAnimationFrame(() => {
+      moveFrameRef.current = 0;
+      const element = elementRef.current;
+      const pointer = pointerRef.current;
+      if (!element || !pointer) return;
+      const rect = element.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      const ratioX = (pointer.x - rect.left) / rect.width;
+      const ratioY = (pointer.y - rect.top) / rect.height;
+      setRotation((0.5 - ratioY) * 2 * max, (ratioX - 0.5) * 2 * max);
+      element.style.setProperty("--elyri-tilt-glare-x", `${ratioX * 100}%`);
+      element.style.setProperty("--elyri-tilt-glare-y", `${ratioY * 100}%`);
+    });
+  };
+  const handlePointerEnd = () => {
+    cancelAnimationFrame(moveFrameRef.current);
+    moveFrameRef.current = 0;
+    cancelAnimationFrame(resetFrameRef.current);
+    resetFrameRef.current = 0;
+    pointerRef.current = null;
+    setIsActive(false);
+    const from = { ...rotationRef.current };
+    if (prefersReducedMotion || !from.x && !from.y) return;
+    const startedAt = performance.now();
+    const step = (now) => {
+      const progress = Math.min((now - startedAt) / RESET_DURATION, 1);
+      const remaining = 1 - easeOutCubic3(progress);
+      setRotation(from.x * remaining, from.y * remaining);
+      if (progress < 1) resetFrameRef.current = requestAnimationFrame(step);
+    };
+    resetFrameRef.current = requestAnimationFrame(step);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: elementRef,
+      className: cn("elyri-tilt", isActive && "elyri-tilt--active", className),
+      style: { "--elyri-tilt-perspective": `${perspective}px` },
+      onPointerMove: handlePointerMove,
+      onPointerLeave: handlePointerEnd,
+      onPointerCancel: handlePointerEnd,
+      children: [
+        children,
+        glare && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-tilt__glare", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+var DEFAULT_COLORS = ["#3cffb0", "#2a8cff", "#c04dff"];
+var FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform float uIntensity;
+uniform float uStars;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  for (int i = 0; i < 4; i++) {
+    v += a * noise(p);
+    p = p * 2.03 + vec2(17.1, 9.2);
+    a *= 0.5;
+  }
+  return v;
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution.y;
+  vec2 pointer = vec2(uPointer.x, uResolution.y - uPointer.y) / uResolution.y;
+  float t = uTime;
+
+  // \u591C\u7A7A\u5E95\u8272\uFF1A\u5730\u5E73\u7EBF\u9644\u8FD1\u7565\u5E26\u5E18\u5E95\u8272\u7684\u5FAE\u5149
+  vec3 color = mix(vec3(0.002, 0.004, 0.012), vec3(0.006, 0.01, 0.03), uv.y);
+  color += uColor1 * 0.025 * exp(-uv.y * 5.0);
+
+  // \u661F\u7A7A
+  vec2 grid = uv * 55.0;
+  vec2 cell = floor(grid);
+  float rnd = hash(cell);
+  vec2 offset = vec2(hash(cell + 3.1), hash(cell + 7.7)) - 0.5;
+  float starDist = length(fract(grid) - 0.5 - offset * 0.7);
+  float twinkle = 0.6 + 0.4 * sin(t * (1.5 + rnd * 3.0) + rnd * 40.0);
+  float star = step(0.93, rnd) * exp(-starDist * starDist * 180.0) * twinkle * smoothstep(0.1, 0.6, uv.y);
+  color += vec3(0.8, 0.85, 1.0) * star * uStars;
+
+  vec3 aurora = vec3(0.0);
+  for (int i = 0; i < 4; i++) {
+    float fi = float(i);
+    float x = uv.x * (0.6 + fi * 0.15) + fi * 3.7;
+    float curve = 0.42 + fi * 0.09 + (fbm(vec2(x * 1.2 - t * 0.05 * (1.0 + fi * 0.3), fi * 5.3 + t * 0.03)) - 0.5) * 0.45;
+    float d = uv.y - curve;
+    float body = d > 0.0 ? exp(-d * (3.5 + fi)) : exp(d * 40.0);
+    float rays = fbm(vec2(x * 28.0 + curve * 6.0, t * 0.35 + fi));
+    rays = 0.25 + 1.5 * rays * rays;
+    float flow = 0.6 + 0.4 * sin(x * 3.0 - t * 0.4 + fi * 1.7);
+    vec3 c = mix(uColor1, uColor2, smoothstep(0.0, 0.3, d));
+    c = mix(c, uColor3, smoothstep(0.12, 0.55, d) * (0.55 + 0.45 * sin(fi * 2.1 + x * 0.8 + t * 0.1)));
+    aurora += c * body * rays * flow * (0.5 - fi * 0.08);
+  }
+
+  vec2 dp = uv - pointer;
+  aurora *= 1.0 + 0.7 * exp(-dot(dp, dp) * 6.0);
+  color += aurora * uIntensity;
+
+  vec2 vc = gl_FragCoord.xy / uResolution - 0.5;
+  color *= 1.0 - dot(vc, vc) * 0.9;
+  color = pow(aces(color * 1.2), vec3(1.0 / 2.2));
+  color += (hash(gl_FragCoord.xy + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function Aurora({
+  children,
+  className,
+  colors = DEFAULT_COLORS,
+  speed = 1,
+  intensity = 1,
+  stars = true,
+  interactive = true
+}) {
+  const [bottom = DEFAULT_COLORS[0], middle = DEFAULT_COLORS[1], top = DEFAULT_COLORS[2]] = colors;
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform("uColor1"), hexToLinearRgb(bottom));
+      gl.uniform3fv(uniform("uColor2"), hexToLinearRgb(middle));
+      gl.uniform3fv(uniform("uColor3"), hexToLinearRgb(top));
+      gl.uniform1f(uniform("uIntensity"), Math.max(0, intensity));
+      gl.uniform1f(uniform("uStars"), stars ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("elyri-aurora", className), style: { "--elyri-aurora-color": bottom }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-aurora__canvas", "aria-hidden": "true" }),
+    children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-aurora__content", children })
+  ] });
+}
+var FRAGMENT_SHADER2 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uBase;
+uniform vec3 uHighlight;
+uniform float uDensity;
+uniform float uRipple;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+vec2 hash2(vec2 p) {
+  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
+  return fract(sin(p) * 43758.5453);
+}
+
+float cellEdge(vec2 p, float t) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float f1 = 8.0;
+  float f2 = 8.0;
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 g = vec2(float(x), float(y));
+      vec2 o = 0.5 + 0.4 * sin(t * 0.8 + 6.2831 * hash2(i + g));
+      float d = length(g + o - f);
+      if (d < f1) {
+        f2 = f1;
+        f1 = d;
+      } else if (d < f2) {
+        f2 = d;
+      }
+    }
+  }
+  return f2 - f1;
+}
+
+float caustic(vec2 p, float t) {
+  p += 0.25 * vec2(sin(p.y * 1.3 + t * 0.7), cos(p.x * 1.1 - t * 0.6));
+  float a = exp(-cellEdge(p, t) * 9.0);
+  float b = exp(-cellEdge(p * 1.7 + vec2(3.1, 7.4), t * 1.3) * 9.0);
+  return a * 0.7 + b * 0.45 + a * b * 1.5;
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  float t = uTime;
+  vec2 p = frag / minRes * 4.0 * uDensity;
+
+  // \u6307\u9488\u5904\u8361\u5F00\u7684\u6C34\u6CE2
+  vec2 dp = (frag - uPointer) / minRes;
+  float r = length(dp);
+  p += dp / (r + 1e-4) * sin(r * 38.0 - t * 4.0) * 0.06 * exp(-r * 5.0) * uRipple;
+
+  vec3 caus = vec3(
+    caustic(p + vec2(0.014, 0.0), t),
+    caustic(p, t),
+    caustic(p - vec2(0.014, 0.0), t)
+  );
+
+  float depth = frag.y / uResolution.y;
+  vec3 color = mix(uBase * 0.35, uBase * 0.025, depth);
+
+  // \u659C\u5C04\u5149\u675F
+  float x = frag.x / minRes + depth * 0.35;
+  float rays = (0.5 + 0.5 * sin(x * 9.0 + sin(x * 3.1 + t * 0.3) * 2.0 + t * 0.2)) * (0.5 + 0.5 * sin(x * 17.0 - t * 0.35));
+  color += uHighlight * 0.12 * rays * rays * (1.0 - depth) * (1.0 - depth);
+
+  float focus = 0.6 + 0.8 * exp(-dot(dp, dp) * 3.0) * uRipple;
+  color += uHighlight * caus * 0.5 * mix(1.0, 0.3, depth) * focus;
+
+  vec2 vc = frag / uResolution - 0.5;
+  color *= 1.0 - dot(vc, vc) * 1.1;
+  color = pow(aces(color * 1.2), vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function Caustics({
+  children,
+  className,
+  color = "#0a6fa8",
+  highlightColor = "#c8fbff",
+  density = 1,
+  speed = 1,
+  interactive = true
+}) {
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER2,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform("uBase"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform("uDensity"), Math.max(0.2, density));
+      gl.uniform1f(uniform("uRipple"), interactive ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("elyri-caustics", className), style: { "--elyri-caustics-color": color }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-caustics__canvas", "aria-hidden": "true" }),
+    children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-caustics__content", children })
+  ] });
+}
+var FRAGMENT_SHADER3 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uLine;
+uniform vec3 uHighlight;
+uniform vec3 uBg;
+uniform float uLevels;
+uniform float uDpr;
+
+const float SCALE = 2.4;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + 1.0), u.x), u.y);
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  mat2 rot = mat2(0.8, -0.6, 0.6, 0.8);
+  for (int i = 0; i < 3; i++) {
+    v += a * noise(p);
+    p = rot * p * 2.03 + 17.1;
+    a *= 0.5;
+  }
+  return v;
+}
+
+float terrain(vec2 p, vec2 hill, float t) {
+  vec2 warp = vec2(noise(p * 0.55 + vec2(t * 0.08, 3.1)), noise(p * 0.55 + vec2(7.7, -t * 0.07)));
+  float h = fbm(p + warp * 1.3 + vec2(t * 0.035, -t * 0.025));
+  vec2 d = p - hill;
+  return h + 0.2 * exp(-dot(d, d) * 1.6);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  float px = SCALE / minRes;
+  vec2 p = frag * px;
+  vec2 hill = uPointer * px;
+  float t = uTime;
+
+  float h = terrain(p, hill, t);
+  float hx = terrain(p + vec2(px, 0.0), hill, t);
+  float hy = terrain(p + vec2(0.0, px), hill, t);
+
+  float f = h * uLevels;
+  float slope = max(length(vec2(hx - h, hy - h)) * uLevels, 1e-5);
+  float fr = fract(f);
+  float dist = min(fr, 1.0 - fr) / slope;
+
+  float index = floor(f + 0.5);
+  float major = 1.0 - step(0.5, abs(mod(index, 5.0)));
+  float halfWidth = mix(0.5, 0.95, major) * uDpr;
+  float line = 1.0 - smoothstep(halfWidth - 0.6, halfWidth + 0.6, dist);
+
+  // \u7EBF\u95F4\u8DDD\u5C0F\u4E8E\u6570\u50CF\u7D20\u65F6\u6DE1\u51FA\uFF0C\u907F\u514D\u9661\u5761\u5904\u7CCA\u6210\u4E00\u7247
+  line *= smoothstep(2.5 * uDpr, 6.0 * uDpr, 1.0 / slope);
+
+  float radius = 240.0 * uDpr;
+  vec2 dp = frag - uPointer;
+  float near = exp(-dot(dp, dp) / (radius * radius));
+
+  vec2 q = (frag - 0.5 * uResolution) / (0.5 * uResolution);
+  float mask = mix(0.4, 1.0, 1.0 - smoothstep(0.45, 1.4, length(q)));
+
+  float alpha = line * mix(0.32, 0.7, major) * (1.0 + 0.9 * near) * mask;
+  vec3 lineColor = mix(uLine, uHighlight, clamp(near * 1.2, 0.0, 1.0));
+  vec3 color = mix(uBg, lineColor, clamp(alpha, 0.0, 1.0));
+
+  color = pow(color, vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function Contours({
+  children,
+  className,
+  color = "#8a90a6",
+  highlightColor = "#f08a4b",
+  density = 1,
+  speed = 1,
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER3,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform("uLine"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform3fv(uniform("uBg"), hexToLinearRgb(scheme === "light" ? "#f9f9f7" : "#0a0b0f"));
+      gl.uniform1f(uniform("uLevels"), 18 * Math.max(0.2, density));
+      gl.uniform1f(uniform("uDpr"), dpr);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-contours", className),
+      "data-scheme": scheme,
+      style: { "--elyri-contours-color": color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-contours__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-contours__content", children })
+      ]
+    }
+  );
+}
+var FRAGMENT_SHADER4 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uDot;
+uniform vec3 uHighlight;
+uniform vec3 uBg;
+uniform float uGap;
+uniform float uDpr;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + 1.0), u.x), u.y);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float gap = uGap * uDpr;
+  float radius = 170.0 * uDpr;
+  float t = uTime;
+  vec2 cell = floor(frag / gap);
+
+  float best = 0.0;
+  float bestTint = 0.0;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 id = cell + vec2(float(i), float(j));
+      vec2 center = (id + 0.5) * gap;
+
+      vec2 away = center - uPointer;
+      float d = length(away);
+      float lens = exp(-d * d / (radius * radius));
+      center += away / max(d, 1.0) * lens * gap * 0.32;
+
+      // \u4E24\u5C42\u566A\u58F0\uFF1A\u5927\u5C3A\u5EA6\u7684\u300C\u98CE\u300D+ \u5C0F\u5C3A\u5EA6\u7684\u7EC6\u788E\u8D77\u4F0F
+      float wave = noise(id * 0.075 + vec2(t * 0.11, -t * 0.07)) * 0.65
+        + noise(id * 0.21 - vec2(t * 0.05, t * 0.09)) * 0.35;
+      wave = smoothstep(0.3, 0.85, wave);
+
+      float r = max(gap * (0.055 + 0.075 * wave + 0.1 * lens), 0.7 * uDpr);
+      float cover = 1.0 - smoothstep(r - 0.8, r + 0.8, length(frag - center));
+      float alpha = cover * clamp(0.22 + 0.5 * wave + 0.55 * lens, 0.0, 1.0);
+      if (alpha > best) {
+        best = alpha;
+        bestTint = clamp(wave * wave * 0.55 + lens * 0.95, 0.0, 1.0);
+      }
+    }
+  }
+
+  // \u56DB\u5468\u6E10\u9690\uFF0C\u89C6\u7EBF\u805A\u7126\u5728\u4E2D\u592E
+  vec2 q = (frag - 0.5 * uResolution) / (0.5 * uResolution);
+  float mask = mix(0.18, 1.0, 1.0 - smoothstep(0.3, 1.3, length(q)));
+
+  vec3 dotColor = mix(uDot, uHighlight, bestTint);
+  vec3 color = mix(uBg, dotColor, best * mask);
+
+  // \u6307\u9488\u4E0B\u65B9\u6781\u6DE1\u7684\u5149\u6655
+  float glow = exp(-dot(frag - uPointer, frag - uPointer) / (radius * radius * 2.5));
+  color += uHighlight * glow * 0.035;
+
+  color = pow(color, vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function DotField({
+  children,
+  className,
+  color = "#8a90a6",
+  highlightColor = "#7c6cff",
+  gap = 22,
+  speed = 1,
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER4,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform("uDot"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform3fv(uniform("uBg"), hexToLinearRgb(scheme === "light" ? "#fafafb" : "#0a0a0e"));
+      gl.uniform1f(uniform("uGap"), Math.max(8, gap));
+      gl.uniform1f(uniform("uDpr"), dpr);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-dot-field", className),
+      "data-scheme": scheme,
+      style: { "--elyri-dot-field-color": color, "--elyri-dot-field-gap": `${Math.max(8, gap)}px` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-dot-field__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-dot-field__content", children })
+      ]
+    }
+  );
+}
+var FRAGMENT_SHADER5 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform float uScale;
+uniform vec3 uBase;
+uniform vec3 uHighlight;
+uniform float uFlare;
+uniform float uScheme;
+
+const float R = 0.92;
+const float D = 0.30;
+const float B = 0.8697;
+const float ROW = 0.5;
+const float BEVEL = 0.075;
+const float TAU = 6.28318;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float sdScale(vec2 p) {
+  p = abs(p);
+  return ((p.y - B) * D > p.x * B) ? length(p - vec2(0.0, B)) : length(p - vec2(-D, 0.0)) - R;
+}
+
+float scaleHeight(vec2 q) {
+  float inner = clamp(-sdScale(q) / BEVEL, 0.0, 1.0);
+  float bevel = sqrt(1.0 - (1.0 - inner) * (1.0 - inner));
+  vec2 d = vec2(q.x / 0.62, (q.y - 0.35) / 0.75);
+  float dome = 0.14 * (1.0 - dot(d, d));
+  float keel = 0.035 * exp(-q.x * q.x / 0.03) * smoothstep(-0.1, B, q.y);
+  return bevel * (0.07 + dome + keel);
+}
+
+// \u5F00\u5408\uFF1A\u4E00\u9053\u6CE2\u6CBF\u8EAB\u4F53\u65B9\u5411\u63A8\u8FDB\uFF0C\u7ECF\u8FC7\u7684\u9CDE\u7247\u4F9D\u6B21\u5F20\u5F00\u518D\u5408\u62E2
+float openAmount(vec2 c) {
+  return uFlare * smoothstep(0.15, 1.0, sin(c.y * 0.45 - uTime * 1.3 + c.x * 0.3));
+}
+
+// \u5F20\u5F00\u65F6\u9CDE\u7247\u7ED5\u6839\u90E8\u7FD8\u8D77\uFF0C\u900F\u89C6\u4E0A\u8868\u73B0\u4E3A\u9CDE\u5C16\u4F38\u957F\u3001\u7565\u5FAE\u53D8\u5BBD
+vec2 warp(vec2 q, float o) {
+  return vec2(q.x / (1.0 + 0.05 * o), (q.y + 0.2) / (1.0 + 0.2 * o) - 0.2);
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  // \u5F62\u72B6\u7A7A\u95F4\u7684 y\uFF08\u9CDE\u5C16\u65B9\u5411\uFF09\u5BF9\u5E94\u5C4F\u5E55 x\uFF0C\u5B9E\u73B0\u4FA7\u5411\u6392\u5217
+  vec2 p = frag.yx / uScale;
+  float px = 1.0 / uScale;
+  float t = uTime;
+
+  // \u4ECE\u5DE6\u5230\u53F3\u67E5\u627E\u7B2C\u4E00\u7247\u8986\u76D6\u5F53\u524D\u50CF\u7D20\u7684\u9CDE\uFF0C\u5E76\u8BB0\u5F55\u5230\u538B\u5728\u4E0A\u9762\u7684\u9CDE\u7247\u8FB9\u7F18\u7684\u8DDD\u79BB\u3002
+  // \u9634\u5F71\u4E0E\u7F1D\u9699\u6563\u5149\u6309\u6BCF\u7247\u4E0A\u65B9\u9CDE\u5206\u522B\u8BA1\u7B97\u540E\u53D6\u6700\u5927\u503C\uFF0C\u907F\u514D\u5728\u4E24\u7247\u5F20\u5F00\u7A0B\u5EA6\u4E0D\u540C\u7684\u9CDE\u4E4B\u95F4\u51FA\u73B0\u63A5\u7F1D
+  float j0 = floor(p.y / ROW);
+  vec2 center = vec2(0.0);
+  vec2 cell = vec2(0.0);
+  float sd = -1.0;
+  float cover = 1.0;
+  float shade = 0.0;
+  float gap = 0.0;
+  float open = 0.0;
+  float above = 1.0;
+  float aboveShade = 0.0;
+  float aboveGap = 0.0;
+  float found = 0.0;
+  for (int dj = -2; dj <= 2; dj++) {
+    float j = j0 + float(dj);
+    float offset = mod(j, 2.0) * 0.5;
+    float i0 = floor(p.x - offset + 0.5);
+    float rowMin = 1.0;
+    float rowShade = 0.0;
+    float rowGap = 0.0;
+    for (int di = -1; di <= 1; di++) {
+      vec2 id = vec2(i0 + float(di), j);
+      vec2 c = vec2(id.x + offset, j * ROW);
+      float o = openAmount(c);
+      float d = sdScale(warp(p - c, o));
+      if (found < 0.5 && d < 0.0) {
+        found = 1.0;
+        center = c;
+        cell = id;
+        sd = d;
+        open = o;
+        cover = above;
+        shade = aboveShade;
+        gap = aboveGap;
+      }
+      rowMin = min(rowMin, d);
+      // \u4E0A\u65B9\u9CDE\u7247\u5F20\u5F00\u65F6\u6295\u4E0B\u66F4\u5BBD\u7684\u9634\u5F71\uFF0C\u4E0B\u65B9\u900F\u51FA\u6563\u5C04\u5149
+      rowShade = max(rowShade, 1.0 - smoothstep(0.0, 0.16 + 0.3 * o, d));
+      rowGap = max(rowGap, (1.0 - smoothstep(0.0, 0.1 + 0.25 * o, d)) * o);
+    }
+    if (found < 0.5) {
+      above = min(above, rowMin);
+      aboveShade = max(aboveShade, rowShade);
+      aboveGap = max(aboveGap, rowGap);
+    }
+  }
+
+  vec2 q = warp(p - center, open);
+  float seed = hash(cell);
+  float seed2 = hash(cell + 17.31);
+
+  float e = 0.006;
+  vec2 grad = vec2(
+    scaleHeight(q + vec2(e, 0.0)) - scaleHeight(q - vec2(e, 0.0)),
+    scaleHeight(q + vec2(0.0, e)) - scaleHeight(q - vec2(0.0, e))
+  ) / (2.0 * e);
+  vec3 ns = normalize(vec3(-grad, 1.0));
+
+  // \u6BCF\u7247\u9CDE\u5404\u81EA\u7565\u5FAE\u503E\u659C\uFF0C\u518D\u53E0\u4E00\u9053\u6CBF\u8EAB\u4F53\u65B9\u5411\u6EDA\u52A8\u7684\u8D77\u4F0F\uFF0C\u8BA9\u53CD\u5149\u6761\u5728\u9CDE\u95F4\u6D41\u52A8
+  float wave = sin(center.y * 0.35 - t * 0.9 + sin(center.x * 0.2 + t * 0.25) * 1.2);
+  ns = normalize(ns + vec3((seed - 0.5) * 0.22, (seed2 - 0.5) * 0.22 + wave * 0.1 - open * 0.45, 0.0));
+  vec3 n = vec3(ns.y, ns.x, ns.z);
+
+  float minRes = min(uResolution.x, uResolution.y);
+  vec3 V = vec3(0.0, 0.0, 1.0);
+  vec3 toLight = vec3(uPointer - frag, minRes * 0.6);
+  float dist = length(toLight);
+  vec3 L = toLight / dist;
+  float atten = 1.0 / (1.0 + 1.5 * pow(dist / minRes, 2.0));
+  float NdotH = max(dot(n, normalize(L + V)), 0.0);
+  float NdotV = max(n.z, 0.0);
+  float soft = pow(NdotH, 24.0) * atten;
+  float ao = mix(0.04, 1.0, 1.0 - shade);
+  float fres = 0.35 + 0.65 * pow(1.0 - NdotV, 2.0);
+
+  // \u7EBF\u5F62\u706F\u5E26\uFF1A\u4E3B\u706F\u5E26\u7A7F\u8FC7\u5149\u6E90\u4F4D\u7F6E\u5E76\u7F13\u6162\u8F6C\u52A8\uFF0C\u526F\u706F\u5E26\u53EA\u843D\u5728\u671D\u5411\u4E00\u4FA7\u7684\u5012\u89D2\u4E0A
+  vec3 Rf = reflect(-V, n);
+  vec2 toL = (uPointer - frag) / minRes;
+  float a = 0.7 + 0.45 * sin(t * 0.17);
+  vec2 dir = vec2(cos(a), sin(a));
+  float s1 = dot(Rf.xy, dir) - dot(toL, dir) * 1.3 + 0.12 * sin(t * 0.5 + seed * TAU);
+  float line1 = exp(-s1 * s1 / 0.0022);
+  float band1 = exp(-s1 * s1 / 0.09);
+  float s2 = dot(Rf.xy, vec2(-dir.y, dir.x)) - 0.85 - 0.15 * sin(t * 0.33);
+  float line2 = exp(-s2 * s2 / 0.01);
+
+  // \u672C\u4F53\u8FD1\u9ED1\uFF0C\u53EA\u5728\u671D\u5411\u5149\u6E90\u7684\u533A\u57DF\u6CDB\u51FA\u4E00\u5C42\u67D4\u548C\u7684\u5E95\u8272\uFF0C\u4EAE\u5EA6\u4E3B\u8981\u6765\u81EA\u53CD\u5149\u6761
+  vec3 bloom = mix(uBase, uHighlight, 0.35);
+  vec3 color = uBase * (0.006 + 0.5 * soft * mix(0.6, 1.1, seed)) * ao;
+  color += bloom * band1 * 0.3 * atten * ao;
+  color += uHighlight * line1 * 1.4 * fres * (0.3 + atten) * ao;
+  color += uHighlight * line2 * 0.18 * fres * ao;
+
+  // \u53CC\u7EBF\u9CDE\u7F18\uFF1A\u4E0A\u5C42\u9CDE\u7684\u8FB9\u4E0E\u88AB\u538B\u4F4F\u7684\u4E0B\u5C42\u9CDE\u7684\u8FB9\u5404\u4E00\u9053\u7EC6\u4EAE\u7EBF\uFF0C\u4E2D\u95F4\u7559\u4E00\u6761\u6697\u7F1D
+  float rimLight = (0.07 + 0.6 * soft + band1 * 0.9) * (1.0 + 1.2 * open);
+  float r1 = (sd + 1.6 * px) / (1.4 * px);
+  float r2 = (cover - 1.8 * px) / (1.4 * px);
+  color += uHighlight * exp(-r1 * r1) * rimLight * 0.9;
+  color += uHighlight * exp(-r2 * r2) * rimLight * 0.35;
+
+  color += mix(uBase, uHighlight, 0.2) * gap * 0.35 * (0.3 + atten + band1);
+
+  color += uHighlight * 0.03 * exp(-pow(length(frag - uPointer) / (minRes * 0.4), 2.0));
+
+  vec2 vc = frag / uResolution - 0.5;
+  float vig = dot(vc, vc);
+
+  if (uScheme > 0.5) {
+    // \u6D45\u8272\uFF1A\u5148\u8272\u8C03\u6620\u5C04\uFF0C\u518D\u505A\u4EAE\u6697\u955C\u50CF\uFF0C\u4FDD\u7559\u8272\u76F8 \u2014\u2014 \u9ED1\u66DC\u77F3\u9CDE\u9762\u7FFB\u8F6C\u6210\u6D45\u8272\u9CDE\u9762\uFF0C\u53CD\u5149\u6761\u8F6C\u4E3A\u6DF1\u8272\u9CDE\u7F18
+    vec3 c = pow(aces(color * 1.3), vec3(1.0 / 2.2));
+    float lum = dot(c, vec3(0.2126, 0.7152, 0.0722));
+    color = clamp(c + (1.0 - 2.0 * lum), 0.0, 1.0) * (1.0 - vig * 0.35);
+  } else {
+    color *= 1.0 - vig * 1.5;
+    color = pow(aces(color * 1.3), vec3(1.0 / 2.2));
+  }
+
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function DragonScales({
+  children,
+  className,
+  color = "#7b3fe4",
+  highlightColor = "#e7a6ff",
+  scaleSize = 110,
+  speed = 1,
+  flare = 0,
+  interactive = true,
+  scheme: forcedScheme
+}) {
+  const detectedScheme = useColorScheme();
+  const scheme = forcedScheme ?? detectedScheme;
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER5,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform1f(uniform("uScale"), Math.max(8, scaleSize) * dpr);
+      gl.uniform3fv(uniform("uBase"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform("uFlare"), Math.min(Math.max(flare, 0), 1));
+      gl.uniform1f(uniform("uScheme"), scheme === "light" ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-dragon-scales", className),
+      "data-scheme": scheme,
+      style: { "--elyri-dragon-scales-color": color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-dragon-scales__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-dragon-scales__content", children })
+      ]
+    }
+  );
+}
+var FRAGMENT_SHADER6 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor;
+uniform vec3 uHighlight;
+uniform vec3 uBg;
+uniform float uAmplitude;
+uniform float uDpr;
+uniform float uScheme;
+
+const int COUNT = 7;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+vec3 shade(vec3 bg, vec3 light) {
+  if (uScheme > 0.5) {
+    float amount = max(max(light.r, light.g), light.b);
+    vec3 tint = light / max(amount, 1e-4);
+    return bg * exp(-amount * 1.4 * (1.0 - tint * 0.82));
+  }
+  return bg + 1.0 - exp(-light);
+}
+
+float glow(float d, float w) {
+  return exp(-d * d / (w * w)) + 0.22 * exp(-abs(d) / (w * 5.0)) + 0.035 * exp(-abs(d) / 0.05);
+}
+
+float threadY(float x, float fi, float t, vec2 m) {
+  float ph = fi * 1.7;
+  float env = exp(-x * x * 1.1);
+  float pluck = exp(-pow((x - m.x) / 0.35, 2.0));
+  float amp = (0.05 + 0.09 * pow(sin(fi * 1.3 + 0.5), 2.0)) * uAmplitude + pluck * 0.05;
+  return env * (amp * sin(x * (2.1 + fi * 0.09) + t * (1.0 + 0.12 * fi) + ph) + 0.028 * uAmplitude * sin(x * 4.3 - t * 0.7 + ph * 2.0))
+    + m.y * 0.22 * pluck;
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  vec2 uv = (frag - 0.5 * uResolution) / minRes;
+  vec2 m = (uPointer - 0.5 * uResolution) / minRes;
+  float t = uTime * 0.35;
+  float hx = 0.5 * uResolution.x / minRes;
+
+  float w = 0.9 * uDpr / minRes;
+  float shift = 1.6 * uDpr / minRes;
+  float e = 0.002;
+  float fade = smoothstep(hx * 1.02, hx * 0.3, abs(uv.x));
+
+  vec3 light = vec3(0.0);
+  for (int i = 0; i < COUNT; i++) {
+    float fi = float(i);
+    float y = threadY(uv.x, fi, t, m);
+    float dy = (threadY(uv.x + e, fi, t, m) - y) / e;
+    float s = (uv.y - y) / sqrt(1.0 + dy * dy);
+
+    float ph = fi * 1.7;
+    float pulse = pow(0.5 + 0.5 * sin(uv.x * 1.6 - t * 1.4 + ph * 2.3), 6.0);
+    float energy = (0.22 + 1.1 * pulse) * fade * (0.6 + 0.4 * sin(fi * 2.1 + 1.0) * sin(fi * 2.1 + 1.0));
+    vec3 tint = mix(uColor, uHighlight, 0.5 + 0.5 * sin(uv.x * 1.2 + ph + t * 0.3));
+
+    vec3 g = vec3(glow(s - shift, w), glow(s, w), glow(s + shift, w));
+    light += tint * g * energy;
+  }
+
+  vec3 color = pow(clamp(shade(uBg, light), 0.0, 1.0), vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function Filaments({
+  children,
+  className,
+  color = "#5b8cff",
+  highlightColor = "#d46bff",
+  amplitude = 1,
+  speed = 1,
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER6,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform("uColor"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform3fv(uniform("uBg"), hexToLinearRgb(scheme === "light" ? "#f7f7fa" : "#06060a"));
+      gl.uniform1f(uniform("uAmplitude"), Math.max(0, amplitude));
+      gl.uniform1f(uniform("uDpr"), dpr);
+      gl.uniform1f(uniform("uScheme"), scheme === "light" ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-filaments", className),
+      "data-scheme": scheme,
+      style: { "--elyri-filaments-color": color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-filaments__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-filaments__content", children })
+      ]
+    }
+  );
+}
+var PATTERNS = ["wave", "ripple", "drift"];
+var FRAGMENT_SHADER7 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform float uScale;
+uniform vec3 uColor;
+uniform vec3 uHighlight;
+uniform vec3 uFront;
+uniform vec3 uFloor;
+uniform float uPattern;
+uniform float uScheme;
+uniform float uSamples;
+
+const float PI = 3.14159265;
+const float HALF = 0.45;
+const float BEVEL = 0.055;
+const float FLOOR_Z = -0.45;
+const float TILT = 0.42;
+const vec3 KEY = vec3(-0.5, -0.42, 0.757);
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x),
+    f.y
+  );
+}
+
+// \u7ED5\u5355\u4F4D\u8F74 k \u65CB\u8F6C a \u5F27\u5EA6\uFF08Rodrigues\uFF09
+mat3 rotAxis(vec3 k, float a) {
+  float s = sin(a);
+  float c = cos(a);
+  float oc = 1.0 - c;
+  return mat3(
+    oc * k.x * k.x + c, oc * k.x * k.y + k.z * s, oc * k.z * k.x - k.y * s,
+    oc * k.x * k.y - k.z * s, oc * k.y * k.y + c, oc * k.y * k.z + k.x * s,
+    oc * k.z * k.x + k.y * s, oc * k.y * k.z - k.x * s, oc * k.z * k.z + c
+  );
+}
+
+mat3 transposeM(mat3 m) {
+  return mat3(
+    m[0][0], m[1][0], m[2][0],
+    m[0][1], m[1][1], m[2][1],
+    m[0][2], m[1][2], m[2][2]
+  );
+}
+
+// 0\u21921 \u7684\u6B20\u963B\u5C3C\u5F39\u7C27\uFF1A\u8D77\u6B65\u96F6\u901F\u5EA6\uFF0C\u7EA6 7% \u7684\u56DE\u5F39\u540E\u7A33\u5B9A
+float spring(float x) {
+  x = clamp(x, 0.0, 1.0);
+  float k = exp(-6.0 * x) * (cos(7.0 * x) + 6.0 / 7.0 * sin(7.0 * x));
+  return 1.0 - k * (1.0 - smoothstep(0.8, 1.0, x));
+}
+
+// \u5355\u4E2A\u7ACB\u65B9\u4F53\u7684\u59FF\u6001\uFF1A\u6EDA\u52A8\u8F74\u4E0E\u89D2\u5EA6\u3001\u6EDA\u52A8\u65F6\u7684\u6536\u7F29\u4E0E\u8DC3\u8D77\u3001\u6307\u9488\u5904\u7684\u5347\u8D77
+void cubeAt(vec2 c, vec2 pw, out mat3 inv, out vec4 geo, out float open) {
+  float h = hash(c);
+  float h2 = hash(c + 17.31);
+  vec3 axis;
+  float f;
+  if (uPattern < 0.5) {
+    float a = 0.35 + 0.3 * sin(uTime * 0.045);
+    axis = vec3(0.0, 1.0, 0.0);
+    f = uTime * 0.15 - dot(c, vec2(cos(a), sin(a))) * 0.1 + h * 0.035;
+  } else if (uPattern < 1.5) {
+    axis = abs(c.x) >= abs(c.y) ? vec3(0.0, c.x < 0.0 ? -1.0 : 1.0, 0.0) : vec3(c.y < 0.0 ? 1.0 : -1.0, 0.0, 0.0);
+    f = uTime * 0.14 - length(c) * 0.12 + h * 0.03;
+  } else {
+    axis = h2 < 0.5 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);
+    f = uTime * 0.07 + noise(c * 0.16 + vec2(uTime * 0.015, -uTime * 0.01)) * 2.2 + h * 0.05;
+  }
+  // \u6BCF\u4E2A\u5468\u671F\u6EDA\u4E24\u6B21\uFF1A\u5148\u628A\u5F3A\u8C03\u8272\u4FA7\u9762\u7FFB\u4E0A\u6765\uFF0C\u505C\u7559\u7247\u523B\uFF0C\u518D\u6EDA\u56DE\u9ED1\u66DC\u77F3\u9762
+  float fl = floor(f);
+  float fr = f - fl;
+  float roll = spring(fr / 0.2) + spring((fr - 0.26) / 0.2);
+  float ang = PI * 0.5 * (2.0 * mod(fl, 2.0) + roll);
+  open = abs(sin(2.0 * ang));
+
+  // \u8F6C\u5230 45\xB0 \u65F6\u5BF9\u89D2\u7EBF\u6700\u957F\uFF0C\u6309\u6295\u5F71\u5BBD\u5EA6\u6536\u7F29\uFF0C\u4FDD\u8BC1\u4E0E\u90BB\u5C45\u59CB\u7EC8\u4E0D\u76F8\u4EA4
+  float reach = HALF * (abs(cos(ang)) + abs(sin(ang)));
+  float s = min(1.0, 0.49 / reach);
+  vec2 toP = c - pw;
+  float lift = 0.3 * exp(-dot(toP, toP) / 5.0);
+
+  inv = rotAxis(axis, -ang);
+  geo = vec4(c, lift + (1.0 - s) * 0.7, HALF * s);
+}
+
+// \u5C04\u7EBF\u4E0E\u4EE5\u539F\u70B9\u4E3A\u4E2D\u5FC3\u7684\u7ACB\u65B9\u4F53\u6C42\u4EA4\uFF0C\u8FD4\u56DE\u6700\u8FD1\u4EA4\u70B9\u8DDD\u79BB\uFF08\u672A\u547D\u4E2D\u4E3A -1\uFF09\u4E0E\u5C40\u90E8\u6CD5\u7EBF
+float boxHit(vec3 ro, vec3 rd, float rad, out vec3 n) {
+  rd = mix(rd, vec3(1e-6), step(abs(rd), vec3(1e-6)));
+  vec3 m = 1.0 / rd;
+  vec3 k = abs(m) * rad;
+  vec3 t1 = -m * ro - k;
+  vec3 t2 = -m * ro + k;
+  float tN = max(max(t1.x, t1.y), t1.z);
+  float tF = min(min(t2.x, t2.y), t2.z);
+  n = vec3(0.0);
+  if (tN > tF || tF < 0.0) return -1.0;
+  n = -sign(rd) * step(t1.yzx, t1.xyz) * step(t1.zxy, t1.xyz);
+  return tN;
+}
+
+// \u73AF\u5883\u5149\uFF1A\u53EA\u4FDD\u7559\u4E00\u5C42\u6781\u5F31\u7684\u5747\u5300\u8865\u5149\uFF0C\u4E0D\u518D\u6709\u626B\u8FC7\u753B\u9762\u7684\u706F\u5E26\u53CD\u5149
+vec3 envLight(vec3 R) {
+  return vec3(0.008 + 0.02 * smoothstep(-0.1, 0.4, R.z));
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+vec2 sampleOffset(int s) {
+  if (uSamples < 1.5) return vec2(0.0);
+  if (uSamples < 2.5) return s == 0 ? vec2(-0.25) : vec2(0.25);
+  if (s == 0) return vec2(-0.125, -0.375);
+  if (s == 1) return vec2(0.375, -0.125);
+  if (s == 2) return vec2(0.125, 0.375);
+  return vec2(-0.375, 0.125);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  vec2 center = 0.5 * uResolution;
+  float halfW = 0.5 * max(uResolution.x, uResolution.y) / uScale;
+
+  // \u7565\u5E26\u4FEF\u89D2\u7684\u900F\u89C6\u76F8\u673A\uFF1A\u5C4F\u5E55\u5411\u4E0B\u5BF9\u5E94\u4E16\u754C +y\uFF0C\u76F8\u673A\u4ECE +y \u4E00\u4FA7\u659C\u770B\uFF0C\u80FD\u770B\u5230\u7ACB\u65B9\u4F53\u671D\u5411\u89C2\u8005\u7684\u4FA7\u9762
+  float D = halfW * 2.0;
+  vec3 ro = vec3(0.0, D * sin(TILT), D * cos(TILT));
+  vec3 fw = -normalize(ro);
+  vec3 dn = vec3(0.0, cos(TILT), -sin(TILT));
+
+  vec2 puv = (uPointer - center) / uScale;
+  vec3 prd = normalize(fw * D + vec3(puv.x, 0.0, 0.0) + dn * puv.y);
+  vec2 pw = (ro + prd * ((HALF - ro.z) / prd.z)).xy;
+
+  vec2 cuv = (frag - center) / uScale;
+  vec3 crd = normalize(fw * D + vec3(cuv.x, 0.0, 0.0) + dn * cuv.y);
+  vec2 base = floor((ro + crd * (-ro.z / crd.z)).xy + 0.5);
+
+  vec3 L = normalize(KEY);
+  // \u4E3B\u5149\u6E90\u7684\u955C\u9762\u9AD8\u5149\u989C\u8272
+  vec3 specCol = mix(vec3(1.0), uHighlight, 0.35);
+  float amb = mix(0.03, 0.45, uScheme);
+
+  // \u5468\u56F4 3\xD73 \u4E2A\u7ACB\u65B9\u4F53\u7684\u59FF\u6001\u53EA\u7B97\u4E00\u6B21\uFF0C\u4F9B\u6240\u6709\u91C7\u6837\u4E0E\u9634\u5F71\u590D\u7528
+  mat3 invs[9];
+  vec4 geos[9];
+  float opens[9];
+  float seeds[9];
+  vec3 localL[9];
+  for (int k = 0; k < 9; k++) {
+    int row = k / 3;
+    vec2 c = base + vec2(float(k - row * 3) - 1.0, float(row) - 1.0);
+    mat3 inv;
+    vec4 geo;
+    float open;
+    cubeAt(c, pw, inv, geo, open);
+    invs[k] = inv;
+    geos[k] = geo;
+    opens[k] = open;
+    seeds[k] = hash(c + 5.17);
+    // \u5149\u6E90\u65B9\u5411\u662F\u5E38\u91CF\uFF0C\u63D0\u524D\u8F6C\u5230\u5404\u7ACB\u65B9\u4F53\u5C40\u90E8\u7A7A\u95F4\uFF0C\u7701\u53BB\u6BCF\u6B21\u91C7\u6837\u91CD\u590D\u7684\u77E9\u9635\u4E58\u6CD5
+    localL[k] = inv * L;
+  }
+
+  vec3 acc = vec3(0.0);
+  for (int s = 0; s < 4; s++) {
+    if (float(s) >= uSamples) break;
+    vec2 uv = (frag + sampleOffset(s) - center) / uScale;
+    vec3 rd = normalize(fw * D + vec3(uv.x, 0.0, 0.0) + dn * uv.y);
+
+    float tMin = 1e9;
+    int hitK = -1;
+    vec3 hitN = vec3(0.0);
+    vec3 hitP = vec3(0.0);
+    mat3 hitInv = mat3(1.0);
+    float hitSize = HALF;
+    float hitSeed = 0.0;
+    for (int k = 0; k < 9; k++) {
+      vec3 lro = invs[k] * (ro - geos[k].xyz);
+      vec3 lrd = invs[k] * rd;
+      vec3 n;
+      float t = boxHit(lro, lrd, geos[k].w, n);
+      if (t > 0.0 && t < tMin) {
+        tMin = t;
+        hitK = k;
+        hitN = n;
+        hitP = lro + lrd * t;
+        hitInv = invs[k];
+        hitSize = geos[k].w;
+        hitSeed = seeds[k];
+      }
+    }
+
+    bool hit = hitK >= 0;
+    float tFloor = (FLOOR_Z - ro.z) / rd.z;
+    float tHit = hit ? tMin : tFloor;
+    vec3 wp = ro + rd * tHit;
+
+    // \u7ACB\u65B9\u4F53\u6CD5\u7EBF\uFF1A\u68F1\u8FB9\u4E00\u5708\u5411\u5916\u503E\u659C\uFF0C\u5F62\u6210\u5706\u6DA6\u7684\u5012\u89D2\uFF1B\u6BCF\u5757\u9876\u9762\u6781\u8F7B\u5FAE\u9519\u5F00\uFF0C\u50CF\u624B\u5DE5\u94FA\u8D34
+    vec3 n = vec3(0.0, 0.0, 1.0);
+    float bevel = 0.0;
+    if (hit) {
+      vec3 b = (1.0 - smoothstep(0.0, BEVEL, hitSize - abs(hitP))) * (1.0 - abs(hitN));
+      bevel = max(max(b.x, b.y), b.z);
+      vec3 jitter = (vec3(hitSeed, fract(hitSeed * 7.13), fract(hitSeed * 3.71)) - 0.5) * 0.04 * (1.0 - abs(hitN));
+      n = normalize(transposeM(hitInv) * normalize(hitN + sign(hitP) * b * 1.2 + jitter));
+    }
+
+    // \u4E3B\u5149\u6E90\u7684\u6295\u5F71\uFF1A\u5411\u5149\u6E90\u65B9\u5411\u68C0\u6D4B\u5176\u4F59\u7ACB\u65B9\u4F53\uFF0C\u547D\u4E2D\u5373\u63D0\u524D\u9000\u51FA
+    float shadow = 1.0;
+    vec3 sp = wp + n * 0.003;
+    for (int k = 0; k < 9; k++) {
+      if (k == hitK) continue;
+      vec3 tmp;
+      float ts = boxHit(invs[k] * (sp - geos[k].xyz), localL[k], geos[k].w, tmp);
+      if (ts > 0.0) {
+        shadow = 0.0;
+        break;
+      }
+    }
+
+    vec3 V = -rd;
+    float diffK = max(dot(n, L), 0.0) * shadow;
+    float NdHk = max(dot(n, normalize(L + V)), 0.0);
+
+    vec3 color;
+    if (hit) {
+      float fres = pow(1.0 - max(dot(n, V), 0.0), 5.0);
+      vec3 env = envLight(reflect(rd, n));
+
+      vec3 edge = uHighlight * (0.03 + 0.4 * diffK)
+        + mix(uHighlight, vec3(1.0), 0.3 + 0.7 * fres) * env * 1.4
+        + specCol * pow(NdHk, 48.0) * shadow * 0.8;
+
+      vec3 face;
+      if (abs(hitN.z) > 0.5) {
+        face = uFront * (amb + 0.55 * diffK)
+          + env * (0.12 + 0.88 * fres) * mix(1.0, 0.45, uScheme)
+          + specCol * pow(NdHk, 900.0) * shadow * 0.4;
+      } else {
+        face = uColor * (amb * 0.6 + 0.02 + 0.7 * diffK)
+          + mix(uColor, vec3(1.0), fres) * env * 0.8
+          + mix(uColor, specCol, 0.5) * (pow(NdHk, 40.0) * shadow * 0.5);
+      }
+      color = mix(face, edge, bevel * 0.5);
+    } else {
+      // \u69FD\u5E95\uFF1A\u7D27\u8D34\u7ACB\u65B9\u4F53\u5904\u538B\u6697\uFF0C\u6EDA\u52A8\u4E2D\u7684\u7ACB\u65B9\u4F53\u4E0B\u65B9\u900F\u51FA\u5F3A\u8C03\u8272\u8F89\u5149
+      float ao = 1.0;
+      float glow = 0.0;
+      for (int k = 0; k < 9; k++) {
+        vec2 dv = wp.xy - geos[k].xy;
+        float d2 = dot(dv, dv);
+        // \u8D85\u8FC7\u6B64\u8DDD\u79BB ao \u5DF2\u9971\u548C\u3001\u8F89\u5149\u5DF2\u8870\u51CF\u5230\u770B\u4E0D\u89C1\uFF0C\u8DF3\u8FC7\u4EE5\u7701\u7B97\u529B
+        if (d2 > 1.5) continue;
+        vec2 q = abs(dv) - geos[k].w;
+        ao *= mix(0.2, 1.0, smoothstep(0.0, 0.3, length(max(q, 0.0))));
+        glow += opens[k] * exp(-d2 / 0.18);
+      }
+      color = uFloor * (amb + 0.45 * diffK) * ao
+        + uColor * (glow * 0.5 * (0.4 + 0.6 * ao));
+    }
+
+    // \u8FDC\u5904\u6E10\u9690\u8FDB\u96FE\u91CC\uFF0C\u62C9\u5F00\u7EB5\u6DF1
+    float fog = smoothstep(D * 0.95, D * 1.5, tHit);
+    color = mix(color, uFloor * mix(0.4, 0.9, uScheme), fog * 0.8);
+
+    acc += aces(color * mix(1.3, 1.05, uScheme));
+  }
+  vec3 color = acc / uSamples;
+
+  vec2 vc = frag / uResolution - 0.5;
+  color *= 1.0 - dot(vc, vc) * mix(1.1, 0.3, uScheme);
+  color = pow(color, vec3(1.0 / 2.2));
+  color += (hash(frag + fract(uTime)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function FlipTiles({
+  children,
+  className,
+  color = "#4f6bff",
+  highlightColor = "#b8c4ff",
+  tileSize = 72,
+  speed = 1,
+  pattern = "wave",
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER7,
+    speed,
+    interactive,
+    // 每像素要跑 9 次立方体求交与阴影射线，属于重填充率着色器：内部按 1.5× 渲染，
+    // 视觉上几乎无损，但相比 2× 能省下约 44% 的像素量
+    maxDpr: 1.5,
+    onDraw: ({ gl, uniform, dpr }) => {
+      const light = scheme === "light";
+      gl.uniform1f(uniform("uScale"), Math.max(24, tileSize) * dpr);
+      gl.uniform3fv(uniform("uColor"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform3fv(uniform("uFront"), hexToLinearRgb(light ? "#ececf1" : "#0c0c12"));
+      gl.uniform3fv(uniform("uFloor"), hexToLinearRgb(light ? "#c6c6d0" : "#040406"));
+      gl.uniform1f(uniform("uPattern"), Math.max(0, PATTERNS.indexOf(pattern)));
+      gl.uniform1f(uniform("uScheme"), light ? 1 : 0);
+      gl.uniform1f(uniform("uSamples"), 2);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-flip-tiles", className),
+      "data-scheme": scheme,
+      style: { "--elyri-flip-tiles-color": color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-flip-tiles__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-flip-tiles__content", children })
+      ]
+    }
+  );
+}
+var DEFAULT_COLORS2 = ["#8fb4ff", "#e7c6ff"];
+var FRAGMENT_SHADER8 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform float uSize;
+uniform float uInteractive;
+uniform vec3 uBg;
+uniform float uScheme;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+// \u6DF1\u8272\u4E0B\u5149\u7EBF\u53E0\u52A0\u53D1\u4EAE\uFF1B\u6D45\u8272\u4E0B\u6539\u4E3A\u6309\u8272\u76F8\u5438\u6536\u5E95\u8272\uFF0C\u50CF\u58A8\u8272\u7EC6\u7EBF\u843D\u5728\u7EB8\u9762\u4E0A
+vec3 shade(vec3 bg, vec3 light) {
+  if (uScheme > 0.5) {
+    float amount = max(max(light.r, light.g), light.b);
+    vec3 tint = light / max(amount, 1e-4);
+    return bg * exp(-amount * 1.6 * (1.0 - tint * 0.8));
+  }
+  return bg + 1.0 - exp(-light * 1.4);
+}
+
+void main() {
+  vec2 res = uResolution;
+  vec2 p = (gl_FragCoord.xy - 0.5 * res) / res.y;
+  vec2 pointer = (vec2(uPointer.x, res.y - uPointer.y) - 0.5 * res) / res.y;
+  p -= pointer * 0.06 * uInteractive;
+  float t = uTime;
+
+  float r = length(p);
+  float a = atan(p.y, p.x);
+
+  float radius = 0.3 * uSize;
+  radius += 0.010 * sin(a * 3.0 + t * 0.5) + 0.006 * sin(a * 5.0 - t * 0.8);
+  float d = abs(r - radius);
+
+  float line = exp(-d * d * 60000.0);
+  float glow = exp(-d * 22.0) * 0.28 + exp(-d * 6.0) * 0.05;
+
+  // \u4E24\u675F\u9AD8\u5149\u6CBF\u5706\u5468\u4EE5\u4E0D\u540C\u901F\u5EA6\u6D41\u52A8
+  float f1 = pow(0.5 + 0.5 * cos(a - t * 0.45), 6.0);
+  float f2 = pow(0.5 + 0.5 * cos(a + 2.4 + t * 0.28), 10.0);
+  float flow = 0.12 + f1 + 0.6 * f2;
+
+  vec3 tint = mix(uColor1, uColor2, 0.5 + 0.5 * sin(a + t * 0.2));
+  vec3 light = tint * (line * 1.1 + glow) * flow;
+  // \u5708\u5185\u6781\u6DE1\u7684\u96FE\u5149
+  light += uColor1 * 0.015 * exp(-r * r / (radius * radius) * 1.5);
+
+  vec3 color = pow(clamp(shade(uBg, light), 0.0, 1.0), vec3(1.0 / 2.2));
+  color += (hash(gl_FragCoord.xy + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function Halo({
+  children,
+  className,
+  colors = DEFAULT_COLORS2,
+  size = 1,
+  speed = 1,
+  interactive = true
+}) {
+  const [first = DEFAULT_COLORS2[0], second = DEFAULT_COLORS2[1]] = colors;
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER8,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform("uColor1"), hexToLinearRgb(first));
+      gl.uniform3fv(uniform("uColor2"), hexToLinearRgb(second));
+      gl.uniform1f(uniform("uSize"), Math.max(0.1, size));
+      gl.uniform1f(uniform("uInteractive"), interactive ? 1 : 0);
+      gl.uniform3fv(uniform("uBg"), hexToLinearRgb(scheme === "light" ? "#f8f8fa" : "#010102"));
+      gl.uniform1f(uniform("uScheme"), scheme === "light" ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-halo", className),
+      "data-scheme": scheme,
+      style: { "--elyri-halo-color": first },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-halo__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-halo__content", children })
+      ]
+    }
+  );
+}
+var DEFAULT_COLORS3 = ["#6e6af0", "#f472b6", "#fbbf77", "#38bdf8"];
+var FRAGMENT_SHADER9 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor0;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform vec3 uBase;
+uniform float uGrain;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+vec3 toOklab(vec3 c) {
+  float l = 0.4122214708 * c.r + 0.5363325363 * c.g + 0.0514459929 * c.b;
+  float m = 0.2119034982 * c.r + 0.6806995451 * c.g + 0.1073969566 * c.b;
+  float s = 0.0883024619 * c.r + 0.2817188376 * c.g + 0.6299787005 * c.b;
+  l = pow(max(l, 0.0), 1.0 / 3.0);
+  m = pow(max(m, 0.0), 1.0 / 3.0);
+  s = pow(max(s, 0.0), 1.0 / 3.0);
+  return vec3(
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s
+  );
+}
+
+vec3 fromOklab(vec3 c) {
+  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;
+  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;
+  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;
+  l = l * l * l;
+  m = m * m * m;
+  s = s * s * s;
+  return vec3(
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
+  );
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + 1.0), u.x), u.y);
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  mat2 rot = mat2(1.6, 1.2, -1.2, 1.6);
+  for (int i = 0; i < 4; i++) {
+    v += a * noise(p);
+    p = rot * p + vec2(11.3, 7.9);
+    a *= 0.5;
+  }
+  return v;
+}
+
+float blob(vec2 uv, vec2 center) {
+  vec2 d = uv - center;
+  return exp(-dot(d, d) * 3.2);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  vec2 half_ = 0.5 * uResolution / minRes;
+  vec2 uv = (frag - 0.5 * uResolution) / minRes;
+  vec2 pointer = (uPointer - 0.5 * uResolution) / minRes;
+  float t = uTime * 0.1;
+
+  // \u6307\u9488\u6F29\u6DA1\uFF1A\u7ED5\u6307\u9488\u65CB\u8F6C\u91C7\u6837\u5750\u6807\uFF0C\u8D8A\u9760\u8FD1\u8F6C\u5F97\u8D8A\u591A\uFF0C\u8272\u5F69\u88AB\u5377\u8FDB\u53BB
+  vec2 dm = uv - pointer;
+  float swirl = exp(-dot(dm, dm) / 0.07);
+  float angle = swirl * 1.1;
+  uv = pointer + mat2(cos(angle), sin(angle), -sin(angle), cos(angle)) * dm * (1.0 - swirl * 0.12);
+
+  // \u4E24\u7EA7\u57DF\u626D\u66F2\u7684\u6D41\u573A\uFF1Aq \u7F13\u6162\u6F02\u79FB\uFF0Cr \u5728 q \u7684\u57FA\u7840\u4E0A\u518D\u626D\u4E00\u6B21\uFF0C\u5F97\u5230\u6DB2\u4F53\u822C\u7684\u5377\u6D41
+  vec2 p = uv * 1.5;
+  vec2 q = vec2(fbm(p + vec2(0.0, t)), fbm(p + vec2(5.2, 1.3) - t * 0.8));
+  vec2 r = vec2(fbm(p + 2.6 * q + vec2(1.7, 9.2) + t * 1.2), fbm(p + 2.6 * q + vec2(8.3, 2.8) - t));
+  vec2 w = uv + (r - 0.5) * 0.9 + (q - 0.5) * 0.3;
+
+  float tb = uTime * 0.12;
+  vec2 p0 = half_ * vec2(-0.55 + 0.35 * sin(tb * 0.63), -0.45 + 0.35 * cos(tb * 0.51));
+  vec2 p1 = half_ * vec2(0.55 + 0.30 * cos(tb * 0.57 + 1.0), -0.35 + 0.40 * sin(tb * 0.71 + 2.0));
+  vec2 p2 = half_ * vec2(0.45 + 0.35 * sin(tb * 0.49 + 3.0), 0.50 + 0.30 * cos(tb * 0.61 + 1.5));
+  vec2 p3 = half_ * vec2(-0.50 + 0.35 * cos(tb * 0.67 + 4.0), 0.45 + 0.35 * sin(tb * 0.53 + 0.5));
+
+  float w0 = blob(w, p0);
+  float w1 = blob(w, p1);
+  float w2 = blob(w, p2);
+  float w3 = blob(w, p3);
+  float wb = 0.05;
+
+  vec3 lab = (toOklab(uColor0) * w0 + toOklab(uColor1) * w1 + toOklab(uColor2) * w2 + toOklab(uColor3) * w3 + toOklab(uBase) * wb)
+    / (w0 + w1 + w2 + w3 + wb);
+
+  // \u7F0E\u9762\u6D41\u5149\uFF1A\u6CBF\u6D41\u573A\u7B49\u503C\u7EBF\u7684\u67D4\u548C\u4EAE\u5E26\u968F\u65F6\u95F4\u6ED1\u8FC7\uFF0C\u8C37\u5E95\u5FAE\u6697\uFF0C\u5E26\u51FA\u4E1D\u7EF8\u822C\u7684\u5C42\u6B21
+  float band = sin((r.x * 1.4 - r.y + q.x * 0.6) * 11.0 + t * 3.0);
+  float gloss = smoothstep(0.15, 1.0, band);
+  lab.x += gloss * gloss * 0.06 - (1.0 - smoothstep(-1.0, 0.1, band)) * 0.025;
+  lab.x += swirl * 0.025;
+  // \u9AD8\u5149\u5904\u7565\u964D\u9971\u548C\uFF0C\u50CF\u5149\u6253\u5728\u7EC7\u7269\u8868\u9762
+  lab.yz *= 1.0 - gloss * gloss * 0.12;
+
+  vec3 color = pow(clamp(fromOklab(lab), 0.0, 1.0), vec3(1.0 / 2.2));
+
+  // \u80F6\u7247\u9897\u7C92 + \u6296\u52A8\uFF0C\u6D88\u9664\u5927\u9762\u79EF\u6E10\u53D8\u7684\u8272\u5E26
+  float n = hash(frag + fract(uTime * 7.31) * 113.0) - 0.5;
+  color += n * (uGrain * 0.07 + 1.0 / 255.0);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function MeshGradient({
+  children,
+  className,
+  style,
+  colors = DEFAULT_COLORS3,
+  grain = 0.35,
+  speed = 1,
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const [c0 = DEFAULT_COLORS3[0], c1 = DEFAULT_COLORS3[1], c2 = DEFAULT_COLORS3[2], c3 = DEFAULT_COLORS3[3]] = colors;
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER9,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform("uColor0"), hexToLinearRgb(c0));
+      gl.uniform3fv(uniform("uColor1"), hexToLinearRgb(c1));
+      gl.uniform3fv(uniform("uColor2"), hexToLinearRgb(c2));
+      gl.uniform3fv(uniform("uColor3"), hexToLinearRgb(c3));
+      gl.uniform3fv(uniform("uBase"), hexToLinearRgb(scheme === "light" ? "#f7f7fa" : "#0b0b12"));
+      gl.uniform1f(uniform("uGrain"), Math.max(0, grain));
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-mesh-gradient", className),
+      "data-scheme": scheme,
+      style: {
+        "--elyri-mesh-gradient-c0": c0,
+        "--elyri-mesh-gradient-c1": c1,
+        "--elyri-mesh-gradient-c2": c2,
+        "--elyri-mesh-gradient-c3": c3,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-mesh-gradient__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-mesh-gradient__content", children })
+      ]
+    }
+  );
+}
+var FRAGMENT_SHADER10 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor;
+uniform vec3 uHighlight;
+uniform float uCell;
+uniform float uFollow;
+uniform sampler2D uVideo;
+uniform float uHasVideo;
+uniform vec2 uVideoSize;
+uniform float uScheme;
+uniform float uSeam;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
+  for (int i = 0; i < 5; i++) {
+    v += a * noise(p);
+    p = m * p;
+    a *= 0.5;
+  }
+  return v;
+}
+
+// \u706B\u7130\u70ED\u5EA6\u573A\uFF1A\u57DF\u626D\u66F2\u7684\u566A\u58F0\u7F13\u6162\u4E0A\u5347\uFF0C\u9760\u8FD1\u7126\u70B9\u5904\u66F4\u4EAE
+float heat(vec2 p, vec2 focus, float t) {
+  vec2 q = vec2(
+    fbm(p * 1.4 + vec2(0.0, t * 0.18)),
+    fbm(p * 1.4 + vec2(5.2, 1.3) - t * 0.12)
+  );
+  float n = fbm(p * 2.0 + q * 1.7 + vec2(0.0, t * 0.3));
+  vec2 d = p - focus;
+  float glow = exp(-dot(d, d) * 1.6);
+  return n * n * 1.8 * (0.3 + 0.9 * glow);
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float cell = max(uCell, 2.0);
+  float minRes = min(uResolution.x, uResolution.y);
+  float t = uTime;
+
+  // \u4EE5\u706F\u73E0\u4E2D\u5FC3\u91C7\u6837\uFF0C\u6574\u9897\u706F\u73E0\u540C\u8272
+  vec2 id = floor(frag / cell);
+  vec2 center = (id + 0.5) * cell;
+  vec2 vc = frag / uResolution - 0.5;
+  float grain = (0.86 + 0.2 * hash(id)) * (0.95 + 0.1 * hash(id + floor(t * 10.0) * vec2(7.13, 3.71)));
+  vec3 color;
+
+  if (uHasVideo > 0.5) {
+    // cover \u94FA\u6EE1\uFF1A\u6309\u5BBD\u9AD8\u6BD4\u88C1\u5207\u89C6\u9891
+    vec2 uv = center / uResolution - 0.5;
+    float screenAspect = uResolution.x / uResolution.y;
+    float videoAspect = uVideoSize.x / max(uVideoSize.y, 1.0);
+    if (screenAspect > videoAspect) uv.y *= videoAspect / screenAspect;
+    else uv.x *= screenAspect / videoAspect;
+    color = texture2D(uVideo, uv + 0.5).rgb * grain * 1.1;
+    // \u6DF1\u8272\u538B\u6697\u56DB\u89D2\uFF0C\u6D45\u8272\u63D0\u4EAE\u56DB\u89D2
+    color = mix(color * (1.0 - dot(vc, vc) * 0.6), mix(color, vec3(1.0), dot(vc, vc) * 0.8), uScheme);
+  } else {
+    vec2 p = (center - 0.5 * uResolution) / minRes;
+    vec2 focus = mix(vec2(0.0, 0.1), (uPointer - 0.5 * uResolution) / minRes, 0.5 * uFollow);
+    float h = heat(p, focus, t) * grain;
+    color = uColor * h * 1.3 + uHighlight * pow(max(h - 0.55, 0.0), 2.0) * 2.2;
+    color += uColor * 0.012;
+    color *= 1.0 - dot(vc, vc) * 0.9;
+    color = pow(aces(color), vec3(1.0 / 2.2));
+    if (uScheme > 0.5) {
+      // \u6D45\u8272\uFF1A\u4EAE\u6697\u955C\u50CF\u5E76\u4FDD\u7559\u8272\u76F8 \u2014\u2014 \u6DF1\u5E95\u4EAE\u7130\u7FFB\u8F6C\u4E3A\u6D45\u5E95\u6DF1\u7130
+      float lum = dot(color, vec3(0.2126, 0.7152, 0.0722));
+      color = clamp(color + (1.0 - 2.0 * lum), 0.0, 1.0);
+    }
+  }
+
+  // \u8272\u9636\u91CF\u5316\uFF0C\u6A21\u62DF LED \u9A71\u52A8\u7684\u6709\u9650\u7070\u5EA6
+  color = floor(color * 14.0 + hash(id + 3.1)) / 14.0;
+
+  // \u706F\u73E0\u5F62\u72B6\uFF1A\u65B9\u5F62\u53D1\u5149\u70B9\uFF1B\u95F4\u9699\u6DF1\u8272\u65F6\u4FDD\u7559\u5C11\u8BB8\u6F0F\u5149\uFF0C\u6D45\u8272\u65F6\u4E3A\u6D45\u7070\u5E95\u677F
+  vec2 f = fract(frag / cell) - 0.5;
+  float d = max(abs(f.x), abs(f.y));
+  vec3 gap = mix(color * 0.2, mix(color, vec3(0.96), 0.7), uScheme);
+  color = mix(gap, color, smoothstep(0.5, 0.28, d));
+
+  // \u62FC\u63A5\u5C4F\u63A5\u7F1D\uFF1A\u6BCF 16\xD710 \u9897\u706F\u73E0\u4E00\u5757\uFF0C\u63A5\u7F1D + \u7F1D\u4E0B\u65B9\u7684\u9634\u5F71
+  if (uSeam > 0.0) {
+    vec2 pp = mod(frag, vec2(16.0, 10.0) * cell);
+    float seam = max(1.0 - smoothstep(uSeam - 1.0, uSeam + 1.0, pp.x), 1.0 - smoothstep(uSeam - 1.0, uSeam + 1.0, pp.y));
+    float shade = max(1.0 - smoothstep(uSeam, uSeam + cell * 1.5, pp.x), 1.0 - smoothstep(uSeam, uSeam + cell * 1.5, pp.y));
+    color *= 1.0 - mix(0.45, 0.15, uScheme) * shade;
+    vec3 seamColor = mix(vec3(0.018, 0.016, 0.015), vec3(0.86, 0.855, 0.85), uScheme) + color * 0.06;
+    color = mix(color, seamColor, seam);
+  }
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function PixelVortex({
+  children,
+  className,
+  videoSrc,
+  color = "#ff4d12",
+  highlightColor = "#ffd9b0",
+  cellSize = 4,
+  seams = false,
+  seamWidth = 5,
+  speed = 1,
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const [video, setVideo] = react.useState(null);
+  const [videoReady, setVideoReady] = react.useState(false);
+  const textureRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!videoSrc) return;
+    const el = document.createElement("video");
+    el.crossOrigin = "anonymous";
+    el.muted = true;
+    el.loop = true;
+    el.playsInline = true;
+    el.preload = "auto";
+    let disposed = false;
+    const tryPlay = () => {
+      if (disposed || document.hidden) return;
+      el.play().catch(() => {
+      });
+    };
+    const handleReady = () => {
+      if (disposed) return;
+      setVideo(el);
+      setVideoReady(true);
+    };
+    const handleError = () => {
+      if (disposed) return;
+      setVideoReady(false);
+      setVideo(null);
+    };
+    const handlePause = () => tryPlay();
+    const handleVisibility = () => {
+      if (document.hidden) el.pause();
+      else tryPlay();
+    };
+    el.addEventListener("loadeddata", handleReady);
+    el.addEventListener("canplay", handleReady);
+    el.addEventListener("error", handleError);
+    el.addEventListener("pause", handlePause);
+    document.addEventListener("visibilitychange", handleVisibility);
+    el.src = videoSrc;
+    tryPlay();
+    return () => {
+      disposed = true;
+      el.removeEventListener("loadeddata", handleReady);
+      el.removeEventListener("canplay", handleReady);
+      el.removeEventListener("error", handleError);
+      el.removeEventListener("pause", handlePause);
+      document.removeEventListener("visibilitychange", handleVisibility);
+      el.pause();
+      el.removeAttribute("src");
+      el.load();
+      setVideoReady(false);
+      setVideo(null);
+    };
+  }, [videoSrc]);
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER10,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform("uColor"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform("uCell"), Math.max(2, cellSize) * dpr);
+      gl.uniform1f(uniform("uFollow"), interactive ? 1 : 0);
+      gl.uniform1f(uniform("uScheme"), scheme === "light" ? 1 : 0);
+      gl.uniform1f(uniform("uSeam"), seams ? Math.max(0.5, seamWidth) * dpr : 0);
+      const hasVideo = video != null && videoReady;
+      gl.uniform1f(uniform("uHasVideo"), hasVideo ? 1 : 0);
+      if (!hasVideo || !video) return;
+      if (textureRef.current?.gl !== gl) {
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        textureRef.current = { gl, texture };
+      }
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, textureRef.current.texture);
+      if (video.readyState >= video.HAVE_CURRENT_DATA && video.videoWidth > 0) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video);
+      }
+      gl.uniform1i(uniform("uVideo"), 0);
+      gl.uniform2f(uniform("uVideoSize"), video.videoWidth, video.videoHeight);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-pixel-vortex", className),
+      "data-scheme": scheme,
+      style: { "--elyri-pixel-vortex-color": color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-pixel-vortex__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-pixel-vortex__content", children })
+      ]
+    }
+  );
+}
+var PLANET_PRESETS = {
+  mars: { color: "#c1532b", terrainColor: "#4e1e12", atmosphereColor: "#f2a57c", atmosphere: 0.6 },
+  jupiter: { color: "#ecdcc0", terrainColor: "#a86a3a", atmosphereColor: "#d9cdb8", atmosphere: 0.3 },
+  earth: { color: "#3f5a2a", terrainColor: "#0a2744", atmosphereColor: "#6fa8ff", atmosphere: 0.55 }
+};
+var COMMON = `
+precision highp float;
+
+#define PI 3.14159265
+#define HALF 8
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uSurface;
+uniform vec3 uTerrain;
+uniform vec3 uAtmosphere;
+uniform float uDensity;
+uniform float uStars;
+uniform float uHorizon;
+uniform float uSun;
+uniform vec2 uSunPos;
+uniform float uSunFixed;
+
+const float ALT = 0.15;
+const float FL = 1.25;
+const float H = 0.0045;
+const float RT = 1.0 + 10.0 * H;
+const float SUN_I = 5.0;
+const float SUN_R = 0.012;
+
+float hash12(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+float hash13(vec3 p) {
+  p = fract(p * 0.1031);
+  p += dot(p, p.zyx + 31.32);
+  return fract((p.x + p.y) * p.z);
+}
+
+vec3 hash33(vec3 p) {
+  p = fract(p * vec3(0.1031, 0.1030, 0.0973));
+  p += dot(p, p.yxz + 33.33);
+  return fract((p.xxy + p.yxx) * p.zyx);
+}
+
+float noise2(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash12(i), hash12(i + vec2(1.0, 0.0)), u.x),
+    mix(hash12(i + vec2(0.0, 1.0)), hash12(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+float noise3(vec3 x) {
+  vec3 i = floor(x);
+  vec3 f = fract(x);
+  vec3 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(mix(hash13(i), hash13(i + vec3(1, 0, 0)), u.x), mix(hash13(i + vec3(0, 1, 0)), hash13(i + vec3(1, 1, 0)), u.x), u.y),
+    mix(mix(hash13(i + vec3(0, 0, 1)), hash13(i + vec3(1, 0, 1)), u.x), mix(hash13(i + vec3(0, 1, 1)), hash13(i + vec3(1, 1, 1)), u.x), u.y),
+    u.z
+  );
+}
+
+float lod(float freqTimesFootprint) {
+  return 1.0 - smoothstep(0.25, 0.6, freqTimesFootprint);
+}
+
+float fbm3(vec3 p, float fp, int octaves) {
+  float s = 0.0;
+  float a = 0.5;
+  float f = 1.0;
+  for (int i = 0; i < 8; i++) {
+    float w = lod(f * fp);
+    if (i >= octaves || w <= 0.0) break;
+    s += a * w * (noise3(p * f + float(i) * 7.13) - 0.5);
+    a *= 0.55;
+    f *= 2.02;
+  }
+  return s;
+}
+
+float chapman(float X, float h, float coschi) {
+  float c = sqrt(X + h);
+  if (coschi >= 0.0) return c / (c * coschi + 1.0) * exp(-h);
+  float x0 = sqrt(1.0 - coschi * coschi) * (X + h);
+  return 2.0 * sqrt(x0) * exp(min(X - x0, 40.0)) - c / (1.0 - c * coschi) * exp(-h);
+}
+
+vec3 stars(vec3 rd, float pixAngle) {
+  vec2 a = vec2(atan(rd.x, -rd.z), asin(clamp(rd.y, -1.0, 1.0)));
+  vec3 col = vec3(0.0);
+  for (int layer = 0; layer < 2; layer++) {
+    float scale = layer == 0 ? 70.0 : 190.0;
+    float seed = float(layer) * 17.0;
+    vec2 g = a * scale;
+    vec2 cell = floor(g);
+    if (hash12(cell + seed) > uStars * (layer == 0 ? 0.22 : 0.2)) continue;
+    vec2 pos = 0.2 + 0.6 * vec2(hash12(cell + seed + 3.1), hash12(cell + seed + 7.7));
+    float px = length(fract(g) - pos) / scale / pixAngle;
+    float h = hash12(cell + seed + 5.3);
+    float mag = layer == 0 ? 0.05 + 2.0 * pow(h, 8.0) : 0.015 + 0.05 * h;
+    float tw = 0.7 + 0.3 * sin(uTime * (0.8 + 2.5 * h) + h * 40.0);
+    vec3 tint = mix(vec3(0.62, 0.74, 1.0), vec3(1.0, 0.82, 0.64), hash12(cell + seed + 9.9));
+    col += tint * mag * tw * exp(-px * px * 1.4);
+  }
+  vec2 q = a * vec2(2.2, 3.4);
+  float neb = noise2(q) * 0.55 + noise2(q * 2.1 + 4.0) * 0.3 + noise2(q * 4.3 + 9.0) * 0.15;
+  float band = exp(-pow((a.y + 0.35 * a.x + 0.05) * 2.6, 2.0));
+  col += mix(vec3(0.05, 0.04, 0.12), vec3(0.1, 0.05, 0.07), neb) * smoothstep(0.35, 0.85, neb) * band * 0.12 * uStars;
+  return col;
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+`;
+var RELIEF = `
+vec4 noised(vec3 x) {
+  vec3 i = floor(x);
+  vec3 w = fract(x);
+  vec3 u = w * w * w * (w * (w * 6.0 - 15.0) + 10.0);
+  vec3 du = 30.0 * w * w * (w * (w - 2.0) + 1.0);
+  float a = hash13(i);
+  float b = hash13(i + vec3(1, 0, 0));
+  float c = hash13(i + vec3(0, 1, 0));
+  float d = hash13(i + vec3(1, 1, 0));
+  float e = hash13(i + vec3(0, 0, 1));
+  float f = hash13(i + vec3(1, 0, 1));
+  float g = hash13(i + vec3(0, 1, 1));
+  float h = hash13(i + vec3(1, 1, 1));
+  float k1 = b - a;
+  float k2 = c - a;
+  float k3 = e - a;
+  float k4 = a - b - c + d;
+  float k5 = a - c - e + g;
+  float k6 = a - b - e + f;
+  float k7 = -a + b + c - d + e - f - g + h;
+  return vec4(
+    a + k1 * u.x + k2 * u.y + k3 * u.z + k4 * u.x * u.y + k5 * u.y * u.z + k6 * u.z * u.x + k7 * u.x * u.y * u.z,
+    du * vec3(
+      k1 + k4 * u.y + k6 * u.z + k7 * u.y * u.z,
+      k2 + k5 * u.z + k4 * u.x + k7 * u.z * u.x,
+      k3 + k6 * u.x + k5 * u.y + k7 * u.x * u.y
+    )
+  );
+}
+
+vec4 terrain(vec3 p, float fp) {
+  vec4 s = vec4(0.0);
+  vec3 dsum = vec3(0.0);
+  float a = 0.5;
+  float f = 1.0;
+  for (int i = 0; i < 10; i++) {
+    float w = lod(f * fp);
+    if (w <= 0.0) break;
+    vec4 n = noised(p * f + float(i) * vec3(3.1, 7.7, 1.3));
+    vec3 g = n.yzw * f;
+    dsum += g * a;
+    float k = a * w / (1.0 + 0.35 * dot(dsum, dsum));
+    s.x += k * (n.x - 0.5);
+    s.yzw += k * g;
+    a *= 0.5;
+    f *= 2.03;
+  }
+  return s;
+}
+`;
+var MARS_SURFACE = `
+uniform float uCraters;
+
+const float BUMP = 0.06;
+
+float craterProfile(float x) {
+  return 0.8 * (smoothstep(0.0, 1.0, x) - 1.0) + 0.3 * exp(-10.0 * (x - 1.0) * (x - 1.0));
+}
+
+float craterLayer(vec3 p, float scale, float fp, float seed, inout vec3 grad) {
+  vec3 g = p * scale + seed;
+  vec3 cell = floor(g);
+  vec3 r = hash33(cell + seed);
+  if (r.x > 0.75 * uCraters) return 0.0;
+  vec3 c = cell + 0.3 + 0.4 * hash33(cell * 1.7 + seed + 11.0);
+  float R = mix(0.07, 0.18, r.y * r.y);
+  vec3 d = g - c;
+  float dist = length(d);
+  float x = dist / R;
+  if (x > 1.6) return 0.0;
+  float w = 1.0 - smoothstep(0.1, 0.4, fp * scale / R);
+  float depth = uCraters * mix(0.5, 1.0, r.z) * w;
+  float dh = (craterProfile(x + 0.01) - craterProfile(x - 0.01)) / 0.02;
+  grad += dh * d / max(dist, 1e-4) * depth * 0.8;
+  return craterProfile(x) * w;
+}
+
+vec3 shadeSurface(vec3 n, float ndv, float pix, vec3 sun, vec3 beta, float X) {
+  float fp = pix / max(sqrt(ndv), 0.12);
+
+  float ang = -uTime * 0.01;
+  float cs = cos(ang);
+  float sn = sin(ang);
+  mat3 spin = mat3(1.0, 0.0, 0.0, 0.0, cs, sn, 0.0, -sn, cs);
+  vec3 q = spin * n;
+
+  vec4 ter = terrain(q * 4.0 + 2.0, fp * 4.0);
+  vec3 grad = ter.yzw * 4.0 * BUMP;
+  float crater = 0.0;
+  crater += craterLayer(q, 5.0, fp, 1.3, grad);
+  crater += craterLayer(q, 11.0, fp, 7.9, grad);
+  crater += craterLayer(q, 23.0, fp, 4.1, grad);
+  crater += craterLayer(q, 47.0, fp, 9.6, grad);
+  crater += craterLayer(q, 97.0, fp, 5.7, grad);
+  crater += craterLayer(q, 199.0, fp, 2.2, grad);
+  grad = grad * spin;
+  grad -= dot(grad, n) * n;
+  vec3 nb = normalize(n - grad);
+
+  float big = fbm3(q * 1.7 + 4.0, fp * 1.7, 8);
+  float mid = fbm3(q * 9.0 + 1.0, fp * 9.0, 8);
+  float fine = fbm3(q * 70.0 + 3.0, fp * 70.0, 8);
+  vec3 albedo = mix(uSurface, uTerrain, smoothstep(-0.12, 0.22, big + 0.35 * mid + 0.15 * fine));
+  albedo *= 0.8 + 0.7 * (mid + 0.5) * 0.6 + 2.0 * ter.x + 0.5 * fine;
+  albedo *= 1.0 + 0.3 * crater;
+  albedo = max(albedo, 0.0);
+
+  float ngl = dot(n, sun);
+  float mu0 = max(dot(nb, sun), 0.0);
+  float lsl = mu0 / (mu0 + ndv + 1e-3);
+  float brdf = mix(mu0, lsl, 0.35) * smoothstep(-0.03, 0.08, ngl);
+  vec3 sunT = exp(-beta * H * chapman(X, 0.0, ngl));
+  vec3 sky = uAtmosphere * uDensity * 0.05 * smoothstep(-0.3, 0.4, ngl);
+  return albedo * (SUN_I * 0.9 * sunT * brdf + sky + 0.004);
+}
+`;
+var JUPITER_SURFACE = `
+const vec3 AXIS = vec3(0.0, 0.2955, -0.9553);
+const vec3 EAST0 = vec3(1.0, 0.0, 0.0);
+const vec3 MERIDIAN0 = vec3(0.0, 0.9553, 0.2955);
+const float FLOW_T = 24.0;
+
+vec3 spinAxis(vec3 p, float a) {
+  float c = cos(a);
+  float s = sin(a);
+  return p * c + cross(AXIS, p) * s + AXIS * dot(AXIS, p) * (1.0 - c);
+}
+
+vec3 fromLatLon(float lat, float lon) {
+  return cos(lat) * (cos(lon) * MERIDIAN0 + sin(lon) * EAST0) + sin(lat) * AXIS;
+}
+
+vec2 harmonic(float lat, float k, float a, float ph, float fpLat) {
+  float w = a * lod(k * fpLat / (2.0 * PI));
+  return w * vec2(sin(k * lat + ph), k * cos(k * lat + ph));
+}
+
+vec2 bandField(float lat, float fpLat) {
+  return harmonic(lat, 61.0, 1.0, 0.9, fpLat)
+    + harmonic(lat, 107.0, 0.55, 2.4, fpLat)
+    + harmonic(lat, 211.0, 0.3, 4.1, fpLat)
+    + harmonic(lat, 409.0, 0.16, 1.7, fpLat);
+}
+
+float jet(float lat) {
+  return 0.00011 * (61.0 * cos(61.0 * lat + 0.9) + 0.55 * 107.0 * cos(107.0 * lat + 2.4));
+}
+
+vec2 cloudPhase(vec3 p, float lat, float t, float seed, float fp) {
+  vec3 q = spinAxis(p, -jet(lat) * t);
+  q += AXIS * dot(q, AXIS) * 2.0;
+  q += seed * vec3(1.7, 9.2, 4.3);
+  float wx = fbm3(q * 7.0, fp * 14.0, 5);
+  float wy = fbm3(q * 7.0 + 5.2, fp * 14.0, 5);
+  float detail = fbm3(q * 30.0 + vec3(wx, wy, wx - wy) * 9.0, fp * 60.0, 7);
+  return vec2(wx, detail);
+}
+
+vec2 vortexFrame(vec3 p, float lat0, float lon0, vec2 radii) {
+  vec3 c = fromLatLon(lat0, lon0);
+  vec3 east = normalize(cross(AXIS, c));
+  vec3 north = cross(c, east);
+  vec3 d = p - c;
+  return vec2(dot(d, east), dot(d, north)) / radii;
+}
+
+vec2 vortex(vec2 v, float spin, float seed, float fp) {
+  float r = length(v);
+  float ang = spin * uTime + 2.4 * (1.0 - smoothstep(0.0, 1.1, r));
+  float c = cos(ang);
+  float s = sin(ang);
+  vec2 w = mat2(c, -s, s, c) * v;
+  float tex = fbm3(vec3(w * 2.4, r * 6.0 + seed), fp * 6.0, 6);
+  float mask = 1.0 - smoothstep(0.6, 1.0, r + tex * 0.5);
+  return vec2(mask, tex);
+}
+
+float vortexPush(vec2 v, float radiusY) {
+  float r = length(v);
+  return v.y / max(r, 1e-3) * radiusY * 0.7 * (1.0 - smoothstep(0.9, 2.6, r)) * smoothstep(0.0, 0.9, r);
+}
+
+vec3 shadeSurface(vec3 n, float ndv, float pix, vec3 sun, vec3 beta, float X) {
+  float fp = pix / max(sqrt(ndv), 0.12);
+  float fpLat = pix / max(ndv, 0.03);
+
+  float lat = asin(clamp(dot(n, AXIS), -1.0, 1.0));
+
+  float cyc = uTime / FLOW_T;
+  float phA = fract(cyc);
+  float phB = fract(cyc + 0.5);
+  float wA = 1.0 - abs(2.0 * phA - 1.0);
+  vec2 A = cloudPhase(n, lat, phA * FLOW_T, mod(floor(cyc), 61.0), fp);
+  vec2 B = cloudPhase(n, lat, phB * FLOW_T, mod(floor(cyc + 0.5), 61.0) + 0.5, fp);
+  vec2 cl = (A * wA + B * (1.0 - wA)) / sqrt(wA * wA + (1.0 - wA) * (1.0 - wA));
+
+  const vec2 GRS_R = vec2(0.05, 0.028);
+  vec2 grs = vortexFrame(n, 0.6, -0.1 + 0.03 * sin(uTime * 0.021), GRS_R);
+  float push = vortexPush(grs, GRS_R.y);
+  const vec2 OVAL_R = vec2(0.013, 0.0085);
+  vec2 ovals[5];
+  for (int i = 0; i < 5; i++) {
+    float fi = float(i);
+    float lon = fi * 0.085 - 0.3 + 0.02 * sin(uTime * 0.017 + fi * 1.9);
+    ovals[i] = vortexFrame(n, 0.545 + 0.003 * sin(fi * 2.3), lon, OVAL_R);
+    push += vortexPush(ovals[i], OVAL_R.y);
+  }
+
+  float latB = lat + cl.x * 0.02 + push;
+  vec2 band = bandField(latB, fpLat);
+  float soft = 0.25 + abs(band.y) * fpLat;
+  float belt = smoothstep(-soft, soft, band.x - 0.1);
+  float edge = 1.0 - abs(2.0 * belt - 1.0);
+
+  float hue = 0.5 + 0.5 * sin(latB * 17.0 + 1.7);
+  vec3 beltCol = mix(uTerrain, uTerrain * vec3(1.25, 0.9, 0.62), hue);
+  vec3 zoneCol = mix(uSurface, uSurface * vec3(1.0, 0.9, 0.72), 1.0 - hue);
+  vec3 albedo = mix(zoneCol, beltCol, belt);
+  albedo *= 1.0 + cl.y * (1.6 + 2.4 * edge) + 0.1 * band.x;
+  float festoon = smoothstep(0.05, 0.2, cl.y) * edge;
+  albedo = mix(albedo, albedo * vec3(0.5, 0.62, 0.78), festoon * 0.55);
+
+  float rg = length(grs);
+  vec2 gv = vortex(grs, 0.18, 3.0, fp / GRS_R.y);
+  float collar = exp(-pow((rg - 1.1) / 0.22, 2.0));
+  albedo = mix(albedo, zoneCol * (1.1 + cl.y), collar * 0.75);
+  vec3 red = uTerrain * vec3(1.7, 0.66, 0.4);
+  red *= (0.7 + 0.4 * smoothstep(0.0, 0.85, rg)) * (1.0 + 1.8 * gv.y);
+  albedo = mix(albedo, red, gv.x);
+
+  for (int i = 0; i < 5; i++) {
+    float r = length(ovals[i]);
+    if (r < 1.6) {
+      vec2 o = vortex(ovals[i], -0.4, float(i) * 3.1, fp / OVAL_R.y);
+      albedo *= 1.0 - 0.35 * exp(-pow((r - 1.0) / 0.18, 2.0));
+      albedo = mix(albedo, uSurface * (1.08 + 1.4 * o.y) * (0.9 + 0.15 * smoothstep(0.0, 0.7, r)), o.x * 0.92);
+    }
+  }
+  albedo = max(albedo, 0.0);
+
+  float ngl = dot(n, sun);
+  float mu0 = max(ngl, 0.0);
+  float brdf = mu0 * smoothstep(-0.02, 0.1, ngl) + 0.015 * smoothstep(-0.12, 0.04, ngl);
+  vec3 sunT = exp(-beta * H * chapman(X, 0.0, ngl));
+  vec3 sky = uAtmosphere * uDensity * 0.05 * smoothstep(-0.3, 0.4, ngl);
+  return albedo * (SUN_I * 0.9 * sunT * brdf + sky + 0.004);
+}
+`;
+var EARTH_SURFACE = `
+uniform float uCityLights;
+
+const float CLOUD_H = 0.0016;
+const vec3 CITY_WARM = vec3(1.0, 0.5, 0.16);
+const vec3 CITY_COOL = vec3(1.0, 0.86, 0.66);
+
+mat3 spinX(float a) {
+  float c = cos(a);
+  float s = sin(a);
+  return mat3(1.0, 0.0, 0.0, 0.0, c, s, 0.0, -s, c);
+}
+
+vec3 cloudWarp(vec3 p, float fp) {
+  vec3 s = p * 1.8 + vec3(0.0, 0.0, uTime * 0.0035);
+  return vec3(fbm3(s + 1.3, fp * 1.8, 4), fbm3(s + 7.1, fp * 1.8, 4), fbm3(s + 4.4, fp * 1.8, 4));
+}
+
+float cloudCover(vec3 p, vec3 w, float fp) {
+  float t = uTime * 0.006;
+  float big = fbm3(p * 3.2 + w * 2.4 + vec3(t, 0.0, -t), fp * 3.2, 6);
+  float puff = fbm3(p * 21.0 + w * 5.0 - vec3(0.0, t, t) * 3.0, fp * 21.0, 6);
+  float c = big + 0.4 * puff * smoothstep(-0.15, 0.1, big);
+  return smoothstep(0.03, 0.26, c + 0.02);
+}
+
+// \u6BCF\u4E2A\u683C\u5B50\u81F3\u591A\u4E00\u5EA7\u805A\u843D\uFF0C\u4F4D\u7F6E\u5728\u683C\u5185\u5B8C\u5168\u968F\u673A\uFF1B\u67E5 2x2x2 \u90BB\u683C\u907F\u514D\u88AB\u683C\u5B50\u8FB9\u754C\u622A\u65AD
+float settlements(vec3 q, float scale, float fp, float P, float seed) {
+  vec3 g = q * scale + seed * 17.0;
+  vec3 base = floor(g - 0.5);
+  float f2 = fp * scale * fp * scale * 0.25;
+  float sum = 0.0;
+  for (int i = 0; i < 8; i++) {
+    float fi = float(i);
+    vec3 cell = base + vec3(mod(fi, 2.0), mod(floor(fi * 0.5), 2.0), floor(fi * 0.25));
+    vec3 r = hash33(cell + seed);
+    float w = smoothstep(r.x, r.x + 0.15, P);
+    if (w <= 0.0) continue;
+    vec3 d = g - cell - hash33(cell * 1.7 + seed + 5.0);
+    d -= dot(d, q) * q;
+    float s2 = mix(0.03, 0.14, r.y * r.y);
+    s2 *= s2;
+    float t2 = s2 + f2;
+    sum += w * exp(-dot(d, d) / t2) * s2 / t2 * (0.5 + 0.5 * r.z);
+  }
+  return sum;
+}
+
+vec3 cityLights(vec3 q, float fp, float P) {
+  float metro = settlements(q, 40.0, fp, P * 0.75, 1.0);
+  float town = settlements(q, 170.0, fp, P * 0.45 + min(metro, 1.0) * 0.4, 2.0);
+  float t = min(metro, 1.0);
+  // \u8857\u533A\u9897\u7C92\uFF1A\u5E02\u4E2D\u5FC3\u8FDE\u6210\u4E00\u7247\uFF0C\u8D8A\u5F80\u90CA\u533A\u8D8A\u7834\u788E
+  float grain = 0.6 * noise3(q * 1800.0) + 0.4 * noise3(q * 700.0 + 3.1);
+  float lo = 0.72 - 0.55 * t;
+  float mask = mix(0.2 + 0.6 * t, smoothstep(lo, lo + 0.2, grain), lod(fp * 1800.0));
+  vec3 tint = mix(CITY_WARM, CITY_COOL, t * t * 0.8);
+  return tint * metro * mask * 1.1 + CITY_WARM * min(town, 1.5) * 0.35;
+}
+
+vec3 shadeSurface(vec3 n, float ndv, float pix, vec3 sun, vec3 beta, float X) {
+  float fp = pix / max(sqrt(ndv), 0.12);
+
+  mat3 spin = spinX(-uTime * 0.008);
+  vec3 q = spin * n;
+
+  vec3 cw = vec3(fbm3(q * 1.2 + 3.7, fp * 1.2, 4), fbm3(q * 1.2 + 9.1, fp * 1.2, 4), fbm3(q * 1.2 + 5.3, fp * 1.2, 4));
+  float cont = fbm3(q * 1.9 + cw * 1.4 + 0.7, fp * 1.9, 6);
+  vec4 ter = terrain(q * 7.0 + 2.0, fp * 7.0);
+  float e = cont + 0.3 * ter.x - 0.035;
+  float aa = fp * 4.0 + 5e-4;
+  float land = smoothstep(-aa, aa, e);
+  float alt = max(e, 0.0);
+  float mtn = smoothstep(0.02, 0.14, alt + 0.15 * ter.x);
+
+  vec3 grad = ter.yzw * 7.0 * 0.022 * (0.35 + 2.0 * mtn) * land;
+  grad = grad * spin;
+  grad -= dot(grad, n) * n;
+  vec3 nb = normalize(n - grad);
+
+  float mid = fbm3(q * 14.0 + 1.0, fp * 14.0, 6);
+  float dry = 0.0;
+  float snow = 0.0;
+  vec3 ground = uTerrain;
+  if (land > 0.0) {
+    float fine = fbm3(q * 60.0 + 3.0, fp * 60.0, 5);
+    float moist = fbm3(q * 2.6 + 8.0, fp * 2.6, 6) + 0.15 * exp(-alt * 25.0);
+    dry = 1.0 - smoothstep(-0.12, 0.02, moist + 0.25 * mid);
+    float wet = smoothstep(-0.02, 0.12, moist + 0.2 * mid);
+    vec3 grass = uSurface * vec3(1.9, 1.55, 1.0) + vec3(0.02, 0.012, 0.0);
+    vec3 la = mix(grass, uSurface, wet);
+    la = mix(la, vec3(0.36, 0.25, 0.13) * (0.85 + 0.4 * mid), dry);
+    la = mix(la, vec3(0.1, 0.085, 0.07), mtn * 0.8);
+    snow = smoothstep(0.17, 0.22, alt + 0.06 * fine + 0.04 * mid + 0.1 * abs(q.x));
+    la = mix(la, vec3(0.8), snow);
+    la *= max(0.85 + 0.5 * fine + 0.25 * mid, 0.2);
+    ground = la;
+  }
+  float depth = max(-e, 0.0);
+  vec3 ocean = mix(uTerrain, uTerrain * vec3(0.6, 2.4, 2.0) + vec3(0.0, 0.02, 0.02), exp(-depth * 60.0));
+  ocean *= 0.9 + 0.4 * mid;
+  vec3 albedo = mix(ocean, ground, land);
+
+  float ngl = dot(n, sun);
+  float mu0 = max(dot(nb, sun), 0.0);
+  float lsl = mu0 / (mu0 + ndv + 1e-3);
+  float day = smoothstep(-0.03, 0.08, ngl);
+  float brdf = mix(mu0, lsl, 0.25) * day;
+  vec3 sunT = exp(-beta * H * chapman(X, 0.0, ngl));
+  vec3 sky = uAtmosphere * uDensity * 0.05 * smoothstep(-0.3, 0.4, ngl);
+
+  mat3 cspin = spinX(-uTime * 0.0095);
+  vec3 c = cspin * n;
+  vec3 w = cloudWarp(c, fp);
+  float cov = cloudCover(c, w, fp);
+  vec3 sunTan = sun - ngl * n;
+  sunTan = cspin * (sunTan * inversesqrt(max(dot(sunTan, sunTan), 1e-6)));
+  float shade = 1.0;
+  float relief = 1.0;
+  if (ngl > -0.06) {
+    float reach = CLOUD_H * sqrt(max(1.0 - ngl * ngl, 0.0)) / max(ngl, 0.05);
+    shade = 1.0 - 0.75 * cloudCover(c + sunTan * reach, w, fp);
+    relief = clamp(1.0 - 2.2 * (cloudCover(c + sunTan * 0.006, w, fp) - cov), 0.3, 1.25);
+  }
+
+  vec3 color = albedo * (SUN_I * 0.9 * sunT * brdf * shade + sky + 0.004);
+
+  if (land < 1.0) {
+    vec3 v = normalize(vec3(0.0, 1.0 + ALT, 0.0) - n);
+    float wind = fbm3(q * vec3(10.0, 10.0, 34.0) + 4.2, fp * 34.0, 5);
+    float alpha = mix(0.1, 0.3, smoothstep(-0.18, 0.18, wind));
+    float a2 = alpha * alpha;
+    vec3 hv = normalize(sun + v);
+    float nh = max(dot(n, hv), 0.0);
+    float nl = max(ngl, 0.0);
+    float nv = max(dot(n, v), 1e-3);
+    float dd = nh * nh * (a2 - 1.0) + 1.0;
+    float k = alpha * 0.5;
+    float G = nl / (nl * (1.0 - k) + k) * nv / (nv * (1.0 - k) + k);
+    float F = 0.02 + 0.98 * pow(1.0 - max(dot(v, hv), 0.0), 5.0);
+    float spec = a2 / (PI * dd * dd) * G * F / (4.0 * nv) * day;
+    float Fv = 0.02 + 0.98 * pow(1.0 - nv, 5.0);
+    vec3 skyRefl = uAtmosphere * uDensity * 0.35 * smoothstep(-0.2, 0.35, ngl) * Fv;
+    color += (SUN_I * 0.9 * sunT * spec * shade + skyRefl) * (1.0 - land);
+  }
+
+  float night = (1.0 - smoothstep(-0.08, -0.01, ngl)) * uCityLights;
+  vec3 lights = vec3(0.0);
+  if (night > 0.0 && land > 0.0) {
+    float pop = fbm3(q * 4.3 + 13.0, fp * 4.3, 5) + 0.35 * fbm3(q * 17.0 + 2.0, fp * 17.0, 4);
+    float P = smoothstep(-0.02, 0.2, pop + 0.12 * exp(-alt * 22.0) - 0.25 * dry - 0.3 * mtn - 0.5 * snow);
+    lights = cityLights(q, fp, P) * land * night;
+    color += lights;
+  }
+
+  float ngc = ngl + 0.055;
+  vec3 sunTc = exp(-beta * H * chapman(X, CLOUD_H / H, ngl));
+  float cBrdf = mix(max(ngc, 0.0), ngc / (abs(ngc) + ndv + 1e-3), 0.3) * smoothstep(0.0, 0.1, ngc) * relief;
+  vec3 cloud = vec3(0.78) * (SUN_I * 0.9 * sunTc * max(cBrdf, 0.0) + sky * 2.0 + 0.004);
+  cloud += lights * 0.12;
+  return mix(color, cloud, cov);
+}
+`;
+var MAIN = `
+void main() {
+  vec2 frag = gl_FragCoord.xy;
+  vec2 uv = (frag - 0.5 * uResolution) / uResolution.y;
+  vec2 ptr = uPointer / uResolution;
+  float pixAngle = 1.0 / (uResolution.y * FL);
+
+  float D = 1.0 + ALT;
+  float dip = acos(1.0 / D);
+  float yaw = (ptr.x - 0.5) * 0.04;
+  float pitch = dip + atan((0.5 - uHorizon) / FL) + (ptr.y - 0.5) * 0.015;
+  vec3 ro = vec3(0.0, D, 0.0);
+  vec3 fw = vec3(sin(yaw) * cos(pitch), -sin(pitch), -cos(yaw) * cos(pitch));
+  vec3 right = normalize(cross(fw, vec3(0.0, 1.0, 0.0)));
+  vec3 up = cross(right, fw);
+  vec3 rd = normalize(uv.x * right + uv.y * up + FL * fw);
+
+  vec2 sunRef = mix(ptr, uSunPos, uSunFixed);
+  float az = -0.85 + (sunRef.x - 0.5) * 1.2;
+  float el = -0.24 - (sunRef.y - 0.5) * 0.3;
+  vec3 sun = normalize(vec3(sin(az) * cos(el), sin(el), -cos(az) * cos(el)));
+
+  vec3 beta = uAtmosphere * 7.0 * uDensity + 1e-4;
+  float X = 1.0 / H;
+
+  float b = dot(ro, rd);
+  float tc = -b;
+  float impact = sqrt(max(dot(ro, ro) - b * b, 0.0));
+  float coverage = clamp(0.5 - (impact - 1.0) / (tc * pixAngle), 0.0, 1.0);
+  float disc = b * b - dot(ro, ro) + 1.0;
+  float tPlanet = disc > 0.0 ? -b - sqrt(disc) : tc;
+
+  float mu = dot(rd, sun);
+  float sunAng = sqrt(max(2.0 * (1.0 - mu), 0.0));
+  vec3 space = stars(rd, pixAngle);
+  space += vec3(1.0, 0.96, 0.9) * 60.0 * smoothstep(SUN_R, SUN_R * 0.75, sunAng) * uSun;
+
+  vec3 background = space;
+  if (coverage > 0.0) {
+    vec3 n = normalize(ro + rd * tPlanet);
+    float ndv = max(dot(n, -rd), 0.0);
+    vec3 surface = shadeSurface(n, ndv, tPlanet * pixAngle, sun, beta, X);
+    background = mix(space, surface, coverage);
+  }
+
+  vec3 inscatter = vec3(0.0);
+  vec3 trans = vec3(1.0);
+  float bA = b * b - dot(ro, ro) + RT * RT;
+  if (bA > 0.0) {
+    float t0 = max(-b - sqrt(bA), 0.0);
+    float t1 = mix(-b + sqrt(bA), tPlanet, coverage);
+    float tm = clamp(tc, t0, t1);
+    float jitter = fract(52.9829189 * fract(dot(frag, vec2(0.06711056, 0.00583715))));
+    float du = 1.0 / float(HALF);
+    float od = 0.0;
+    vec3 scat = vec3(0.0);
+    for (int i = 0; i < 2 * HALF; i++) {
+      bool near = i < HALF;
+      float u = ((near ? float(HALF - 1 - i) : float(i - HALF)) + jitter) * du;
+      float len = near ? tm - t0 : t1 - tm;
+      float t = near ? tm - len * u * u : tm + len * u * u;
+      vec3 p = ro + rd * t;
+      float r = length(p);
+      float h = max(r - 1.0, 0.0) / H;
+      float dens = exp(-h) * 2.0 * u * len * du;
+      float odSun = H * chapman(X, h, dot(p, sun) / r);
+      scat += dens * exp(-beta * (od + 0.5 * dens + odSun));
+      od += dens;
+    }
+    trans = exp(-beta * od);
+    float g = 0.76;
+    float phaseR = 3.0 / (16.0 * PI) * (1.0 + mu * mu);
+    float phaseM = (1.0 - g * g) / (4.0 * PI * pow(1.0 + g * g - 2.0 * g * mu, 1.5));
+    inscatter = SUN_I * 7.0 * beta * scat * mix(phaseR, phaseM, 0.4 - 0.25 * coverage);
+  }
+
+  vec3 color = inscatter + trans * background;
+
+  vec3 toCenter = -normalize(ro);
+  float sunCos = dot(sun, toCenter);
+  float clearance = acos(clamp(sunCos, -1.0, 1.0)) - asin(1.0 / D);
+  float sunImpact = D * sqrt(max(1.0 - sunCos * sunCos, 0.0));
+  float hs = max(sunImpact - 1.0, 0.0) / H;
+  vec3 sunTrans = sunCos > 0.0 ? exp(-beta * H * 2.0 * sqrt(X + hs) * exp(-hs)) : vec3(1.0);
+  float sunVis = smoothstep(-SUN_R, SUN_R * 2.0, clearance);
+  vec2 sunUv = vec2(dot(sun, right), dot(sun, up)) / max(dot(sun, fw), 1e-3) * FL;
+  vec2 sd = uv - sunUv;
+  float glow = 0.9 * exp(-sunAng * 30.0) + 0.1 * exp(-sunAng * 7.0) + 0.015 * exp(-sunAng * 2.0);
+  float streak = exp(-abs(sd.y) * 110.0) * exp(-abs(sd.x) * 3.0) * 0.08 * step(0.0, dot(sun, fw));
+  color += vec3(1.0, 0.93, 0.85) * sunTrans * sunVis * (glow + streak) * uSun;
+
+  color *= 1.0 - 0.35 * dot(uv * vec2(0.6, 1.0), uv * vec2(0.6, 1.0));
+  color = pow(aces(color * 0.9), vec3(1.0 / 2.2));
+  color += (hash12(frag + fract(uTime)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+var SHADERS = {
+  mars: COMMON + RELIEF + MARS_SURFACE + MAIN,
+  jupiter: COMMON + JUPITER_SURFACE + MAIN,
+  earth: COMMON + RELIEF + EARTH_SURFACE + MAIN
+};
+function Planet({
+  children,
+  className,
+  planet = "mars",
+  color,
+  terrainColor,
+  atmosphereColor,
+  atmosphere,
+  craters = 0.6,
+  cityLights = true,
+  stars = 0.6,
+  horizon = 0.62,
+  speed = 1,
+  sun = false,
+  sunPosition,
+  interactive = true
+}) {
+  const preset = PLANET_PRESETS[planet] ?? PLANET_PRESETS.mars;
+  const surfaceColor = color ?? preset.color;
+  const darkColor = terrainColor ?? preset.terrainColor;
+  const airColor = atmosphereColor ?? preset.atmosphereColor;
+  const density = atmosphere ?? preset.atmosphere;
+  const canvasRef = useShaderCanvas({
+    fragmentShader: SHADERS[planet] ?? SHADERS.mars,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      const clamp01 = (value) => Math.min(1, Math.max(0, value));
+      gl.uniform3fv(uniform("uSurface"), hexToLinearRgb(surfaceColor));
+      gl.uniform3fv(uniform("uTerrain"), hexToLinearRgb(darkColor));
+      gl.uniform3fv(uniform("uAtmosphere"), hexToLinearRgb(airColor));
+      gl.uniform1f(uniform("uDensity"), clamp01(density));
+      gl.uniform1f(uniform("uCraters"), clamp01(craters));
+      gl.uniform1f(uniform("uCityLights"), cityLights ? 1 : 0);
+      gl.uniform1f(uniform("uStars"), clamp01(stars));
+      gl.uniform1f(uniform("uHorizon"), Math.min(0.95, Math.max(0.05, horizon)));
+      gl.uniform1f(uniform("uSun"), sun ? 1 : 0);
+      gl.uniform2f(uniform("uSunPos"), clamp01(sunPosition?.x ?? 0.5), clamp01(sunPosition?.y ?? 0.5));
+      gl.uniform1f(uniform("uSunFixed"), sunPosition ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-planet", className),
+      "data-planet": planet,
+      style: {
+        "--elyri-planet-color": surfaceColor,
+        "--elyri-planet-atmosphere": airColor,
+        "--elyri-planet-horizon": `${horizon * 100}%`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-planet__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-planet__content", children })
+      ]
+    }
+  );
+}
+var FRAGMENT_SHADER11 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uBase;
+uniform vec3 uHighlight;
+uniform float uFolds;
+uniform float uScheme;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float silk(vec2 p, float t) {
+  vec2 q = p;
+  q.x += 0.55 * sin(q.y * 1.3 + t * 0.3);
+  q.y += 0.45 * sin(q.x * 1.1 - t * 0.25);
+  q.x += 0.2 * sin(q.y * 2.3 - t * 0.2);
+  return sin(q.x * 1.6 + q.y * 0.9 + t * 0.2) * 0.5
+    + sin(q.x * 0.7 - q.y * 1.9 - t * 0.15) * 0.35
+    + sin((q.x + q.y) * 2.7 + t * 0.35) * 0.12;
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  vec2 p = frag / minRes * 2.6 * uFolds;
+  float t = uTime;
+
+  float e = 0.01;
+  float h = silk(p, t);
+  vec2 grad = vec2(silk(p + vec2(e, 0.0), t) - silk(p - vec2(e, 0.0), t), silk(p + vec2(0.0, e), t) - silk(p - vec2(0.0, e), t)) / (2.0 * e);
+  vec3 n = normalize(vec3(-grad * 0.55, 1.0));
+
+  vec3 V = vec3(0.0, 0.0, 1.0);
+  vec3 toLight = vec3(uPointer - frag, minRes * 0.7);
+  float dist = length(toLight);
+  vec3 L = toLight / dist;
+  vec3 H = normalize(L + V);
+  float atten = 1.0 / (1.0 + 1.2 * pow(dist / minRes, 2.0));
+  float NdotL = max(dot(n, L), 0.0);
+  float NdotH = max(dot(n, H), 0.0);
+  float NdotV = max(n.z, 0.0);
+  float fres = pow(1.0 - NdotV, 3.0);
+
+  // \u8936\u76B1\u8C37\u5E95\u66F4\u6697
+  float cavity = mix(0.35, 1.0, smoothstep(-1.0, 0.8, h));
+
+  vec3 color = uBase * (0.015 + 0.45 * NdotL * NdotL * atten) * cavity;
+  color += mix(uBase, uHighlight, 0.5) * pow(NdotH, 14.0) * 0.45 * atten * cavity;
+  color += uHighlight * pow(NdotH, 90.0) * 1.1 * atten;
+
+  // \u7EBF\u5F62\u706F\u5E26\u5728\u8936\u76B1\u4E0A\u5F62\u6210\u7684\u7F0E\u9762\u4EAE\u7EBF
+  vec3 Rf = reflect(-V, n);
+  vec2 toL = (uPointer - frag) / minRes;
+  float a = -0.5 + 0.3 * sin(t * 0.13);
+  vec2 dir = vec2(cos(a), sin(a));
+  float s = dot(Rf.xy, dir) - dot(toL, dir) * 1.1;
+  color += uHighlight * (exp(-s * s / 0.004) * 0.9 + exp(-s * s / 0.08) * 0.12) * (0.4 + atten) * cavity;
+  color += mix(uBase, uHighlight, 0.3) * fres * 0.25 * cavity;
+
+  vec2 vc = frag / uResolution - 0.5;
+  float vig = dot(vc, vc);
+
+  if (uScheme > 0.5) {
+    // \u6D45\u8272\uFF1A\u5148\u8272\u8C03\u6620\u5C04\uFF0C\u518D\u505A\u4EAE\u6697\u955C\u50CF\uFF0C\u4FDD\u7559\u8272\u76F8 \u2014\u2014 \u6DF1\u5E95\u4EAE\u7EB9\u7FFB\u8F6C\u4E3A\u6D45\u5E95\u6DF1\u7EB9
+    vec3 c = pow(aces(color * 1.1), vec3(1.0 / 2.2));
+    float lum = dot(c, vec3(0.2126, 0.7152, 0.0722));
+    color = clamp(c + (1.0 - 2.0 * lum), 0.0, 1.0) * (1.0 - vig * 0.35);
+  } else {
+    color *= 1.0 - vig * 1.2;
+    color = pow(aces(color * 1.1), vec3(1.0 / 2.2));
+  }
+
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function SilkWaves({
+  children,
+  className,
+  color = "#9a6424",
+  highlightColor = "#ffe3b0",
+  folds = 1,
+  speed = 1,
+  interactive = true
+}) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER11,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform("uBase"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uHighlight"), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform("uFolds"), Math.max(0.2, folds));
+      gl.uniform1f(uniform("uScheme"), scheme === "light" ? 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("elyri-silk-waves", className),
+      "data-scheme": scheme,
+      style: { "--elyri-silk-waves-color": color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-silk-waves__canvas", "aria-hidden": "true" }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-silk-waves__content", children })
+      ]
+    }
+  );
+}
+var TRAIL = 24;
+var TRAIL_STEP_MS = 40;
+var TRAIL_FADE_S = 1.6;
+var trailData = new Float32Array(TRAIL * 3);
+var FRAGMENT_SHADER12 = `
+precision highp float;
+
+#define TRAIL ${TRAIL}
+#define PI 3.14159265
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uBase;
+uniform vec3 uSheen;
+uniform float uFolds;
+uniform float uFuzz;
+uniform float uVignette;
+uniform vec3 uTrail[TRAIL];
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+// \u5706\u6DA6\u7684\u8936\u80CC + \u6536\u7D27\u7684\u6298\u75D5\uFF1A|sin| \u5728\u96F6\u70B9\u5904\u5F62\u6210 V \u5F62\u8C37\uFF0Ck \u63A7\u5236\u8C37\u5E95\u9510\u5EA6
+float fold(float s, float k) {
+  return sqrt(s * s + k);
+}
+
+float drape(vec2 p, float t) {
+  // \u8936\u76B1\u6CBF x \u5206\u5E03\u3001\u987A y \u5782\u4E0B\uFF0C\u5E76\u968F\u9AD8\u5EA6\u7F13\u6162\u6446\u52A8
+  float sway = 0.28 * sin(p.y * 0.5 + t * 0.3) + 0.12 * sin(p.y * 1.15 - t * 0.23 + p.x * 0.3);
+  float x = p.x + sway;
+  float s1 = sin(x * 1.35 + 0.6 * sin(x * 0.37 + t * 0.08));
+  float s2 = sin(x * 2.7 + p.y * 0.28 - t * 0.18 + 1.3);
+  float h = 0.62 * fold(s1, 0.012) + 0.26 * fold(s2, 0.03);
+  // \u8936\u80CC\u4E0A\u7684\u659C\u5411\u7EC6\u76B1
+  h += 0.05 * sin(p.x * 4.0 - p.y * 5.5 + t * 0.25) * s1 * s1;
+  h += 0.25 * noise(p * 0.5 + vec2(t * 0.04, -t * 0.03));
+  return h;
+}
+
+float pressAt(vec2 frag, float minRes) {
+  float s = 0.0;
+  for (int i = 0; i < TRAIL - 1; i++) {
+    vec3 a = uTrail[i];
+    vec3 b = uTrail[i + 1];
+    float w = min(a.z, b.z);
+    if (w <= 0.0) continue;
+    vec2 pa = frag - a.xy;
+    vec2 ba = b.xy - a.xy;
+    float k = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-3), 0.0, 1.0);
+    vec2 d = (pa - ba * k) / minRes;
+    s = max(s, w * exp(-dot(d, d) * 600.0));
+  }
+  return s;
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  vec2 uv = frag / minRes;
+  float t = uTime;
+
+  // \u659C\u5411\u7EA6 16\xB0 \u7684\u5782\u5760
+  mat2 rot = mat2(0.96, 0.28, -0.28, 0.96);
+  vec2 p = rot * uv * 2.2 * uFolds;
+
+  // \u4E2D\u5FC3\u5DEE\u5206\u6C42\u6CD5\u7EBF\uFF0C\u6B65\u957F\u8DB3\u591F\u5C0F\u4EE5\u4FDD\u7559\u6298\u75D5\u7684\u9510\u5229\u8FB9\u7F18
+  float e = 0.004;
+  vec2 ex = vec2(e, 0.0);
+  vec2 ey = vec2(0.0, e);
+  float h = drape(p, t);
+  vec2 grad = vec2(drape(p + ex, t) - drape(p - ex, t), drape(p + ey, t) - drape(p - ey, t)) / (2.0 * e);
+  // \u68AF\u5EA6\u8F6C\u56DE\u5C4F\u5E55\u5750\u6807\u7CFB
+  grad = grad * rot;
+  vec3 n = normalize(vec3(-grad * 0.75, 1.0));
+  float NdotV = max(n.z, 1e-3);
+
+  float pressed = pressAt(frag, minRes);
+  // \u7ED2\u6BDB\uFF1A\u50CF\u7D20\u7EA7\u7684\u7EA4\u7EF4\u4EAE\u70B9\uFF0C\u6CBF\u5782\u5760\u65B9\u5411\u7565\u62C9\u957F\uFF1B\u5927\u5757\u788E\u7ED2\u660E\u6697\u4E0E\u4E4B\u540C\u6B65\u53D7 uFuzz \u63A7\u5236
+  vec2 fp = rot * frag;
+  float fiber = 0.55 * hash(floor(fp)) + 0.45 * hash(floor(vec2(fp.x * 0.5, fp.y * 0.2)) + 31.0);
+  float nap = 1.0 + (noise(p * 0.9 + 3.1) - 0.5) * 0.7 * uFuzz;
+  float fuzz = mix(1.0, 0.45 + 1.1 * fiber, uFuzz);
+  float ao = mix(0.4, 1.0, smoothstep(0.1, 0.8, h));
+
+  // \u4E3B\u5149\uFF1A\u5DE6\u4E0A\u65B9\u56FA\u5B9A\u67D4\u5149\uFF0C\u4FDD\u8BC1\u5F62\u4F53\u7A33\u5B9A\u53EF\u8BFB\uFF1B\u8F85\u5149\uFF1A\u8DDF\u968F\u6307\u9488\u7684\u70B9\u5149
+  vec2 ptr = uPointer / minRes;
+  vec2 toPtr = ptr - uv;
+  vec3 lights[2];
+  lights[0] = normalize(vec3(-0.45, -0.55, 0.7));
+  lights[1] = normalize(vec3(toPtr, 0.55));
+  float power[2];
+  power[0] = 1.5;
+  power[1] = 1.6 / (1.0 + 3.0 * dot(toPtr, toPtr));
+
+  // Charlie \u7ED2\u9762\u5206\u5E03\uFF1A\u6B63\u5BF9\u5149\u5904\u5438\u5149\uFF0C\u63A0\u5C04\u89D2\u6563\u5C04\u51FA\u67D4\u5149
+  const float INV_A = 1.0 / 0.38;
+  vec3 color = uBase * 0.03 * ao;
+  for (int i = 0; i < 2; i++) {
+    vec3 L = lights[i];
+    vec3 H = normalize(L + vec3(0.0, 0.0, 1.0));
+    float NdotL = max(dot(n, L), 0.0);
+    float NdotH = max(dot(n, H), 0.0);
+    float sin2 = max(1.0 - NdotH * NdotH, 0.0078125);
+    float D = (2.0 + INV_A) * pow(sin2, INV_A * 0.5) / (2.0 * PI);
+    float vis = 1.0 / (4.0 * (NdotL + NdotV - NdotL * NdotV) + 1e-3);
+    vec3 diffuse = uBase * (0.08 + 0.55 * NdotL) * ao;
+    vec3 sheen = uSheen * D * vis * NdotL * nap * mix(fuzz, 1.0, pressed) * (1.0 - 0.85 * pressed);
+    // \u538B\u5012\u7684\u7ED2\u6BDB\uFF1A\u987A\u6BDB\u65B9\u5411\u51FA\u73B0\u4E00\u70B9\u7F0E\u9762\u822C\u7684\u5149\u6CFD
+    vec3 gloss = mix(uBase, uSheen, 0.6) * pow(NdotH, 40.0) * 0.35 * pressed;
+    color += (diffuse * (1.0 - 0.3 * pressed) + sheen + gloss) * power[i];
+  }
+
+  vec2 vc = frag / uResolution - 0.5;
+  color *= max(1.0 - dot(vc, vc) * 1.2 * uVignette, 0.0);
+  color = pow(aces(color * 1.2), vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function Velvet({
+  children,
+  className,
+  color = "#6a1230",
+  sheenColor = "#ffb3c8",
+  folds = 1,
+  fuzz = 0.4,
+  vignette = 0.5,
+  speed = 1,
+  interactive = true
+}) {
+  const trailRef = react.useRef([]);
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER12,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      const now = performance.now();
+      trailData.fill(0);
+      trailRef.current.forEach((point, i) => {
+        const life = Math.max(0, 1 - (now - point.t) / 1e3 / TRAIL_FADE_S);
+        trailData[i * 3] = point.x * dpr;
+        trailData[i * 3 + 1] = point.y * dpr;
+        trailData[i * 3 + 2] = life * life;
+      });
+      gl.uniform3fv(uniform("uBase"), hexToLinearRgb(color));
+      gl.uniform3fv(uniform("uSheen"), hexToLinearRgb(sheenColor));
+      gl.uniform1f(uniform("uFolds"), Math.max(0.2, folds));
+      gl.uniform1f(uniform("uFuzz"), Math.min(1, Math.max(0, fuzz)));
+      gl.uniform1f(uniform("uVignette"), Math.min(1, Math.max(0, vignette)));
+      gl.uniform3fv(uniform("uTrail"), trailData);
+    }
+  });
+  react.useEffect(() => {
+    trailRef.current = [];
+    if (!interactive) return;
+    const handlePointerMove = (event) => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const trail = trailRef.current;
+      const now = performance.now();
+      const last = trail[trail.length - 1];
+      if (last && now - last.t < TRAIL_STEP_MS) {
+        last.x = x;
+        last.y = y;
+        return;
+      }
+      trail.push({ x, y, t: now });
+      if (trail.length > TRAIL) trail.shift();
+    };
+    window.addEventListener("pointermove", handlePointerMove, { passive: true });
+    return () => window.removeEventListener("pointermove", handlePointerMove);
+  }, [interactive, canvasRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("elyri-velvet", className), style: { "--elyri-velvet-color": color }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-velvet__canvas", "aria-hidden": "true" }),
+    children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-velvet__content", children })
+  ] });
+}
+var DEFAULT_CHARACTERS = " .:-=+*#%@";
+var SCRAMBLE_WINDOW = 0.08;
+var FRAME_INTERVAL2 = 1e3 / 40;
+var SHIMMER_PERIOD = 4.5;
+var SHIMMER_WIDTH = 0.07;
+function AsciiImage({
+  src,
+  alt = "",
+  className,
+  columns = 100,
+  characters = DEFAULT_CHARACTERS,
+  colored = false,
+  color,
+  invert = false,
+  animated = true,
+  duration = 1200,
+  shimmer = true,
+  flicker = 0.01,
+  interactive = true,
+  radius = 90
+}) {
+  const rootRef = react.useRef(null);
+  const canvasRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const scheme = useColorScheme();
+  const [image, setImage] = react.useState(null);
+  const [failed, setFailed] = react.useState(false);
+  const [width, setWidth] = react.useState(0);
+  const [inView, setInView] = react.useState(false);
+  const playedRef = react.useRef(false);
+  react.useEffect(() => {
+    let disposed = false;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.decoding = "async";
+    img.onload = () => {
+      if (disposed) return;
+      const probe = document.createElement("canvas").getContext("2d");
+      try {
+        probe?.drawImage(img, 0, 0, 1, 1);
+        probe?.getImageData(0, 0, 1, 1);
+      } catch {
+        setFailed(true);
+        return;
+      }
+      setFailed(false);
+      setImage(img);
+    };
+    img.onerror = () => {
+      if (!disposed) setFailed(true);
+    };
+    img.src = src;
+    return () => {
+      disposed = true;
+    };
+  }, [src]);
+  react.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const resize = new ResizeObserver(([entry]) => setWidth(Math.round(entry.contentRect.width)));
+    const intersection = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting));
+    resize.observe(root);
+    intersection.observe(root);
+    return () => {
+      resize.disconnect();
+      intersection.disconnect();
+    };
+  }, []);
+  react.useEffect(() => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!root || !canvas || !ctx || !image || !width || !image.naturalWidth) return;
+    const style2 = getComputedStyle(root);
+    const ramp = Array.from(characters || DEFAULT_CHARACTERS);
+    const cols = Math.min(400, Math.max(8, Math.round(columns)));
+    const font = (size) => `${style2.fontWeight} ${size}px ${style2.fontFamily}`;
+    ctx.font = font(100);
+    const cellW = width / cols;
+    const fontSize = cellW * 100 / ctx.measureText("M").width;
+    const cellH = fontSize;
+    const rows = Math.max(1, Math.round(cols * image.naturalHeight / image.naturalWidth * (cellW / cellH)));
+    const height = rows * cellH;
+    const sampler = document.createElement("canvas");
+    sampler.width = cols;
+    sampler.height = rows;
+    const sctx = sampler.getContext("2d", { willReadFrequently: true });
+    if (!sctx) return;
+    sctx.imageSmoothingQuality = "high";
+    sctx.drawImage(image, 0, 0, cols, rows);
+    let data;
+    try {
+      data = sctx.getImageData(0, 0, cols, rows).data;
+    } catch {
+      return;
+    }
+    const light = scheme === "light";
+    const flip = light !== invert;
+    const cells = [];
+    for (let i = 0; i < cols * rows; i++) {
+      const r = data[i * 4];
+      const g = data[i * 4 + 1];
+      const b = data[i * 4 + 2];
+      const a = data[i * 4 + 3] / 255;
+      const lum = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+      const glyph = Math.min(ramp.length - 1, Math.floor((flip ? 1 - lum : lum) * a * ramp.length));
+      if (!ramp[glyph].trim()) continue;
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      cells.push({
+        x: col * cellW,
+        y: row * cellH,
+        glyph,
+        r,
+        g,
+        b,
+        // 自上而下显现，并带少许随机错落
+        threshold: row / rows * (1 - SCRAMBLE_WINDOW - 0.2) + Math.random() * 0.2,
+        diagonal: (col / cols + row / rows) / 2
+      });
+    }
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    canvas.style.height = `${height}px`;
+    const noise = ramp.filter((char) => char.trim());
+    const fill = style2.getPropertyValue("--elyri-ascii-color").trim() || style2.color;
+    const highlight = light ? 0 : 255;
+    const lift = Math.min(3, ramp.length - 1);
+    const flickerRate = Math.min(1, Math.max(0, flicker));
+    const reach = Math.max(1, radius);
+    const motion = !prefersReducedMotion;
+    const lens = motion && interactive;
+    const pointer = { x: 0, y: 0, strength: 0, target: 0, tx: 0, ty: 0 };
+    const draw = (progress, time) => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      ctx.font = font(fontSize);
+      ctx.textBaseline = "top";
+      ctx.fillStyle = fill;
+      const band = motion && shimmer ? time / SHIMMER_PERIOD % 1 * 1.8 - 0.4 : -10;
+      for (const cell of cells) {
+        let char = ramp[cell.glyph];
+        if (progress < 1) {
+          if (progress < cell.threshold) continue;
+          if (progress < cell.threshold + SCRAMBLE_WINDOW) char = noise[Math.floor(Math.random() * noise.length)];
+        }
+        const offset = (cell.diagonal - band) / SHIMMER_WIDTH;
+        let boost = offset > -3 && offset < 3 ? Math.exp(-offset * offset) : 0;
+        let x = cell.x;
+        let y = cell.y;
+        if (pointer.strength > 0.01) {
+          const dx = x + cellW / 2 - pointer.x;
+          const dy = y + cellH / 2 - pointer.y;
+          const d = Math.hypot(dx, dy);
+          if (d < reach) {
+            const t = (1 - d / reach) * pointer.strength;
+            const push = t * t * cellW * 2.2;
+            if (d > 0.01) {
+              x += dx / d * push;
+              y += dy / d * push;
+            }
+            boost = Math.max(boost, t);
+            if (Math.random() < t * 0.35) char = noise[Math.floor(Math.random() * noise.length)];
+          }
+        }
+        if (boost > 0.05) char = ramp[Math.min(ramp.length - 1, cell.glyph + Math.round(boost * lift))];
+        if (flickerRate && Math.random() < flickerRate) char = noise[Math.floor(Math.random() * noise.length)];
+        ctx.globalAlpha = 0.82 + 0.18 * boost;
+        if (colored) {
+          const mix = boost * 0.6;
+          ctx.fillStyle = `rgb(${cell.r + (highlight - cell.r) * mix},${cell.g + (highlight - cell.g) * mix},${cell.b + (highlight - cell.b) * mix})`;
+        }
+        ctx.fillText(char, x, y);
+      }
+      ctx.globalAlpha = 1;
+    };
+    if (!motion) {
+      draw(1, 0);
+      return;
+    }
+    const reveal = animated && !playedRef.current;
+    if (!inView) {
+      draw(reveal ? 0 : 1, 0);
+      return;
+    }
+    const continuous = shimmer || flickerRate > 0 || lens;
+    const start = performance.now();
+    let frame = 0;
+    let last = 0;
+    const tick = (now) => {
+      frame = requestAnimationFrame(tick);
+      if (now - last < FRAME_INTERVAL2) return;
+      const dt = last ? Math.min((now - last) / 1e3, 0.1) : 0;
+      last = now;
+      const progress = reveal ? Math.min(1, (now - start) / Math.max(1, duration)) : 1;
+      if (progress >= 1) playedRef.current = true;
+      const ease = 1 - Math.exp(-dt * 12);
+      pointer.x += (pointer.tx - pointer.x) * ease;
+      pointer.y += (pointer.ty - pointer.y) * ease;
+      pointer.strength += (pointer.target - pointer.strength) * (1 - Math.exp(-dt * 6));
+      draw(progress, (now - start) / 1e3);
+      if (!continuous && progress >= 1) cancelAnimationFrame(frame);
+    };
+    frame = requestAnimationFrame(tick);
+    const handlePointerMove = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const inside = x >= -reach && y >= -reach && x <= rect.width + reach && y <= rect.height + reach;
+      if (inside && pointer.target === 0 && pointer.strength < 0.01) {
+        pointer.x = x;
+        pointer.y = y;
+      }
+      pointer.tx = x;
+      pointer.ty = y;
+      pointer.target = inside ? 1 : 0;
+    };
+    const handlePointerLeave = () => {
+      pointer.target = 0;
+    };
+    if (lens) {
+      window.addEventListener("pointermove", handlePointerMove, { passive: true });
+      document.documentElement.addEventListener("pointerleave", handlePointerLeave);
+    }
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("pointermove", handlePointerMove);
+      document.documentElement.removeEventListener("pointerleave", handlePointerLeave);
+    };
+  }, [
+    image,
+    width,
+    columns,
+    characters,
+    colored,
+    color,
+    invert,
+    scheme,
+    animated,
+    duration,
+    shimmer,
+    flicker,
+    interactive,
+    radius,
+    inView,
+    prefersReducedMotion
+  ]);
+  const style = color ? { "--elyri-ascii-color": color } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: cn("elyri-ascii-image", className), style, children: failed ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "elyri-ascii-image__fallback", src, alt }) : /* @__PURE__ */ jsxRuntime.jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "elyri-ascii-image__canvas",
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      "aria-hidden": alt ? void 0 : true
+    }
+  ) });
+}
+function GradientText({ children, className, colors, animated = true, speed = 0.5 }) {
+  const style = {
+    ...colors?.length ? { "--elyri-gradient-colors": colors.join(", ") } : null,
+    "--elyri-gradient-speed": speed
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("elyri-gradient-text", animated && "elyri-gradient-text--animated", className), style, children });
+}
+function Marquee({
+  children,
+  className,
+  direction = "left",
+  duration = 20,
+  repeat = 2,
+  gap = 0,
+  infinite = true,
+  pauseOnHover = true
+}) {
+  const rootRef = react.useRef(null);
+  const trackRef = react.useRef(null);
+  const [paused, setPaused] = react.useState(false);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const minCopies = Math.max(2, Math.floor(repeat));
+  const [copies, setCopies] = react.useState(minCopies);
+  const vertical = direction === "up" || direction === "down";
+  const reverse = direction === "right" || direction === "down";
+  react.useEffect(() => {
+    const root = rootRef.current;
+    const track = trackRef.current;
+    if (!root || !track) return;
+    const measure = () => {
+      const first = track.firstElementChild;
+      if (!first) return;
+      const copySize = vertical ? first.offsetHeight : first.offsetWidth;
+      const rootSize = vertical ? root.clientHeight : root.clientWidth;
+      const trackSize = vertical ? track.offsetHeight : track.offsetWidth;
+      if (!copySize) return;
+      if (vertical && rootSize >= trackSize) {
+        setCopies(minCopies);
+        return;
+      }
+      setCopies(Math.max(minCopies, Math.ceil((rootSize + copySize) / copySize)));
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    if (track.firstElementChild) observer.observe(track.firstElementChild);
+    return () => observer.disconnect();
+  }, [vertical, minCopies]);
+  react.useEffect(() => {
+    const node = rootRef.current;
+    if (!node || prefersReducedMotion) return;
+    let inView = true;
+    const sync = () => setPaused(!inView || document.hidden);
+    const observer = new IntersectionObserver(([entry]) => {
+      inView = entry.isIntersecting;
+      sync();
+    });
+    observer.observe(node);
+    document.addEventListener("visibilitychange", sync);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", sync);
+    };
+  }, [prefersReducedMotion]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: cn(
+        "elyri-marquee",
+        vertical && "elyri-marquee--vertical",
+        reverse && "elyri-marquee--reverse",
+        !infinite && "elyri-marquee--once",
+        paused && "elyri-marquee--paused",
+        pauseOnHover && "elyri-marquee--pausable",
+        prefersReducedMotion && "elyri-marquee--static",
+        className
+      ),
+      style: {
+        "--elyri-marquee-duration": `${duration}s`,
+        "--elyri-marquee-repeat": copies,
+        "--elyri-marquee-gap": `${gap}px`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: trackRef, className: "elyri-marquee__track", children: Array.from({ length: copies }, (_, index) => (
+        // 复制份仅用于视觉衔接，对辅助技术隐藏，避免重复朗读
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "elyri-marquee__copy", "aria-hidden": index > 0 ? true : void 0, children }, index)
+      )) })
+    }
+  );
+}
+var FRICTION = 0.86;
+function ParticleText({
+  children,
+  className,
+  color,
+  particleSize = 2,
+  gap = 3,
+  radius = 80,
+  force = 1,
+  assemble = true
+}) {
+  const rootRef = react.useRef(null);
+  const canvasRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const scheme = useColorScheme();
+  const [ready, setReady] = react.useState(false);
+  const particlesRef = react.useRef([]);
+  const padRef = react.useRef(0);
+  const optionsRef = react.useRef({ particleSize, force });
+  const wakeRef = react.useRef(null);
+  react.useEffect(() => {
+    optionsRef.current = { particleSize, force };
+    wakeRef.current?.();
+  }, [particleSize, force, color, scheme]);
+  react.useEffect(() => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!root || !canvas || !ctx) return;
+    const style2 = getComputedStyle(root);
+    const interactive = radius > 0 && !prefersReducedMotion;
+    const pointer = { x: 0, y: 0, active: false };
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    let visible = false;
+    let running = false;
+    let frame = 0;
+    let buildFrame = 0;
+    let last = 0;
+    let lastColor = "";
+    const build = () => {
+      const w = root.offsetWidth;
+      const h = root.offsetHeight;
+      if (!w || !h) return;
+      const pad = Math.ceil(Math.max(radius, 0) + 16);
+      dpr = Math.min(window.devicePixelRatio || 1, 2);
+      width = w + pad * 2;
+      height = h + pad * 2;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      canvas.style.left = canvas.style.top = `${-pad}px`;
+      const sampler = document.createElement("canvas");
+      sampler.width = Math.ceil(w);
+      sampler.height = Math.ceil(h);
+      const sctx = sampler.getContext("2d", { willReadFrequently: true });
+      if (!sctx) return;
+      sctx.font = `${style2.fontStyle} ${style2.fontWeight} ${style2.fontSize} ${style2.fontFamily}`;
+      if ("letterSpacing" in sctx) sctx.letterSpacing = style2.letterSpacing === "normal" ? "0px" : style2.letterSpacing;
+      const align = style2.textAlign;
+      const alignRight = align === "right" || align === "end";
+      sctx.textAlign = align === "center" ? "center" : alignRight ? "right" : "left";
+      const originX = align === "center" ? w / 2 : alignRight ? w : 0;
+      const lines = children.split("\n");
+      const lineHeight = h / lines.length;
+      lines.forEach((line, index) => {
+        const m = sctx.measureText(line);
+        const ascent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
+        const descent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+        sctx.fillText(line, originX, index * lineHeight + (lineHeight - ascent - descent) / 2 + ascent);
+      });
+      const data = sctx.getImageData(0, 0, sampler.width, sampler.height).data;
+      const step = Math.max(1, gap);
+      const targets = [];
+      for (let y = step / 2; y < sampler.height; y += step) {
+        for (let x = step / 2; x < sampler.width; x += step) {
+          if (data[(Math.floor(y) * sampler.width + Math.floor(x)) * 4 + 3] > 128) targets.push([x + pad, y + pad]);
+        }
+      }
+      for (let i = targets.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [targets[i], targets[j]] = [targets[j], targets[i]];
+      }
+      const prev = particlesRef.current;
+      const shift = pad - padRef.current;
+      const scatter = assemble && !prefersReducedMotion && prev.length === 0;
+      particlesRef.current = targets.map(([tx, ty], index) => {
+        const k = 0.03 + Math.random() * 0.04;
+        if (prefersReducedMotion) return { x: tx, y: ty, vx: 0, vy: 0, tx, ty, k };
+        const source = prev[index] ?? (prev.length ? prev[Math.floor(Math.random() * prev.length)] : null);
+        if (source) return { x: source.x + shift, y: source.y + shift, vx: source.vx, vy: source.vy, tx, ty, k };
+        if (scatter) return { x: Math.random() * width, y: Math.random() * height, vx: 0, vy: 0, tx, ty, k };
+        return { x: tx, y: ty, vx: 0, vy: 0, tx, ty, k };
+      });
+      padRef.current = pad;
+      lastColor = "";
+      setReady(true);
+      wake();
+    };
+    const tick = (now) => {
+      const dt = Math.min((now - last) / 16.667, 3);
+      last = now;
+      const { particleSize: size, force: strength } = optionsRef.current;
+      const damping = Math.pow(FRICTION, dt);
+      const r2 = radius * radius;
+      const push = Math.max(0, strength) * 3 * dt;
+      let active = false;
+      for (const p of particlesRef.current) {
+        p.vx += (p.tx - p.x) * p.k * dt;
+        p.vy += (p.ty - p.y) * p.k * dt;
+        if (pointer.active) {
+          const dx = p.x - pointer.x;
+          const dy = p.y - pointer.y;
+          const d2 = dx * dx + dy * dy;
+          if (d2 < r2 && d2 > 0.01) {
+            const d = Math.sqrt(d2);
+            const f = (1 - d / radius) * push;
+            p.vx += dx / d * f;
+            p.vy += dy / d * f;
+          }
+        }
+        p.vx *= damping;
+        p.vy *= damping;
+        p.x += p.vx * dt;
+        p.y += p.vy * dt;
+        if (!active && Math.abs(p.vx) + Math.abs(p.vy) + Math.abs(p.tx - p.x) + Math.abs(p.ty - p.y) > 0.05) {
+          active = true;
+        }
+      }
+      const fill = style2.getPropertyValue("--elyri-particle-color").trim() || style2.color;
+      if (fill !== lastColor) {
+        lastColor = fill;
+        active = true;
+      }
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = fill;
+      const half = size / 2;
+      for (const p of particlesRef.current) ctx.fillRect(p.x - half, p.y - half, size, size);
+      if (visible && (active || pointer.active)) {
+        frame = requestAnimationFrame(tick);
+      } else {
+        running = false;
+      }
+    };
+    function wake() {
+      if (running || !visible) return;
+      running = true;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    }
+    wakeRef.current = wake;
+    const scheduleBuild = () => {
+      cancelAnimationFrame(buildFrame);
+      buildFrame = requestAnimationFrame(build);
+    };
+    const handlePointerMove = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const inside = x >= 0 && y >= 0 && x <= rect.width && y <= rect.height;
+      if (!inside && !pointer.active) return;
+      pointer.x = x;
+      pointer.y = y;
+      pointer.active = inside;
+      wake();
+    };
+    const handlePointerLeave = () => {
+      pointer.active = false;
+    };
+    const intersection = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) wake();
+    });
+    const resize = new ResizeObserver(scheduleBuild);
+    intersection.observe(root);
+    resize.observe(root);
+    document.fonts?.addEventListener("loadingdone", scheduleBuild);
+    if (interactive) {
+      window.addEventListener("pointermove", handlePointerMove, { passive: true });
+      document.documentElement.addEventListener("pointerleave", handlePointerLeave);
+    }
+    build();
+    return () => {
+      cancelAnimationFrame(frame);
+      cancelAnimationFrame(buildFrame);
+      intersection.disconnect();
+      resize.disconnect();
+      document.fonts?.removeEventListener("loadingdone", scheduleBuild);
+      window.removeEventListener("pointermove", handlePointerMove);
+      document.documentElement.removeEventListener("pointerleave", handlePointerLeave);
+      wakeRef.current = null;
+    };
+  }, [children, gap, radius, assemble, prefersReducedMotion]);
+  const style = color ? { "--elyri-particle-color": color } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: rootRef,
+      className: cn("elyri-particle-text", ready && "elyri-particle-text--ready", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-particle-text__label", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "elyri-particle-text__canvas", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+var CHAR_STAGGER = 30;
+function RotatingText({
+  words,
+  className,
+  interval = 2500,
+  duration = 500,
+  variant = "flip"
+}) {
+  const [index, setIndex] = react.useState(0);
+  const [leaving, setLeaving] = react.useState(null);
+  const [width, setWidth] = react.useState();
+  const wordRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [prevWords, setPrevWords] = react.useState(words);
+  if (prevWords !== words) {
+    setPrevWords(words);
+    setIndex(0);
+    setLeaving(null);
+  }
+  const count = words.length;
+  const current = words[index] ?? words[0] ?? "";
+  react.useEffect(() => {
+    if (count < 2) return;
+    const timer = window.setInterval(() => {
+      setLeaving(prefersReducedMotion ? null : current);
+      setIndex((value) => (value + 1) % count);
+    }, interval);
+    return () => window.clearInterval(timer);
+  }, [count, current, interval, prefersReducedMotion]);
+  react.useEffect(() => {
+    if (leaving == null) return;
+    const timer = window.setTimeout(() => setLeaving(null), duration + CHAR_STAGGER * leaving.length);
+    return () => window.clearTimeout(timer);
+  }, [leaving, duration]);
+  react.useLayoutEffect(() => {
+    const word = wordRef.current;
+    if (word) setWidth(word.offsetWidth);
+  }, [current]);
+  const style = {
+    "--elyri-rotating-text-duration": `${duration}ms`,
+    width: width != null ? `${width}px` : void 0
+  };
+  const renderChars = (word) => Array.from(word).map((char, charIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "elyri-rotating-text__char",
+      style: {
+        "--elyri-rotating-text-index": charIndex,
+        "--elyri-rotating-text-stagger": `${CHAR_STAGGER}ms`
+      },
+      "aria-hidden": "true",
+      children: char === " " ? "\xA0" : char
+    },
+    `${char}-${charIndex}`
+  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn("elyri-rotating-text", variant !== "flip" && `elyri-rotating-text--${variant}`, className),
+      style,
+      "aria-label": current,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ref: wordRef, className: "elyri-rotating-text__word elyri-rotating-text__word--entering", children: renderChars(current) }),
+        leaving != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-rotating-text__word elyri-rotating-text__word--leaving", "aria-hidden": "true", children: renderChars(leaving) })
+      ]
+    }
+  );
+}
+var DEFAULT_CHARACTERS2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#";
+var isSpace = (char) => /\s/.test(char);
+function ScrambleText({
+  children,
+  className,
+  trigger = "view",
+  speed = 40,
+  stagger = 60,
+  characters = DEFAULT_CHARACTERS2,
+  accentColor,
+  glow,
+  once = true
+}) {
+  const elementRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [runId, setRunId] = react.useState(0);
+  const [frame, setFrame] = react.useState(null);
+  const chars = react.useMemo(() => Array.from(children), [children]);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion || trigger !== "view") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        setRunId((id) => id + 1);
+        if (once) observer.disconnect();
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [trigger, once, prefersReducedMotion]);
+  react.useEffect(() => {
+    if (runId === 0 || prefersReducedMotion) return;
+    const pool = Array.from(characters || DEFAULT_CHARACTERS2);
+    const start = performance.now();
+    const step = () => {
+      const resolved = Math.floor((performance.now() - start) / stagger);
+      if (resolved >= chars.length) {
+        setFrame(null);
+        return true;
+      }
+      setFrame({
+        resolved,
+        chars: chars.map(
+          (char, index) => index < resolved || isSpace(char) ? char : pool[Math.floor(Math.random() * pool.length)]
+        )
+      });
+      return false;
+    };
+    if (step()) return;
+    const timer = setInterval(() => {
+      if (step()) clearInterval(timer);
+    }, speed);
+    return () => clearInterval(timer);
+  }, [runId, chars, characters, speed, stagger, prefersReducedMotion]);
+  const replay = () => {
+    if (!frame && !prefersReducedMotion) setRunId((id) => id + 1);
+  };
+  const hoverHandlers = trigger === "hover" ? { onPointerEnter: replay, onFocus: replay } : null;
+  const style = {
+    ...accentColor ? { "--elyri-scramble-accent": accentColor } : null,
+    ...glow !== void 0 ? { "--elyri-scramble-glow": Math.max(0, glow) } : null
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: elementRef, className: cn("elyri-scramble-text", className), style, ...hoverHandlers, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-scramble-text__sr", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: chars.map((char, index) => {
+      const isScrambled = frame !== null && index >= frame.resolved && !isSpace(char);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: cn("elyri-scramble-text__char", isScrambled && "elyri-scramble-text__char--scrambled"),
+          children: [
+            char,
+            isScrambled && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-scramble-text__glyph", children: frame.chars[index] })
+          ]
+        },
+        index
+      );
+    }) })
+  ] });
+}
+function ScrollMarquee({
+  children,
+  className,
+  direction = "left",
+  speed = 0.5,
+  rows = 1,
+  repeat = 6,
+  infinite = true
+}) {
+  const rootRef = react.useRef(null);
+  const firstCopyRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  react.useEffect(() => {
+    const root = rootRef.current;
+    if (!root || prefersReducedMotion) return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const copyWidth = firstCopyRef.current?.offsetWidth ?? 0;
+      if (!copyWidth) return;
+      const offset = window.scrollY * speed;
+      const shift = infinite ? -(offset % copyWidth) : -Math.min(offset, copyWidth);
+      root.style.setProperty("--elyri-scroll-marquee-shift", `${shift}px`);
+      root.style.setProperty("--elyri-scroll-marquee-copy-width", `${copyWidth}px`);
+    };
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [prefersReducedMotion, speed, rows, repeat, infinite]);
+  const rowCount = Math.max(1, Math.floor(rows));
+  const copyCount = Math.max(1, Math.floor(repeat));
+  const baseDirection = direction === "left" ? 1 : -1;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: cn("elyri-scroll-marquee", className), children: Array.from({ length: rowCount }, (_, rowIndex) => {
+    const dir = rowIndex % 2 === 0 ? baseDirection : -baseDirection;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "elyri-scroll-marquee__row",
+        style: {
+          "--elyri-scroll-marquee-dir": dir,
+          // 向右滚动时先整体左移一份内容宽度，避免左侧露白
+          "--elyri-scroll-marquee-base": dir === 1 ? 0 : -1
+        },
+        children: Array.from({ length: copyCount }, (_2, copyIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: rowIndex === 0 && copyIndex === 0 ? firstCopyRef : void 0,
+            className: "elyri-scroll-marquee__copy",
+            children
+          },
+          copyIndex
+        ))
+      },
+      rowIndex
+    );
+  }) });
+}
+var LEAD_RATIO = 0.65;
+var segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "word" }) : null;
+var splitWords = (text) => {
+  if (!segmenter) return splitTextUnits(text, "word");
+  const segments = [];
+  let index = 0;
+  let wordPart = 0;
+  let spacePart = 0;
+  let pending = "";
+  for (const { segment: value, isWordLike } of segmenter.segment(text)) {
+    if (/^\s+$/.test(value)) {
+      segments.push({ kind: "space", key: `space-${spacePart++}`, value });
+      continue;
+    }
+    if (isWordLike) {
+      segments.push({ kind: "word", key: `word-${wordPart++}`, units: [{ char: pending + value, index: index++ }] });
+      pending = "";
+      continue;
+    }
+    const last = segments[segments.length - 1];
+    if (!pending && last?.kind === "word") {
+      last.units[0].char += value;
+    } else {
+      pending += value;
+    }
+  }
+  if (pending) {
+    segments.push({ kind: "word", key: `word-${wordPart}`, units: [{ char: pending, index }] });
+  }
+  return segments;
+};
+function ScrollReveal({
+  children,
+  className,
+  by = "word",
+  height = 280,
+  dimOpacity = 0.15,
+  blur = 0
+}) {
+  const rootRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const segments = react.useMemo(
+    () => by === "word" ? splitWords(children) : splitTextUnits(children, "char"),
+    [children, by]
+  );
+  const count = react.useMemo(
+    () => segments.reduce((total, segment) => segment.kind === "word" ? total + segment.units.length : total, 0),
+    [segments]
+  );
+  react.useEffect(() => {
+    const root = rootRef.current;
+    const content = contentRef.current;
+    if (!root || !content || prefersReducedMotion) return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const travel = content.offsetHeight;
+      if (travel <= 0) return;
+      const { clientHeight, scrollHeight, scrollTop } = root;
+      const range = scrollHeight - clientHeight;
+      if (range <= 0) {
+        root.style.setProperty("--elyri-scroll-reveal-progress", "1");
+        return;
+      }
+      const line = scrollTop + clientHeight * LEAD_RATIO;
+      const tailStart = Math.max(0, range - clientHeight);
+      const tail = Math.min(1, Math.max(0, (scrollTop - tailStart) / clientHeight));
+      const head = scrollTop >= range - 1 ? travel : line + tail * (travel - range - clientHeight * LEAD_RATIO);
+      root.style.setProperty("--elyri-scroll-reveal-progress", String(Math.min(1, Math.max(0, head / travel))));
+    };
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(update);
+    };
+    update();
+    root.addEventListener("scroll", onScroll, { passive: true });
+    const observer = new ResizeObserver(onScroll);
+    observer.observe(content);
+    return () => {
+      root.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [prefersReducedMotion, count]);
+  const style = {
+    "--elyri-scroll-reveal-height": `${height}px`,
+    "--elyri-scroll-reveal-dim": dimOpacity,
+    "--elyri-scroll-reveal-blur": `${blur}px`,
+    "--elyri-scroll-reveal-count": count
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("elyri-scroll-reveal", blur > 0 && "elyri-scroll-reveal--blur", className),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: "elyri-scroll-reveal__content", "aria-label": children, children: segments.map(
+        (segment) => segment.kind === "space" ? segment.value : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-scroll-reveal__word", children: segment.units.map((unit) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "elyri-scroll-reveal__unit",
+            style: { "--elyri-scroll-reveal-index": unit.index },
+            "aria-hidden": "true",
+            children: unit.char
+          },
+          unit.index
+        )) }, segment.key)
+      ) })
+    }
+  );
+}
+var splitText = (text, by) => {
+  let index = 0;
+  return text.split(/(\s+)/).filter(Boolean).map((part, partIndex) => {
+    if (/^\s+$/.test(part)) return { kind: "space", key: `space-${partIndex}`, value: part };
+    const units = by === "char" ? Array.from(part) : [part];
+    return {
+      kind: "word",
+      key: `word-${partIndex}`,
+      units: units.map((char) => ({ char, index: index++ }))
+    };
+  });
+};
+function SplitReveal({
+  children,
+  className,
+  by = "char",
+  delay = 0,
+  stagger = 40,
+  duration = 600,
+  distance = 24,
+  once = true
+}) {
+  const elementRef = react.useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isIntersecting, setIsIntersecting] = react.useState(false);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || prefersReducedMotion) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsIntersecting(true);
+          if (once) observer.disconnect();
+          return;
+        }
+        if (!once) setIsIntersecting(false);
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [once, prefersReducedMotion]);
+  const segments = react.useMemo(() => splitText(children, by), [children, by]);
+  const style = {
+    "--elyri-split-reveal-delay": `${delay}ms`,
+    "--elyri-split-reveal-stagger": `${stagger}ms`,
+    "--elyri-split-reveal-duration": `${duration}ms`,
+    "--elyri-split-reveal-distance": `${distance}px`
+  };
+  const isVisible = prefersReducedMotion || isIntersecting;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: elementRef,
+      className: cn("elyri-split-reveal", isVisible && "elyri-split-reveal--visible", className),
+      style,
+      children: segments.map(
+        (segment) => segment.kind === "space" ? segment.value : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-split-reveal__word", children: segment.units.map((unit) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "elyri-split-reveal__unit",
+            style: { "--elyri-split-reveal-index": unit.index },
+            children: unit.char
+          },
+          unit.index
+        )) }, segment.key)
+      )
+    }
+  );
+}
+function Typewriter({
+  children,
+  className,
+  speed = 60,
+  startDelay = 200,
+  loop = false,
+  loopDelay = 1200,
+  cursor = true
+}) {
+  const text = children;
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [count, setCount] = react.useState(0);
+  react.useEffect(() => {
+    if (prefersReducedMotion || !text) return;
+    let timer;
+    let typed = 0;
+    const typeNext = (wait) => {
+      timer = setTimeout(() => {
+        typed += 1;
+        setCount(typed);
+        if (typed < text.length) {
+          typeNext(speed);
+          return;
+        }
+        if (loop) {
+          timer = setTimeout(() => {
+            typed = 0;
+            setCount(0);
+            typeNext(speed);
+          }, loopDelay);
+        }
+      }, wait);
+    };
+    timer = setTimeout(() => {
+      typed = 0;
+      setCount(0);
+      typeNext(0);
+    }, startDelay);
+    return () => clearTimeout(timer);
+  }, [text, speed, startDelay, loop, loopDelay, prefersReducedMotion]);
+  const visible = prefersReducedMotion ? text : text.slice(0, count);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("elyri-typewriter", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-typewriter__text", children: visible }),
+    cursor && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-typewriter__cursor", "aria-hidden": "true" })
+  ] });
+}
+function WaveText({ children, className, amplitude = 6, speed = 1200, stagger = 60 }) {
+  const segments = react.useMemo(() => splitTextUnits(children, "char"), [children]);
+  const style = {
+    "--elyri-wave-text-amplitude": `${amplitude}px`,
+    "--elyri-wave-text-speed": `${speed}ms`,
+    "--elyri-wave-text-stagger": `${stagger}ms`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("elyri-wave-text", className), style, "aria-label": children, children: segments.map(
+    (segment) => segment.kind === "space" ? segment.value : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "elyri-wave-text__word", children: segment.units.map((unit) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "elyri-wave-text__unit",
+        style: { "--elyri-wave-text-index": unit.index },
+        "aria-hidden": "true",
+        children: unit.char
+      },
+      unit.index
+    )) }, segment.key)
+  ) });
+}
+
+exports.AsciiImage = AsciiImage;
+exports.Aurora = Aurora;
+exports.Caustics = Caustics;
+exports.Contours = Contours;
+exports.CountUp = CountUp;
+exports.DotField = DotField;
+exports.DragonScales = DragonScales;
+exports.FadeIn = FadeIn;
+exports.Filaments = Filaments;
+exports.FlipTiles = FlipTiles;
+exports.GradientText = GradientText;
+exports.Halo = Halo;
+exports.Magnetic = Magnetic;
+exports.Marquee = Marquee;
+exports.MeshGradient = MeshGradient;
+exports.ParticleText = ParticleText;
+exports.PixelVortex = PixelVortex;
+exports.Planet = Planet;
+exports.ReducedMotionProvider = ReducedMotionProvider;
+exports.RotatingText = RotatingText;
+exports.ScaleIn = ScaleIn;
+exports.ScrambleText = ScrambleText;
+exports.ScrollMarquee = ScrollMarquee;
+exports.ScrollReveal = ScrollReveal;
+exports.SilkWaves = SilkWaves;
+exports.SplitReveal = SplitReveal;
+exports.Spotlight = Spotlight;
+exports.Tilt = Tilt;
+exports.Typewriter = Typewriter;
+exports.Velvet = Velvet;
+exports.WaveText = WaveText;
+exports.cn = cn;
+exports.hexToLinearRgb = hexToLinearRgb;
+exports.splitTextUnits = splitTextUnits;
+exports.useColorScheme = useColorScheme;
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+exports.useShaderCanvas = useShaderCanvas;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map