@toriistudio/shader-ui 0.0.3 → 0.0.4

package/dist/index.d.mts

@@ -163,4 +163,29 @@ type EfectoProps = Omit<ComponentProps<"div">, "ref"> & {
 };
 declare function Efecto({ postProcessing, src, mouseParallax, parallaxIntensity, mediaAdjustments, cellSize, invert, colorMode, style, asciiStyle, ...wrapperProps }: EfectoProps): react_jsx_runtime.JSX.Element;
 
-export { EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, ShaderArt, type ShaderArtUniforms };
+type SnowUniforms = {
+    color: string;
+    fallSpeed: number;
+    windStrength: number;
+    turbulence: number;
+    flakeSize: number;
+    twinkleStrength: number;
+    flakeCount: number;
+};
+type SnowProps = SnowUniforms & Omit<ComponentProps<"div">, keyof SnowUniforms | "ref" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+    mouseWindInteraction?: boolean;
+};
+declare function Snow({ className, style, width, height, color, fallSpeed, windStrength, turbulence, flakeSize, twinkleStrength, flakeCount, mouseWindInteraction, ...divProps }: SnowProps): react_jsx_runtime.JSX.Element;
+
+type AnimatedDrawingSVGProps = {
+    svgMarkup: string;
+    animated?: boolean;
+    size?: number | string;
+    onAnimated?: () => void;
+    delay?: number;
+} & Omit<ComponentProps<"div">, "children">;
+declare function AnimatedDrawingSVG({ svgMarkup, animated, size, onAnimated, delay, className, style, ...divProps }: AnimatedDrawingSVGProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDrawingSVG, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, ShaderArt, type ShaderArtUniforms, Snow };

package/dist/index.d.ts

@@ -163,4 +163,29 @@ type EfectoProps = Omit<ComponentProps<"div">, "ref"> & {
 };
 declare function Efecto({ postProcessing, src, mouseParallax, parallaxIntensity, mediaAdjustments, cellSize, invert, colorMode, style, asciiStyle, ...wrapperProps }: EfectoProps): react_jsx_runtime.JSX.Element;
 
-export { EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, ShaderArt, type ShaderArtUniforms };
+type SnowUniforms = {
+    color: string;
+    fallSpeed: number;
+    windStrength: number;
+    turbulence: number;
+    flakeSize: number;
+    twinkleStrength: number;
+    flakeCount: number;
+};
+type SnowProps = SnowUniforms & Omit<ComponentProps<"div">, keyof SnowUniforms | "ref" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+    mouseWindInteraction?: boolean;
+};
+declare function Snow({ className, style, width, height, color, fallSpeed, windStrength, turbulence, flakeSize, twinkleStrength, flakeCount, mouseWindInteraction, ...divProps }: SnowProps): react_jsx_runtime.JSX.Element;
+
+type AnimatedDrawingSVGProps = {
+    svgMarkup: string;
+    animated?: boolean;
+    size?: number | string;
+    onAnimated?: () => void;
+    delay?: number;
+} & Omit<ComponentProps<"div">, "children">;
+declare function AnimatedDrawingSVG({ svgMarkup, animated, size, onAnimated, delay, className, style, ...divProps }: AnimatedDrawingSVGProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDrawingSVG, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, ShaderArt, type ShaderArtUniforms, Snow };

package/dist/index.js

@@ -30,13 +30,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AnimatedDrawingSVG: () => AnimatedDrawingSVG,
   EFECTO_ASCII_COMPONENT_DEFAULTS: () => EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS: () => EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto: () => Efecto,
   FractalFlower: () => FractalFlower,
   MenuGlitch: () => MenuGlitch,
   OranoParticles: () => OranoParticles,
-  ShaderArt: () => ShaderArt
+  ShaderArt: () => ShaderArt,
+  Snow: () => Snow
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -2111,13 +2113,561 @@ function Efecto({
     }
   );
 }
+
+// src/components/Snow.tsx
+var import_react7 = require("react");
+var THREE7 = __toESM(require("three"));
+
+// src/shaders/snow/fragment.glsl
+var fragment_default7 = "precision mediump float;\n\nuniform vec3 uColor;\n\nvarying float vAlpha;\n\nvoid main() {\n  vec2 uv = gl_PointCoord - 0.5;\n  float dist = length(uv);\n  float mask = smoothstep(0.5, 0.0, dist);\n  if (mask <= 0.01) {\n    discard;\n  }\n\n  float centerGlow = smoothstep(0.22, 0.0, dist);\n  vec3 color = mix(uColor * 1.2, uColor, centerGlow);\n\n  gl_FragColor = vec4(color, mask * vAlpha);\n}\n";
+
+// src/shaders/snow/vertex.glsl
+var vertex_default6 = "uniform float uTime;\nuniform float uFallSpeed;\nuniform float uWindStrength;\nuniform float uTurbulence;\nuniform float uSize;\nuniform float uTwinkleStrength;\nuniform vec3 uArea;\n\nattribute float aSpeed;\nattribute float aSize;\nattribute float aSeed;\n\nvarying float vAlpha;\n\nfloat wrap(float value, float size) {\n  return mod(value + size * 0.5, size) - size * 0.5;\n}\n\nvoid main() {\n  float height = uArea.y;\n  float width = uArea.x;\n  float depth = uArea.z;\n\n  float fall = uFallSpeed * (0.3 + aSpeed);\n  float droppedY = position.y - uTime * fall;\n  float wrappedY = wrap(droppedY, height);\n\n  float sway =\n      sin((wrappedY + aSeed) * 0.45 + uTime * 0.8) * uTurbulence +\n      cos(uTime * 0.35 + aSeed) * 0.15;\n  float wind = uWindStrength * (0.4 + aSpeed);\n  float displacedX = wrap(position.x + sway + wind, width);\n\n  float driftZ =\n      sin(uTime * 0.25 + aSeed * 1.7) * 0.5 +\n      cos((wrappedY + aSeed) * 0.2) * 0.4;\n  float displacedZ = wrap(position.z + driftZ, depth);\n\n  vec4 modelPosition =\n      modelMatrix * vec4(displacedX, wrappedY, displacedZ, 1.0);\n  vec4 viewPosition = viewMatrix * modelPosition;\n\n  float baseSize = mix(0.45, 1.0, aSize) * uSize;\n  float twinkle =\n      1.0 + sin(uTime * (0.6 + aSpeed) + aSeed) * uTwinkleStrength;\n  float perspective = clamp(15.0 / max(1.0, -viewPosition.z), 0.5, 3.0);\n  gl_PointSize = baseSize * twinkle * perspective;\n  gl_Position = projectionMatrix * viewPosition;\n\n  vAlpha = mix(0.35, 1.0, aSize);\n}\n";
+
+// src/components/Snow.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AREA_BOUNDS = {
+  width: 36,
+  height: 44,
+  depth: 26
+};
+function createSnowGeometry(count) {
+  const geometry = new THREE7.BufferGeometry();
+  const positions = new Float32Array(count * 3);
+  const speeds = new Float32Array(count);
+  const sizes = new Float32Array(count);
+  const seeds = new Float32Array(count);
+  for (let i = 0; i < count; i += 1) {
+    const x = (Math.random() - 0.5) * AREA_BOUNDS.width;
+    const y = (Math.random() - 0.5) * AREA_BOUNDS.height;
+    const z = (Math.random() - 0.5) * AREA_BOUNDS.depth;
+    positions[i * 3] = x;
+    positions[i * 3 + 1] = y;
+    positions[i * 3 + 2] = z;
+    speeds[i] = Math.random();
+    sizes[i] = Math.random();
+    seeds[i] = Math.random() * 100;
+  }
+  geometry.setAttribute("position", new THREE7.BufferAttribute(positions, 3));
+  geometry.setAttribute("aSpeed", new THREE7.BufferAttribute(speeds, 1));
+  geometry.setAttribute("aSize", new THREE7.BufferAttribute(sizes, 1));
+  geometry.setAttribute("aSeed", new THREE7.BufferAttribute(seeds, 1));
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function buildUniforms2({
+  color,
+  fallSpeed,
+  windStrength,
+  turbulence,
+  flakeSize,
+  twinkleStrength
+}) {
+  return {
+    uTime: { value: 0 },
+    uFallSpeed: { value: fallSpeed },
+    uWindStrength: { value: windStrength },
+    uTurbulence: { value: turbulence },
+    uSize: { value: flakeSize },
+    uTwinkleStrength: { value: twinkleStrength },
+    uColor: { value: new THREE7.Color(color) },
+    uArea: {
+      value: new THREE7.Vector3(
+        AREA_BOUNDS.width,
+        AREA_BOUNDS.height,
+        AREA_BOUNDS.depth
+      )
+    }
+  };
+}
+function Snow({
+  className,
+  style,
+  width,
+  height,
+  color,
+  fallSpeed,
+  windStrength,
+  turbulence,
+  flakeSize,
+  twinkleStrength,
+  flakeCount,
+  mouseWindInteraction = false,
+  ...divProps
+}) {
+  const snowRef = (0, import_react7.useRef)(null);
+  const uniformsRef = (0, import_react7.useRef)({
+    color,
+    fallSpeed,
+    windStrength,
+    turbulence,
+    flakeSize,
+    twinkleStrength,
+    flakeCount
+  });
+  uniformsRef.current = {
+    color,
+    fallSpeed,
+    windStrength,
+    turbulence,
+    flakeSize,
+    twinkleStrength,
+    flakeCount
+  };
+  const pointerWindOffsetRef = (0, import_react7.useRef)(0);
+  const pointerWindTargetRef = (0, import_react7.useRef)(0);
+  const pointerStateRef = (0, import_react7.useRef)({
+    lastX: 0,
+    lastTime: 0,
+    timeoutId: null
+  });
+  const pointerActiveRef = (0, import_react7.useRef)(false);
+  const baseWindRef = (0, import_react7.useRef)(windStrength);
+  (0, import_react7.useEffect)(() => {
+    baseWindRef.current = windStrength;
+  }, [windStrength]);
+  const handleCreate = (0, import_react7.useCallback)(({ scene }) => {
+    const uniforms = buildUniforms2(uniformsRef.current);
+    const geometry = createSnowGeometry(
+      Math.max(1, Math.floor(uniformsRef.current.flakeCount))
+    );
+    const material = new THREE7.ShaderMaterial({
+      fragmentShader: fragment_default7,
+      vertexShader: vertex_default6,
+      uniforms,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE7.AdditiveBlending
+    });
+    const points = new THREE7.Points(geometry, material);
+    points.frustumCulled = false;
+    scene.add(points);
+    snowRef.current = { points, geometry, material, uniforms };
+    return () => {
+      scene.remove(points);
+      geometry.dispose();
+      material.dispose();
+      snowRef.current = null;
+    };
+  }, []);
+  const handleRender = (0, import_react7.useCallback)(
+    (_context, delta, elapsedTime) => {
+      const assets = snowRef.current;
+      if (!assets) return;
+      assets.uniforms.uTime.value = elapsedTime;
+      const currentOffset = pointerWindOffsetRef.current;
+      const targetOffset = pointerWindTargetRef.current;
+      const nextOffset = THREE7.MathUtils.damp(
+        currentOffset,
+        targetOffset,
+        3.5,
+        delta
+      );
+      if (Math.abs(nextOffset - currentOffset) > 5e-5) {
+        pointerWindOffsetRef.current = nextOffset;
+        assets.uniforms.uWindStrength.value = baseWindRef.current + nextOffset;
+      }
+    },
+    []
+  );
+  const { containerRef } = useScene({
+    camera: {
+      position: [0, 0, 18]
+    },
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uColor.value.set(color);
+  }, [color]);
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uFallSpeed.value = fallSpeed;
+  }, [fallSpeed]);
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uWindStrength.value = windStrength + pointerWindOffsetRef.current;
+  }, [windStrength]);
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uTurbulence.value = turbulence;
+  }, [turbulence]);
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uSize.value = flakeSize;
+  }, [flakeSize]);
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uTwinkleStrength.value = twinkleStrength;
+  }, [twinkleStrength]);
+  (0, import_react7.useEffect)(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    const geometry = createSnowGeometry(Math.max(1, Math.floor(flakeCount)));
+    assets.points.geometry.dispose();
+    assets.points.geometry = geometry;
+    assets.geometry = geometry;
+  }, [flakeCount]);
+  (0, import_react7.useEffect)(() => {
+    const pointerState = pointerStateRef.current;
+    const clearTimeoutIfNeeded = () => {
+      if (pointerState.timeoutId !== null) {
+        window.clearTimeout(pointerState.timeoutId);
+        pointerState.timeoutId = null;
+      }
+    };
+    if (!mouseWindInteraction) {
+      clearTimeoutIfNeeded();
+      pointerWindOffsetRef.current = 0;
+      pointerWindTargetRef.current = 0;
+      pointerState.lastTime = 0;
+      pointerActiveRef.current = false;
+      const assets = snowRef.current;
+      if (assets) {
+        assets.uniforms.uWindStrength.value = windStrength;
+      }
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+    const scheduleReset = () => {
+      clearTimeoutIfNeeded();
+      pointerState.timeoutId = window.setTimeout(() => {
+        pointerWindTargetRef.current = 0;
+        pointerState.timeoutId = null;
+      }, 220);
+    };
+    const handlePointerMove = (event) => {
+      const isMouse = event.pointerType === "mouse";
+      if (!isMouse && !pointerActiveRef.current) return;
+      const now = performance.now();
+      if (pointerState.lastTime === 0) {
+        pointerState.lastX = event.clientX;
+        pointerState.lastTime = now;
+        return;
+      }
+      const dx = event.clientX - pointerState.lastX;
+      const dt = Math.max(1, now - pointerState.lastTime);
+      const velocity = dx / dt;
+      const offset = THREE7.MathUtils.clamp(velocity * 0.9, -1.6, 1.6);
+      pointerWindTargetRef.current = offset;
+      pointerState.lastX = event.clientX;
+      pointerState.lastTime = now;
+      scheduleReset();
+    };
+    const handlePointerDown = (event) => {
+      pointerActiveRef.current = true;
+      pointerState.lastX = event.clientX;
+      pointerState.lastTime = performance.now();
+      scheduleReset();
+    };
+    const handlePointerUp = () => {
+      pointerActiveRef.current = false;
+      pointerState.lastTime = 0;
+      pointerWindTargetRef.current = 0;
+      scheduleReset();
+    };
+    const handlePointerLeave = () => {
+      pointerActiveRef.current = false;
+      pointerState.lastTime = 0;
+      pointerWindTargetRef.current = 0;
+      clearTimeoutIfNeeded();
+    };
+    container.addEventListener("pointermove", handlePointerMove);
+    container.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("pointerup", handlePointerUp);
+    container.addEventListener("pointercancel", handlePointerUp);
+    container.addEventListener("pointerout", handlePointerLeave);
+    container.addEventListener("pointerleave", handlePointerLeave);
+    return () => {
+      container.removeEventListener("pointermove", handlePointerMove);
+      container.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("pointerup", handlePointerUp);
+      container.removeEventListener("pointercancel", handlePointerUp);
+      container.removeEventListener("pointerout", handlePointerLeave);
+      container.removeEventListener("pointerleave", handlePointerLeave);
+      pointerState.lastTime = 0;
+      pointerWindOffsetRef.current = 0;
+      pointerWindTargetRef.current = 0;
+      pointerActiveRef.current = false;
+      clearTimeoutIfNeeded();
+      const assets = snowRef.current;
+      if (assets) {
+        assets.uniforms.uWindStrength.value = windStrength;
+      }
+    };
+  }, [containerRef, mouseWindInteraction, windStrength]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/AnimatedDrawingSVG.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PATH_SELECTOR = "path, line, polyline, polygon, circle, ellipse";
+function AnimatedDrawingSVG({
+  svgMarkup,
+  animated = true,
+  size,
+  onAnimated,
+  delay,
+  className,
+  style,
+  ...divProps
+}) {
+  const containerRef = (0, import_react8.useRef)(null);
+  const animationsRef = (0, import_react8.useRef)([]);
+  const parserRef = (0, import_react8.useRef)(null);
+  const onAnimatedRef = (0, import_react8.useRef)(onAnimated);
+  const animationRunIdRef = (0, import_react8.useRef)(0);
+  const onAnimationCompleteRef = (0, import_react8.useRef)(false);
+  const timeoutRef = (0, import_react8.useRef)([]);
+  const monitorRafRef = (0, import_react8.useRef)(null);
+  const sanitizedMarkup = (svgMarkup ?? "").toString().trim();
+  const normalizedDelay = typeof delay === "number" && delay > 0 ? delay : 0;
+  (0, import_react8.useEffect)(() => {
+    onAnimatedRef.current = onAnimated;
+  }, [onAnimated]);
+  (0, import_react8.useEffect)(() => {
+    return () => {
+      animationsRef.current.forEach((animation) => animation.cancel());
+      animationsRef.current = [];
+      timeoutRef.current.forEach((id) => window.clearTimeout(id));
+      timeoutRef.current = [];
+      if (monitorRafRef.current !== null) {
+        cancelAnimationFrame(monitorRafRef.current);
+        monitorRafRef.current = null;
+      }
+    };
+  }, []);
+  (0, import_react8.useLayoutEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let rafId = null;
+    let delayId = null;
+    let started = false;
+    if (normalizedDelay > 0) {
+      container.style.visibility = "hidden";
+    } else {
+      container.style.removeProperty("visibility");
+    }
+    animationRunIdRef.current += 1;
+    const currentRunId = animationRunIdRef.current;
+    onAnimationCompleteRef.current = false;
+    timeoutRef.current.forEach((id) => window.clearTimeout(id));
+    timeoutRef.current = [];
+    const markComplete = () => {
+      if (animationRunIdRef.current === currentRunId && !onAnimationCompleteRef.current) {
+        onAnimationCompleteRef.current = true;
+        onAnimatedRef.current?.();
+      }
+    };
+    animationsRef.current.forEach((animation) => animation.cancel());
+    animationsRef.current = [];
+    if (monitorRafRef.current !== null) {
+      cancelAnimationFrame(monitorRafRef.current);
+      monitorRafRef.current = null;
+    }
+    if (!sanitizedMarkup) {
+      container.replaceChildren();
+      markComplete();
+      return;
+    }
+    const parser = parserRef.current ?? new DOMParser();
+    parserRef.current = parser;
+    let parsed;
+    try {
+      parsed = parser.parseFromString(sanitizedMarkup, "image/svg+xml");
+    } catch {
+      return;
+    }
+    if (parsed.querySelector("parsererror")) {
+      return;
+    }
+    const parsedSvg = parsed.querySelector("svg");
+    if (!parsedSvg) {
+      container.replaceChildren();
+      onAnimatedRef.current?.();
+      return;
+    }
+    const svgElement = document.importNode(parsedSvg, true);
+    svgElement.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    if (size !== void 0) {
+      svgElement.removeAttribute("width");
+      svgElement.removeAttribute("height");
+      const sizeValue = typeof size === "number" ? `${Math.max(0, size)}px` : `${size}`;
+      svgElement.style.width = sizeValue;
+      svgElement.style.height = "auto";
+    } else {
+      svgElement.style.width = "100%";
+      svgElement.style.height = "100%";
+      svgElement.style.maxWidth = "100%";
+      svgElement.style.maxHeight = "100%";
+    }
+    svgElement.style.display = "block";
+    container.replaceChildren(svgElement);
+    const runAnimations = () => {
+      const drawTargets = Array.from(
+        svgElement.querySelectorAll(PATH_SELECTOR)
+      );
+      const scheduleFallback = (delay2) => {
+        const fallbackId = window.setTimeout(markComplete, delay2);
+        timeoutRef.current.push(fallbackId);
+      };
+      if (!drawTargets.length) {
+        if (!animated) {
+          markComplete();
+        } else {
+          Promise.resolve().then(() => {
+            markComplete();
+          });
+        }
+        return;
+      }
+      let maxDuration = 0;
+      const resolveTimingValue = (value, fallback) => {
+        if (typeof value === "number") {
+          return value;
+        }
+        if (typeof value === "string") {
+          const parsed2 = Number.parseFloat(value);
+          return Number.isFinite(parsed2) ? parsed2 : fallback;
+        }
+        if (typeof value === "object" && value !== null) {
+          const parsed2 = Number.parseFloat(value.toString());
+          return Number.isFinite(parsed2) ? parsed2 : fallback;
+        }
+        return fallback;
+      };
+      drawTargets.forEach((element, index) => {
+        const length = typeof element.getTotalLength === "function" ? element.getTotalLength() : null;
+        if (!length || Number.isNaN(length)) {
+          element.style.removeProperty("stroke-dasharray");
+          element.style.removeProperty("stroke-dashoffset");
+          return;
+        }
+        const dashValue = `${length}`;
+        element.style.strokeDasharray = dashValue;
+        element.style.strokeDashoffset = animated ? dashValue : "0";
+        if (!element.style.strokeLinecap) {
+          element.style.strokeLinecap = "round";
+        }
+        if (!animated) {
+          return;
+        }
+        const animation = element.animate(
+          [{ strokeDashoffset: dashValue }, { strokeDashoffset: "0" }],
+          {
+            duration: Math.min(6500, Math.max(1200, length * 12)),
+            delay: index * 120,
+            easing: "ease-in-out",
+            fill: "forwards"
+          }
+        );
+        const timing = animation.effect?.getTiming();
+        const baseDuration = Math.min(6500, Math.max(1200, length * 12));
+        const total = resolveTimingValue(timing?.delay, index * 120) + resolveTimingValue(timing?.duration, baseDuration);
+        if (total > maxDuration) {
+          maxDuration = total;
+        }
+        animationsRef.current.push(animation);
+      });
+      if (!animated) {
+        markComplete();
+        return;
+      }
+      const startMonitor = () => {
+        const monitor = () => {
+          if (animationRunIdRef.current !== currentRunId) {
+            return;
+          }
+          const allFinished = animationsRef.current.every((animation) => {
+            const state = animation.playState;
+            return state === "finished" || state === "idle";
+          });
+          if (allFinished) {
+            if (monitorRafRef.current !== null) {
+              cancelAnimationFrame(monitorRafRef.current);
+              monitorRafRef.current = null;
+            }
+            markComplete();
+            return;
+          }
+          monitorRafRef.current = requestAnimationFrame(monitor);
+        };
+        if (monitorRafRef.current !== null) {
+          cancelAnimationFrame(monitorRafRef.current);
+        }
+        monitorRafRef.current = requestAnimationFrame(monitor);
+      };
+      startMonitor();
+      if (animated && maxDuration > 0) {
+        scheduleFallback(maxDuration + 50);
+      }
+    };
+    const triggerStart = () => {
+      if (started) return;
+      started = true;
+      container.style.removeProperty("visibility");
+      rafId = requestAnimationFrame(runAnimations);
+    };
+    if (normalizedDelay > 0) {
+      delayId = window.setTimeout(triggerStart, normalizedDelay);
+    } else {
+      triggerStart();
+    }
+    return () => {
+      if (delayId !== null) {
+        window.clearTimeout(delayId);
+      }
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [sanitizedMarkup, animated, size, normalizedDelay]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: (0, import_clsx.default)(
+        "flex items-center justify-center [&_svg]:block",
+        className
+      ),
+      style: {
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedDrawingSVG,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,
   FractalFlower,
   MenuGlitch,
   OranoParticles,
-  ShaderArt
+  ShaderArt,
+  Snow
 });

package/dist/index.mjs

@@ -2090,12 +2090,560 @@ function Efecto({
     }
   );
 }
+
+// src/components/Snow.tsx
+import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7 } from "react";
+import * as THREE7 from "three";
+
+// src/shaders/snow/fragment.glsl
+var fragment_default7 = "precision mediump float;\n\nuniform vec3 uColor;\n\nvarying float vAlpha;\n\nvoid main() {\n  vec2 uv = gl_PointCoord - 0.5;\n  float dist = length(uv);\n  float mask = smoothstep(0.5, 0.0, dist);\n  if (mask <= 0.01) {\n    discard;\n  }\n\n  float centerGlow = smoothstep(0.22, 0.0, dist);\n  vec3 color = mix(uColor * 1.2, uColor, centerGlow);\n\n  gl_FragColor = vec4(color, mask * vAlpha);\n}\n";
+
+// src/shaders/snow/vertex.glsl
+var vertex_default6 = "uniform float uTime;\nuniform float uFallSpeed;\nuniform float uWindStrength;\nuniform float uTurbulence;\nuniform float uSize;\nuniform float uTwinkleStrength;\nuniform vec3 uArea;\n\nattribute float aSpeed;\nattribute float aSize;\nattribute float aSeed;\n\nvarying float vAlpha;\n\nfloat wrap(float value, float size) {\n  return mod(value + size * 0.5, size) - size * 0.5;\n}\n\nvoid main() {\n  float height = uArea.y;\n  float width = uArea.x;\n  float depth = uArea.z;\n\n  float fall = uFallSpeed * (0.3 + aSpeed);\n  float droppedY = position.y - uTime * fall;\n  float wrappedY = wrap(droppedY, height);\n\n  float sway =\n      sin((wrappedY + aSeed) * 0.45 + uTime * 0.8) * uTurbulence +\n      cos(uTime * 0.35 + aSeed) * 0.15;\n  float wind = uWindStrength * (0.4 + aSpeed);\n  float displacedX = wrap(position.x + sway + wind, width);\n\n  float driftZ =\n      sin(uTime * 0.25 + aSeed * 1.7) * 0.5 +\n      cos((wrappedY + aSeed) * 0.2) * 0.4;\n  float displacedZ = wrap(position.z + driftZ, depth);\n\n  vec4 modelPosition =\n      modelMatrix * vec4(displacedX, wrappedY, displacedZ, 1.0);\n  vec4 viewPosition = viewMatrix * modelPosition;\n\n  float baseSize = mix(0.45, 1.0, aSize) * uSize;\n  float twinkle =\n      1.0 + sin(uTime * (0.6 + aSpeed) + aSeed) * uTwinkleStrength;\n  float perspective = clamp(15.0 / max(1.0, -viewPosition.z), 0.5, 3.0);\n  gl_PointSize = baseSize * twinkle * perspective;\n  gl_Position = projectionMatrix * viewPosition;\n\n  vAlpha = mix(0.35, 1.0, aSize);\n}\n";
+
+// src/components/Snow.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var AREA_BOUNDS = {
+  width: 36,
+  height: 44,
+  depth: 26
+};
+function createSnowGeometry(count) {
+  const geometry = new THREE7.BufferGeometry();
+  const positions = new Float32Array(count * 3);
+  const speeds = new Float32Array(count);
+  const sizes = new Float32Array(count);
+  const seeds = new Float32Array(count);
+  for (let i = 0; i < count; i += 1) {
+    const x = (Math.random() - 0.5) * AREA_BOUNDS.width;
+    const y = (Math.random() - 0.5) * AREA_BOUNDS.height;
+    const z = (Math.random() - 0.5) * AREA_BOUNDS.depth;
+    positions[i * 3] = x;
+    positions[i * 3 + 1] = y;
+    positions[i * 3 + 2] = z;
+    speeds[i] = Math.random();
+    sizes[i] = Math.random();
+    seeds[i] = Math.random() * 100;
+  }
+  geometry.setAttribute("position", new THREE7.BufferAttribute(positions, 3));
+  geometry.setAttribute("aSpeed", new THREE7.BufferAttribute(speeds, 1));
+  geometry.setAttribute("aSize", new THREE7.BufferAttribute(sizes, 1));
+  geometry.setAttribute("aSeed", new THREE7.BufferAttribute(seeds, 1));
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function buildUniforms2({
+  color,
+  fallSpeed,
+  windStrength,
+  turbulence,
+  flakeSize,
+  twinkleStrength
+}) {
+  return {
+    uTime: { value: 0 },
+    uFallSpeed: { value: fallSpeed },
+    uWindStrength: { value: windStrength },
+    uTurbulence: { value: turbulence },
+    uSize: { value: flakeSize },
+    uTwinkleStrength: { value: twinkleStrength },
+    uColor: { value: new THREE7.Color(color) },
+    uArea: {
+      value: new THREE7.Vector3(
+        AREA_BOUNDS.width,
+        AREA_BOUNDS.height,
+        AREA_BOUNDS.depth
+      )
+    }
+  };
+}
+function Snow({
+  className,
+  style,
+  width,
+  height,
+  color,
+  fallSpeed,
+  windStrength,
+  turbulence,
+  flakeSize,
+  twinkleStrength,
+  flakeCount,
+  mouseWindInteraction = false,
+  ...divProps
+}) {
+  const snowRef = useRef7(null);
+  const uniformsRef = useRef7({
+    color,
+    fallSpeed,
+    windStrength,
+    turbulence,
+    flakeSize,
+    twinkleStrength,
+    flakeCount
+  });
+  uniformsRef.current = {
+    color,
+    fallSpeed,
+    windStrength,
+    turbulence,
+    flakeSize,
+    twinkleStrength,
+    flakeCount
+  };
+  const pointerWindOffsetRef = useRef7(0);
+  const pointerWindTargetRef = useRef7(0);
+  const pointerStateRef = useRef7({
+    lastX: 0,
+    lastTime: 0,
+    timeoutId: null
+  });
+  const pointerActiveRef = useRef7(false);
+  const baseWindRef = useRef7(windStrength);
+  useEffect7(() => {
+    baseWindRef.current = windStrength;
+  }, [windStrength]);
+  const handleCreate = useCallback6(({ scene }) => {
+    const uniforms = buildUniforms2(uniformsRef.current);
+    const geometry = createSnowGeometry(
+      Math.max(1, Math.floor(uniformsRef.current.flakeCount))
+    );
+    const material = new THREE7.ShaderMaterial({
+      fragmentShader: fragment_default7,
+      vertexShader: vertex_default6,
+      uniforms,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE7.AdditiveBlending
+    });
+    const points = new THREE7.Points(geometry, material);
+    points.frustumCulled = false;
+    scene.add(points);
+    snowRef.current = { points, geometry, material, uniforms };
+    return () => {
+      scene.remove(points);
+      geometry.dispose();
+      material.dispose();
+      snowRef.current = null;
+    };
+  }, []);
+  const handleRender = useCallback6(
+    (_context, delta, elapsedTime) => {
+      const assets = snowRef.current;
+      if (!assets) return;
+      assets.uniforms.uTime.value = elapsedTime;
+      const currentOffset = pointerWindOffsetRef.current;
+      const targetOffset = pointerWindTargetRef.current;
+      const nextOffset = THREE7.MathUtils.damp(
+        currentOffset,
+        targetOffset,
+        3.5,
+        delta
+      );
+      if (Math.abs(nextOffset - currentOffset) > 5e-5) {
+        pointerWindOffsetRef.current = nextOffset;
+        assets.uniforms.uWindStrength.value = baseWindRef.current + nextOffset;
+      }
+    },
+    []
+  );
+  const { containerRef } = useScene({
+    camera: {
+      position: [0, 0, 18]
+    },
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uColor.value.set(color);
+  }, [color]);
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uFallSpeed.value = fallSpeed;
+  }, [fallSpeed]);
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uWindStrength.value = windStrength + pointerWindOffsetRef.current;
+  }, [windStrength]);
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uTurbulence.value = turbulence;
+  }, [turbulence]);
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uSize.value = flakeSize;
+  }, [flakeSize]);
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    assets.uniforms.uTwinkleStrength.value = twinkleStrength;
+  }, [twinkleStrength]);
+  useEffect7(() => {
+    const assets = snowRef.current;
+    if (!assets) return;
+    const geometry = createSnowGeometry(Math.max(1, Math.floor(flakeCount)));
+    assets.points.geometry.dispose();
+    assets.points.geometry = geometry;
+    assets.geometry = geometry;
+  }, [flakeCount]);
+  useEffect7(() => {
+    const pointerState = pointerStateRef.current;
+    const clearTimeoutIfNeeded = () => {
+      if (pointerState.timeoutId !== null) {
+        window.clearTimeout(pointerState.timeoutId);
+        pointerState.timeoutId = null;
+      }
+    };
+    if (!mouseWindInteraction) {
+      clearTimeoutIfNeeded();
+      pointerWindOffsetRef.current = 0;
+      pointerWindTargetRef.current = 0;
+      pointerState.lastTime = 0;
+      pointerActiveRef.current = false;
+      const assets = snowRef.current;
+      if (assets) {
+        assets.uniforms.uWindStrength.value = windStrength;
+      }
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+    const scheduleReset = () => {
+      clearTimeoutIfNeeded();
+      pointerState.timeoutId = window.setTimeout(() => {
+        pointerWindTargetRef.current = 0;
+        pointerState.timeoutId = null;
+      }, 220);
+    };
+    const handlePointerMove = (event) => {
+      const isMouse = event.pointerType === "mouse";
+      if (!isMouse && !pointerActiveRef.current) return;
+      const now = performance.now();
+      if (pointerState.lastTime === 0) {
+        pointerState.lastX = event.clientX;
+        pointerState.lastTime = now;
+        return;
+      }
+      const dx = event.clientX - pointerState.lastX;
+      const dt = Math.max(1, now - pointerState.lastTime);
+      const velocity = dx / dt;
+      const offset = THREE7.MathUtils.clamp(velocity * 0.9, -1.6, 1.6);
+      pointerWindTargetRef.current = offset;
+      pointerState.lastX = event.clientX;
+      pointerState.lastTime = now;
+      scheduleReset();
+    };
+    const handlePointerDown = (event) => {
+      pointerActiveRef.current = true;
+      pointerState.lastX = event.clientX;
+      pointerState.lastTime = performance.now();
+      scheduleReset();
+    };
+    const handlePointerUp = () => {
+      pointerActiveRef.current = false;
+      pointerState.lastTime = 0;
+      pointerWindTargetRef.current = 0;
+      scheduleReset();
+    };
+    const handlePointerLeave = () => {
+      pointerActiveRef.current = false;
+      pointerState.lastTime = 0;
+      pointerWindTargetRef.current = 0;
+      clearTimeoutIfNeeded();
+    };
+    container.addEventListener("pointermove", handlePointerMove);
+    container.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("pointerup", handlePointerUp);
+    container.addEventListener("pointercancel", handlePointerUp);
+    container.addEventListener("pointerout", handlePointerLeave);
+    container.addEventListener("pointerleave", handlePointerLeave);
+    return () => {
+      container.removeEventListener("pointermove", handlePointerMove);
+      container.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("pointerup", handlePointerUp);
+      container.removeEventListener("pointercancel", handlePointerUp);
+      container.removeEventListener("pointerout", handlePointerLeave);
+      container.removeEventListener("pointerleave", handlePointerLeave);
+      pointerState.lastTime = 0;
+      pointerWindOffsetRef.current = 0;
+      pointerWindTargetRef.current = 0;
+      pointerActiveRef.current = false;
+      clearTimeoutIfNeeded();
+      const assets = snowRef.current;
+      if (assets) {
+        assets.uniforms.uWindStrength.value = windStrength;
+      }
+    };
+  }, [containerRef, mouseWindInteraction, windStrength]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/AnimatedDrawingSVG.tsx
+import clsx from "clsx";
+import { useEffect as useEffect8, useLayoutEffect, useRef as useRef8 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PATH_SELECTOR = "path, line, polyline, polygon, circle, ellipse";
+function AnimatedDrawingSVG({
+  svgMarkup,
+  animated = true,
+  size,
+  onAnimated,
+  delay,
+  className,
+  style,
+  ...divProps
+}) {
+  const containerRef = useRef8(null);
+  const animationsRef = useRef8([]);
+  const parserRef = useRef8(null);
+  const onAnimatedRef = useRef8(onAnimated);
+  const animationRunIdRef = useRef8(0);
+  const onAnimationCompleteRef = useRef8(false);
+  const timeoutRef = useRef8([]);
+  const monitorRafRef = useRef8(null);
+  const sanitizedMarkup = (svgMarkup ?? "").toString().trim();
+  const normalizedDelay = typeof delay === "number" && delay > 0 ? delay : 0;
+  useEffect8(() => {
+    onAnimatedRef.current = onAnimated;
+  }, [onAnimated]);
+  useEffect8(() => {
+    return () => {
+      animationsRef.current.forEach((animation) => animation.cancel());
+      animationsRef.current = [];
+      timeoutRef.current.forEach((id) => window.clearTimeout(id));
+      timeoutRef.current = [];
+      if (monitorRafRef.current !== null) {
+        cancelAnimationFrame(monitorRafRef.current);
+        monitorRafRef.current = null;
+      }
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let rafId = null;
+    let delayId = null;
+    let started = false;
+    if (normalizedDelay > 0) {
+      container.style.visibility = "hidden";
+    } else {
+      container.style.removeProperty("visibility");
+    }
+    animationRunIdRef.current += 1;
+    const currentRunId = animationRunIdRef.current;
+    onAnimationCompleteRef.current = false;
+    timeoutRef.current.forEach((id) => window.clearTimeout(id));
+    timeoutRef.current = [];
+    const markComplete = () => {
+      if (animationRunIdRef.current === currentRunId && !onAnimationCompleteRef.current) {
+        onAnimationCompleteRef.current = true;
+        onAnimatedRef.current?.();
+      }
+    };
+    animationsRef.current.forEach((animation) => animation.cancel());
+    animationsRef.current = [];
+    if (monitorRafRef.current !== null) {
+      cancelAnimationFrame(monitorRafRef.current);
+      monitorRafRef.current = null;
+    }
+    if (!sanitizedMarkup) {
+      container.replaceChildren();
+      markComplete();
+      return;
+    }
+    const parser = parserRef.current ?? new DOMParser();
+    parserRef.current = parser;
+    let parsed;
+    try {
+      parsed = parser.parseFromString(sanitizedMarkup, "image/svg+xml");
+    } catch {
+      return;
+    }
+    if (parsed.querySelector("parsererror")) {
+      return;
+    }
+    const parsedSvg = parsed.querySelector("svg");
+    if (!parsedSvg) {
+      container.replaceChildren();
+      onAnimatedRef.current?.();
+      return;
+    }
+    const svgElement = document.importNode(parsedSvg, true);
+    svgElement.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    if (size !== void 0) {
+      svgElement.removeAttribute("width");
+      svgElement.removeAttribute("height");
+      const sizeValue = typeof size === "number" ? `${Math.max(0, size)}px` : `${size}`;
+      svgElement.style.width = sizeValue;
+      svgElement.style.height = "auto";
+    } else {
+      svgElement.style.width = "100%";
+      svgElement.style.height = "100%";
+      svgElement.style.maxWidth = "100%";
+      svgElement.style.maxHeight = "100%";
+    }
+    svgElement.style.display = "block";
+    container.replaceChildren(svgElement);
+    const runAnimations = () => {
+      const drawTargets = Array.from(
+        svgElement.querySelectorAll(PATH_SELECTOR)
+      );
+      const scheduleFallback = (delay2) => {
+        const fallbackId = window.setTimeout(markComplete, delay2);
+        timeoutRef.current.push(fallbackId);
+      };
+      if (!drawTargets.length) {
+        if (!animated) {
+          markComplete();
+        } else {
+          Promise.resolve().then(() => {
+            markComplete();
+          });
+        }
+        return;
+      }
+      let maxDuration = 0;
+      const resolveTimingValue = (value, fallback) => {
+        if (typeof value === "number") {
+          return value;
+        }
+        if (typeof value === "string") {
+          const parsed2 = Number.parseFloat(value);
+          return Number.isFinite(parsed2) ? parsed2 : fallback;
+        }
+        if (typeof value === "object" && value !== null) {
+          const parsed2 = Number.parseFloat(value.toString());
+          return Number.isFinite(parsed2) ? parsed2 : fallback;
+        }
+        return fallback;
+      };
+      drawTargets.forEach((element, index) => {
+        const length = typeof element.getTotalLength === "function" ? element.getTotalLength() : null;
+        if (!length || Number.isNaN(length)) {
+          element.style.removeProperty("stroke-dasharray");
+          element.style.removeProperty("stroke-dashoffset");
+          return;
+        }
+        const dashValue = `${length}`;
+        element.style.strokeDasharray = dashValue;
+        element.style.strokeDashoffset = animated ? dashValue : "0";
+        if (!element.style.strokeLinecap) {
+          element.style.strokeLinecap = "round";
+        }
+        if (!animated) {
+          return;
+        }
+        const animation = element.animate(
+          [{ strokeDashoffset: dashValue }, { strokeDashoffset: "0" }],
+          {
+            duration: Math.min(6500, Math.max(1200, length * 12)),
+            delay: index * 120,
+            easing: "ease-in-out",
+            fill: "forwards"
+          }
+        );
+        const timing = animation.effect?.getTiming();
+        const baseDuration = Math.min(6500, Math.max(1200, length * 12));
+        const total = resolveTimingValue(timing?.delay, index * 120) + resolveTimingValue(timing?.duration, baseDuration);
+        if (total > maxDuration) {
+          maxDuration = total;
+        }
+        animationsRef.current.push(animation);
+      });
+      if (!animated) {
+        markComplete();
+        return;
+      }
+      const startMonitor = () => {
+        const monitor = () => {
+          if (animationRunIdRef.current !== currentRunId) {
+            return;
+          }
+          const allFinished = animationsRef.current.every((animation) => {
+            const state = animation.playState;
+            return state === "finished" || state === "idle";
+          });
+          if (allFinished) {
+            if (monitorRafRef.current !== null) {
+              cancelAnimationFrame(monitorRafRef.current);
+              monitorRafRef.current = null;
+            }
+            markComplete();
+            return;
+          }
+          monitorRafRef.current = requestAnimationFrame(monitor);
+        };
+        if (monitorRafRef.current !== null) {
+          cancelAnimationFrame(monitorRafRef.current);
+        }
+        monitorRafRef.current = requestAnimationFrame(monitor);
+      };
+      startMonitor();
+      if (animated && maxDuration > 0) {
+        scheduleFallback(maxDuration + 50);
+      }
+    };
+    const triggerStart = () => {
+      if (started) return;
+      started = true;
+      container.style.removeProperty("visibility");
+      rafId = requestAnimationFrame(runAnimations);
+    };
+    if (normalizedDelay > 0) {
+      delayId = window.setTimeout(triggerStart, normalizedDelay);
+    } else {
+      triggerStart();
+    }
+    return () => {
+      if (delayId !== null) {
+        window.clearTimeout(delayId);
+      }
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [sanitizedMarkup, animated, size, normalizedDelay]);
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx(
+        "flex items-center justify-center [&_svg]:block",
+        className
+      ),
+      style: {
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
 export {
+  AnimatedDrawingSVG,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,
   FractalFlower,
   MenuGlitch,
   OranoParticles,
-  ShaderArt
+  ShaderArt,
+  Snow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/shader-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Shader components",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -54,6 +54,7 @@
   },
   "homepage": "https://github.com/toriistudio/shader-ui#readme",
   "peerDependencies": {
+    "clsx": "^2.1.1",
     "gsap": ">=3.14.2",
     "postprocessing": ">=6.38.1",
     "react": ">=19 <20",
@@ -74,6 +75,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/three": "^0.177.0",
+    "clsx": "^2.1.1",
     "gsap": "^3.14.2",
     "postprocessing": "^6.38.1",
     "three": "^0.177.0",