@toriistudio/shader-ui 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -13,7 +13,8 @@ function useScene({
   onCreate,
   onRender,
   onResize,
-  deps
+  deps,
+  manualRender = false
 } = {}) {
   const containerRef = useRef(null);
   const contextRef = useRef(null);
@@ -43,6 +44,10 @@ function useScene({
       antialias: true,
       ...rendererOptions
     });
+    renderer.autoClear = false;
+    renderer.autoClearColor = true;
+    renderer.autoClearDepth = true;
+    renderer.autoClearStencil = true;
     renderer.setPixelRatio(resolvedPixelRatio);
     renderer.setSize(initialWidth, initialHeight, false);
     renderer.setClearColor(0, 0);
@@ -93,7 +98,9 @@ function useScene({
       elapsedTime += delta;
       context.size = { ...sizeRef.current };
       onRenderRef.current?.(context, delta, elapsedTime);
-      renderer.render(scene, camera);
+      if (!manualRender) {
+        renderer.render(scene, camera);
+      }
       animationFrameId = requestAnimationFrame(renderLoop);
     };
     animationFrameId = requestAnimationFrame(renderLoop);
@@ -104,13 +111,14 @@ function useScene({
       sizeRef.current = { width, height };
       if (camera instanceof THREE.PerspectiveCamera) {
         camera.aspect = width / Math.max(1, height);
+        camera.updateProjectionMatrix();
       } else if (camera instanceof THREE.OrthographicCamera) {
         camera.left = -width / 2;
         camera.right = width / 2;
         camera.top = height / 2;
         camera.bottom = -height / 2;
+        camera.updateProjectionMatrix();
       }
-      camera.updateProjectionMatrix();
       context.size = { ...sizeRef.current };
       onResizeRef.current?.(context, { width, height });
     });
@@ -1045,9 +1053,1597 @@ function createDiffuseTexture() {
   texture.generateMipmaps = true;
   return texture;
 }
+
+// src/components/EfectoAsciiEffect.tsx
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect6,
+  useMemo as useMemo3,
+  useRef as useRef6
+} from "react";
+import {
+  BlendFunction,
+  Effect,
+  EffectComposer,
+  EffectPass,
+  RenderPass
+} from "postprocessing";
+import * as THREE6 from "three";
+import { Uniform, Vector2 as Vector23 } from "three";
+
+// src/utils/efectoMediaAdjustments.ts
+var EFECTO_MEDIA_ADJUSTMENT_DEFAULTS = {
+  brightness: 1,
+  contrast: 1,
+  saturation: 1
+};
+var resolveEfectoMediaAdjustments = (adjustments) => ({
+  brightness: typeof adjustments?.brightness === "number" ? adjustments.brightness : EFECTO_MEDIA_ADJUSTMENT_DEFAULTS.brightness,
+  contrast: typeof adjustments?.contrast === "number" ? adjustments.contrast : EFECTO_MEDIA_ADJUSTMENT_DEFAULTS.contrast,
+  saturation: typeof adjustments?.saturation === "number" ? adjustments.saturation : EFECTO_MEDIA_ADJUSTMENT_DEFAULTS.saturation
+});
+
+// src/shaders/efecto-ascii-effect/fragment.ts
+var fragment_default5 = `
+  uniform float cellSize;
+  uniform bool invert;
+  uniform bool colorMode;
+  uniform int asciiStyle;
+  
+  // PostFX uniforms
+  uniform float time;
+  uniform vec2 resolution;
+  uniform vec2 mousePos;
+  
+  // Tier 1 uniforms
+  uniform float scanlineIntensity;
+  uniform float scanlineCount;
+  uniform float targetFPS;
+  uniform float jitterIntensity;
+  uniform float jitterSpeed;
+  uniform bool mouseGlowEnabled;
+  uniform float mouseGlowRadius;
+  uniform float mouseGlowIntensity;
+  uniform float vignetteIntensity;
+  uniform float vignetteRadius;
+  uniform int colorPalette;
+  
+  // Tier 2 uniforms
+  uniform float curvature;
+  uniform float aberrationStrength;
+  uniform float noiseIntensity;
+  uniform float noiseScale;
+  uniform float noiseSpeed;
+  uniform float waveAmplitude;
+  uniform float waveFrequency;
+  uniform float waveSpeed;
+  uniform float glitchIntensity;
+  uniform float glitchFrequency;
+  uniform float brightnessAdjust;
+  uniform float contrastAdjust;
+  
+  // =======================
+  // HELPER FUNCTIONS
+  // =======================
+  
+  // Pseudo-random function
+  float random(vec2 st) {
+    return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
+  }
+  
+  // 2D Noise function
+  float noise(vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+  }
+  
+  // RGB to HSL conversion
+  vec3 rgb2hsl(vec3 rgb) {
+    float maxVal = max(max(rgb.r, rgb.g), rgb.b);
+    float minVal = min(min(rgb.r, rgb.g), rgb.b);
+    float delta = maxVal - minVal;
+  
+    float h = 0.0;
+    float s = 0.0;
+    float l = (maxVal + minVal) * 0.5;
+  
+    if (delta > 0.0001) {
+      s = delta / (1.0 - abs(2.0 * l - 1.0));
+  
+      if (maxVal == rgb.r) {
+        h = mod((rgb.g - rgb.b) / delta, 6.0);
+      } else if (maxVal == rgb.g) {
+        h = (rgb.b - rgb.r) / delta + 2.0;
+      } else {
+        h = (rgb.r - rgb.g) / delta + 4.0;
+      }
+      h = h / 6.0;
+    }
+  
+    return vec3(h, s, l);
+  }
+  
+  // HSL to RGB conversion
+  vec3 hsl2rgb(vec3 hsl) {
+    float h = hsl.x;
+    float s = hsl.y;
+    float l = hsl.z;
+  
+    float c = (1.0 - abs(2.0 * l - 1.0)) * s;
+    float x = c * (1.0 - abs(mod(h * 6.0, 2.0) - 1.0));
+    float m = l - c * 0.5;
+  
+    vec3 rgb = vec3(0.0);
+  
+    if (h < 1.0/6.0) {
+      rgb = vec3(c, x, 0.0);
+    } else if (h < 2.0/6.0) {
+      rgb = vec3(x, c, 0.0);
+    } else if (h < 3.0/6.0) {
+      rgb = vec3(0.0, c, x);
+    } else if (h < 4.0/6.0) {
+      rgb = vec3(0.0, x, c);
+    } else if (h < 5.0/6.0) {
+      rgb = vec3(x, 0.0, c);
+    } else {
+      rgb = vec3(c, 0.0, x);
+    }
+  
+    return rgb + m;
+  }
+  
+  // Apply color palette
+  vec3 applyColorPalette(vec3 color, float brightness, int palette) {
+    if (palette == 0) return color; // Original
+  
+    vec3 paletteColor = color;
+  
+    if (palette == 1) { // Green phosphor
+      paletteColor = vec3(0.0, brightness, 0.0) * 1.5;
+    } else if (palette == 2) { // Amber
+      paletteColor = vec3(brightness * 1.2, brightness * 0.7, 0.0);
+    } else if (palette == 3) { // Cyan
+      paletteColor = vec3(0.0, brightness * 0.9, brightness);
+    } else if (palette == 4) { // Blue
+      paletteColor = vec3(0.0, 0.0, brightness);
+    }
+  
+    return paletteColor;
+  }
+  
+  // Different character patterns based on style
+  float getChar(float brightness, vec2 p, int style) {
+    vec2 grid = floor(p * 4.0);
+    float val = 0.0;
+  
+    if (style == 0) {
+      // Standard ASCII style
+      if (brightness < 0.2) {
+        val = (grid.x == 1.0 && grid.y == 1.0) ? 0.3 : 0.0;
+      } else if (brightness < 0.35) {
+        val = (grid.x == 1.0 || grid.x == 2.0) && (grid.y == 1.0 || grid.y == 2.0) ? 1.0 : 0.0;
+      } else if (brightness < 0.5) {
+        val = (grid.y == 1.0 || grid.y == 2.0) ? 1.0 : 0.0;
+      } else if (brightness < 0.65) {
+        val = (grid.y == 0.0 || grid.y == 3.0) ? 1.0 : (grid.y == 1.0 || grid.y == 2.0) ? 0.5 : 0.0;
+      } else if (brightness < 0.8) {
+        val = (grid.x == 0.0 || grid.x == 2.0 || grid.y == 0.0 || grid.y == 2.0) ? 1.0 : 0.3;
+      } else {
+        val = 1.0;
+      }
+    } else if (style == 1) {
+      // Dense style
+      if (brightness < 0.15) {
+        val = 0.0;
+      } else if (brightness < 0.3) {
+        val = (grid.x >= 1.0 && grid.x <= 2.0 && grid.y >= 1.0 && grid.y <= 2.0) ? 0.6 : 0.0;
+      } else if (brightness < 0.5) {
+        val = (grid.y == 1.0 || grid.y == 2.0) ? 1.0 : 0.3;
+      } else if (brightness < 0.7) {
+        val = (grid.x == 0.0 || grid.x == 3.0 || grid.y == 0.0 || grid.y == 3.0) ? 1.0 : 0.6;
+      } else {
+        val = 1.0;
+      }
+    } else if (style == 2) {
+      // Minimal style
+      if (brightness < 0.25) {
+        val = 0.0;
+      } else if (brightness < 0.4) {
+        val = (grid.x == 2.0 && grid.y == 2.0) ? 1.0 : 0.0;
+      } else if (brightness < 0.6) {
+        val = (grid.x == 1.0 || grid.x == 2.0) && grid.y == 2.0 ? 1.0 : 0.0;
+      } else if (brightness < 0.8) {
+        val = (grid.y == 1.0 || grid.y == 2.0) ? 1.0 : 0.0;
+      } else {
+        val = (grid.x <= 2.0 && grid.y <= 2.0) ? 1.0 : 0.3;
+      }
+    } else if (style == 3) {
+      // Blocks style
+      if (brightness < 0.2) {
+        val = 0.0;
+      } else if (brightness < 0.4) {
+        val = (grid.x >= 1.0 && grid.x <= 2.0 && grid.y >= 1.0 && grid.y <= 2.0) ? 0.8 : 0.0;
+      } else if (brightness < 0.6) {
+        val = (grid.y <= 2.0) ? 0.9 : 0.0;
+      } else if (brightness < 0.8) {
+        val = (grid.x <= 2.0 || grid.y <= 2.0) ? 1.0 : 0.2;
+      } else {
+        val = 1.0;
+      }
+    }
+  
+    return val;
+  }
+  
+  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 workingUV = uv;
+  
+    // ===========================
+    // TIER 2: PRE-PROCESSING
+    // ===========================
+  
+    // Screen curvature
+    if (curvature > 0.0) {
+      vec2 centered = workingUV * 2.0 - 1.0;
+      float dist = dot(centered, centered);
+      centered *= 1.0 + curvature * dist;
+      workingUV = centered * 0.5 + 0.5;
+  
+      // Make out-of-bounds transparent so parent background shows through
+      if (workingUV.x < 0.0 || workingUV.x > 1.0 || workingUV.y < 0.0 || workingUV.y > 1.0) {
+        outputColor = vec4(0.0, 0.0, 0.0, 0.0);
+        return;
+      }
+    }
+  
+    // Wave distortion
+    if (waveAmplitude > 0.0) {
+      workingUV.x += sin(workingUV.y * waveFrequency + time * waveSpeed) * waveAmplitude;
+      workingUV.y += cos(workingUV.x * waveFrequency + time * waveSpeed) * waveAmplitude * 0.5;
+    }
+  
+    // ===========================
+    // CORE ASCII RENDERING
+    // ===========================
+  
+    vec2 res = resolution;
+    vec2 cellCount = res / cellSize;
+    vec2 cellCoord = floor(workingUV * cellCount);
+  
+    // Frame rate control
+    if (targetFPS > 0.0) {
+      float frameTime = 1.0 / targetFPS;
+      float frameIndex = floor(time / frameTime);
+      cellCoord = floor(workingUV * cellCount) + vec2(random(vec2(frameIndex)) * 0.5);
+    }
+  
+    vec2 cellUV = (cellCoord + 0.5) / cellCount;
+  
+    // Chromatic aberration
+    vec4 cellColor;
+    if (aberrationStrength > 0.0) {
+      float r = texture(inputBuffer, cellUV + vec2(aberrationStrength, 0.0)).r;
+      float g = texture(inputBuffer, cellUV).g;
+      float b = texture(inputBuffer, cellUV - vec2(aberrationStrength, 0.0)).b;
+      cellColor = vec4(r, g, b, 1.0);
+    } else {
+      cellColor = texture(inputBuffer, cellUV);
+    }
+  
+    // Calculate brightness
+    float brightness = dot(cellColor.rgb, vec3(0.299, 0.587, 0.114));
+  
+    // Contrast and brightness adjustment
+    brightness = (brightness - 0.5) * contrastAdjust + 0.5 + brightnessAdjust;
+    brightness = clamp(brightness, 0.0, 1.0);
+  
+    // Time-based noise
+    if (noiseIntensity > 0.0) {
+      float noiseVal = noise(workingUV * noiseScale * 100.0 + time * noiseSpeed);
+      brightness = mix(brightness, noiseVal, noiseIntensity);
+    }
+  
+    // Jitter/fuzzy effect
+    if (jitterIntensity > 0.0) {
+      float jitter = random(cellCoord + floor(time * jitterSpeed) * 0.1) - 0.5;
+      brightness += jitter * jitterIntensity;
+      brightness = clamp(brightness, 0.0, 1.0);
+    }
+  
+    // RGB Glitch
+    if (glitchIntensity > 0.0 && glitchFrequency > 0.0) {
+      float glitchTrigger = random(vec2(time * glitchFrequency));
+      if (glitchTrigger > 0.9) {
+        float glitchOffset = (random(cellCoord + time) - 0.5) * glitchIntensity;
+        cellColor.r = texture(inputBuffer, cellUV + vec2(glitchOffset, 0.0)).r;
+        cellColor.b = texture(inputBuffer, cellUV - vec2(glitchOffset, 0.0)).b;
+      }
+    }
+  
+    if (invert) {
+      brightness = 1.0 - brightness;
+    }
+  
+    // Get local UV within the cell
+    vec2 localUV = fract(workingUV * cellCount);
+    float charValue = getChar(brightness, localUV, asciiStyle);
+  
+    // ===========================
+    // TIER 1: POST-PROCESSING
+    // ===========================
+  
+    vec3 finalColor;
+  
+    if (colorMode) {
+      finalColor = cellColor.rgb * charValue;
+    } else {
+      finalColor = vec3(brightness * charValue);
+    }
+  
+    // Color palette
+    finalColor = applyColorPalette(finalColor, brightness, colorPalette);
+  
+    // Mouse glow
+    if (mouseGlowEnabled && mouseGlowRadius > 0.0) {
+      vec2 pixelPos = workingUV * res;
+      float dist = distance(pixelPos, mousePos);
+      float glow = 1.0 - smoothstep(0.0, mouseGlowRadius, dist);
+      glow = pow(glow, 2.0);
+      finalColor *= 1.0 + glow * mouseGlowIntensity;
+    }
+  
+    // Scanlines
+    if (scanlineIntensity > 0.0) {
+      float scanline = sin(workingUV.y * scanlineCount * 3.14159) * 0.5 + 0.5;
+      finalColor *= 1.0 - scanlineIntensity * (1.0 - scanline);
+    }
+  
+    // Vignette
+    if (vignetteIntensity > 0.0) {
+      vec2 centered = workingUV - 0.5;
+      float dist = length(centered) / 0.707; // Normalize to corner distance
+      float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, dist);
+      finalColor *= mix(1.0, vignette, vignetteIntensity);
+    }
+  
+    outputColor = vec4(finalColor, cellColor.a);
+  }
+`;
+
+// src/shaders/efecto-media-image/vertex.glsl
+var vertex_default5 = "uniform vec2 uvScale;\nuniform vec2 uvOffset;\nvarying vec2 vUv;\n\nvoid main() {\n  // Apply texture scale and offset for cover-fill effect\n  vUv = uv * uvScale + uvOffset;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}";
+
+// src/shaders/efecto-media-image/fragment.glsl
+var fragment_default6 = "uniform sampler2D map;\nuniform float brightness;\nuniform float contrast;\nuniform float saturation;\nvarying vec2 vUv;\n\nvec3 adjustContrast(vec3 color, float contrastAmount) {\n  return (color - 0.5) * contrastAmount + 0.5;\n}\n\nvec3 adjustSaturation(vec3 color, float saturationAmount) {\n  float gray = dot(color, vec3(0.299, 0.587, 0.114));\n  return mix(vec3(gray), color, saturationAmount);\n}\n\nvoid main() {\n  vec4 texel = texture2D(map, vUv);\n  vec3 color = texel.rgb;\n\n  // Apply brightness\n  color *= brightness;\n\n  // Apply contrast\n  color = adjustContrast(color, contrast);\n\n  // Apply saturation\n  color = adjustSaturation(color, saturation);\n\n  gl_FragColor = vec4(color, texel.a);\n}";
+
+// src/components/EfectoAsciiEffect.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DEFAULT_RESOLUTION = new Vector23(1920, 1080);
+var DEFAULT_MOUSE_POSITION = new Vector23(0, 0);
+var PARALLAX_LERP = 0.12;
+var STYLE_MAP = {
+  standard: 0,
+  dense: 1,
+  minimal: 2,
+  blocks: 3
+};
+var COLOR_PALETTE_MAP = {
+  original: 0,
+  green: 1,
+  amber: 2,
+  cyan: 3,
+  blue: 4
+};
+var EFECTO_ASCII_COMPONENT_DEFAULTS = {
+  cellSize: 8,
+  invert: false,
+  colorMode: true,
+  asciiStyle: "standard"
+};
+var EFECTO_ASCII_POST_PROCESSING_DEFAULTS = {
+  scanlineIntensity: 0,
+  scanlineCount: 200,
+  targetFPS: 0,
+  jitterIntensity: 0,
+  jitterSpeed: 0,
+  mouseGlowEnabled: false,
+  mouseGlowRadius: 200,
+  mouseGlowIntensity: 1.5,
+  vignetteIntensity: 0,
+  vignetteRadius: 0.8,
+  colorPalette: COLOR_PALETTE_MAP.original,
+  curvature: 0,
+  aberrationStrength: 0,
+  noiseIntensity: 0,
+  noiseScale: 0.1,
+  noiseSpeed: 0,
+  waveAmplitude: 0,
+  waveFrequency: 3,
+  waveSpeed: 0.2,
+  glitchIntensity: 0,
+  glitchFrequency: 0,
+  brightnessAdjust: 0,
+  contrastAdjust: 1
+};
+var normalizePostProcessing = (overrides) => {
+  const { colorPalette: overridePalette, ...otherOverrides } = overrides ?? {};
+  const merged = {
+    ...EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
+    ...otherOverrides
+  };
+  const paletteValue = overridePalette === void 0 ? merged.colorPalette : typeof overridePalette === "string" ? COLOR_PALETTE_MAP[overridePalette.toLowerCase()] ?? COLOR_PALETTE_MAP.original : overridePalette;
+  return { ...merged, colorPalette: paletteValue };
+};
+var AsciiEffectImpl = class extends Effect {
+  constructor(initialProps) {
+    const uniformEntries = [
+      ["cellSize", new Uniform(initialProps.cellSize)],
+      ["invert", new Uniform(initialProps.invert)],
+      ["colorMode", new Uniform(initialProps.colorMode)],
+      ["asciiStyle", new Uniform(initialProps.asciiStyle)],
+      ["time", new Uniform(0)],
+      ["resolution", new Uniform(initialProps.resolution.clone())],
+      ["mousePos", new Uniform(initialProps.mousePos.clone())],
+      ["scanlineIntensity", new Uniform(initialProps.scanlineIntensity)],
+      ["scanlineCount", new Uniform(initialProps.scanlineCount)],
+      ["targetFPS", new Uniform(initialProps.targetFPS)],
+      ["jitterIntensity", new Uniform(initialProps.jitterIntensity)],
+      ["jitterSpeed", new Uniform(initialProps.jitterSpeed)],
+      ["mouseGlowEnabled", new Uniform(initialProps.mouseGlowEnabled)],
+      ["mouseGlowRadius", new Uniform(initialProps.mouseGlowRadius)],
+      ["mouseGlowIntensity", new Uniform(initialProps.mouseGlowIntensity)],
+      ["vignetteIntensity", new Uniform(initialProps.vignetteIntensity)],
+      ["vignetteRadius", new Uniform(initialProps.vignetteRadius)],
+      ["colorPalette", new Uniform(initialProps.colorPalette)],
+      ["curvature", new Uniform(initialProps.curvature)],
+      ["aberrationStrength", new Uniform(initialProps.aberrationStrength)],
+      ["noiseIntensity", new Uniform(initialProps.noiseIntensity)],
+      ["noiseScale", new Uniform(initialProps.noiseScale)],
+      ["noiseSpeed", new Uniform(initialProps.noiseSpeed)],
+      ["waveAmplitude", new Uniform(initialProps.waveAmplitude)],
+      ["waveFrequency", new Uniform(initialProps.waveFrequency)],
+      ["waveSpeed", new Uniform(initialProps.waveSpeed)],
+      ["glitchIntensity", new Uniform(initialProps.glitchIntensity)],
+      ["glitchFrequency", new Uniform(initialProps.glitchFrequency)],
+      ["brightnessAdjust", new Uniform(initialProps.brightnessAdjust)],
+      ["contrastAdjust", new Uniform(initialProps.contrastAdjust)]
+    ];
+    super("AsciiEffect", fragment_default5, {
+      blendFunction: BlendFunction.SRC,
+      uniforms: new Map(uniformEntries)
+    });
+    this.time = 0;
+    this.deltaAccumulator = 0;
+  }
+  updateUniforms(nextProps) {
+    if (nextProps.cellSize !== void 0) {
+      this.uniforms.get("cellSize").value = nextProps.cellSize;
+    }
+    if (nextProps.invert !== void 0) {
+      this.uniforms.get("invert").value = nextProps.invert;
+    }
+    if (nextProps.colorMode !== void 0) {
+      this.uniforms.get("colorMode").value = nextProps.colorMode;
+    }
+    if (nextProps.asciiStyle !== void 0) {
+      this.uniforms.get("asciiStyle").value = nextProps.asciiStyle;
+    }
+    if (nextProps.resolution) {
+      this.setVector2Uniform("resolution", nextProps.resolution);
+    }
+    if (nextProps.mousePos) {
+      this.setVector2Uniform("mousePos", nextProps.mousePos);
+    }
+    const uniformKeys = Object.keys(
+      EFECTO_ASCII_POST_PROCESSING_DEFAULTS
+    );
+    for (const key of uniformKeys) {
+      if (nextProps[key] !== void 0) {
+        this.uniforms.get(key).value = nextProps[key];
+      }
+    }
+  }
+  setVector2Uniform(key, nextValue) {
+    const uniform = this.uniforms.get(key);
+    if (!uniform) {
+      return;
+    }
+    if (uniform.value instanceof Vector23) {
+      uniform.value.copy(nextValue);
+      return;
+    }
+    uniform.value = nextValue.clone();
+  }
+  update(_renderer, _inputBuffer, deltaTime) {
+    const targetFPS = this.uniforms.get("targetFPS").value;
+    if (targetFPS > 0) {
+      const frameDuration = 1 / targetFPS;
+      this.deltaAccumulator += deltaTime;
+      if (this.deltaAccumulator >= frameDuration) {
+        this.time += frameDuration;
+        this.deltaAccumulator = this.deltaAccumulator % frameDuration;
+      }
+    } else {
+      this.time += deltaTime;
+    }
+    this.uniforms.get("time").value = this.time;
+  }
+};
+function AsciiEffect({
+  cellSize = EFECTO_ASCII_COMPONENT_DEFAULTS.cellSize,
+  invert = EFECTO_ASCII_COMPONENT_DEFAULTS.invert,
+  colorMode = EFECTO_ASCII_COMPONENT_DEFAULTS.colorMode,
+  asciiStyle: asciiStyleProp = EFECTO_ASCII_COMPONENT_DEFAULTS.asciiStyle,
+  imageUrl,
+  resolution,
+  mousePosition,
+  postProcessing = {},
+  mediaAdjustments,
+  mouseParallax = false,
+  parallaxIntensity = 0.5,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const composerRef = useRef6(null);
+  const effectRef = useRef6(null);
+  const assetsRef = useRef6(null);
+  const loadedTextureRef = useRef6(null);
+  const cameraRef = useRef6(null);
+  const mediaUniformsRef = useRef6({
+    map: { value: null },
+    brightness: { value: EFECTO_MEDIA_ADJUSTMENT_DEFAULTS.brightness },
+    contrast: { value: EFECTO_MEDIA_ADJUSTMENT_DEFAULTS.contrast },
+    saturation: { value: EFECTO_MEDIA_ADJUSTMENT_DEFAULTS.saturation },
+    uvScale: { value: new Vector23(1, 1) },
+    uvOffset: { value: new Vector23(0, 0) }
+  });
+  const pointerBoundsRef = useRef6({
+    left: 0,
+    top: 0,
+    width: 1,
+    height: 1
+  });
+  const manualResolutionRef = useRef6(
+    resolution ? resolution.clone() : null
+  );
+  manualResolutionRef.current = resolution ? resolution.clone() : null;
+  const resolutionRef = useRef6(
+    manualResolutionRef.current ? manualResolutionRef.current.clone() : DEFAULT_RESOLUTION.clone()
+  );
+  const autoMouseRef = useRef6(DEFAULT_MOUSE_POSITION.clone());
+  const usesExternalMouseRef = useRef6(Boolean(mousePosition));
+  usesExternalMouseRef.current = Boolean(mousePosition);
+  const viewportSizeRef = useRef6({ width: 1, height: 1 });
+  const meshDisplaySizeRef = useRef6({ width: 1, height: 1 });
+  const parallaxStateRef = useRef6({
+    targetX: 0,
+    targetY: 0,
+    rotationX: 0,
+    rotationY: 0
+  });
+  const parallaxIntensityRef = useRef6(
+    THREE6.MathUtils.clamp(parallaxIntensity ?? 0, 0, 1)
+  );
+  parallaxIntensityRef.current = THREE6.MathUtils.clamp(
+    parallaxIntensity ?? 0,
+    0,
+    1
+  );
+  const normalizedStyle = typeof asciiStyleProp === "string" ? asciiStyleProp.toLowerCase() ?? EFECTO_ASCII_COMPONENT_DEFAULTS.asciiStyle : EFECTO_ASCII_COMPONENT_DEFAULTS.asciiStyle;
+  const asciiStyle = STYLE_MAP[normalizedStyle] ?? STYLE_MAP.standard;
+  const resolvedPostProcessing = useMemo3(
+    () => normalizePostProcessing(postProcessing),
+    [postProcessing]
+  );
+  const resolvedMediaAdjustments = useMemo3(
+    () => resolveEfectoMediaAdjustments(mediaAdjustments),
+    [mediaAdjustments]
+  );
+  const initialEffectPropsRef = useRef6(null);
+  if (!initialEffectPropsRef.current) {
+    initialEffectPropsRef.current = {
+      cellSize,
+      invert,
+      colorMode,
+      asciiStyle,
+      resolution: resolutionRef.current.clone(),
+      mousePos: (mousePosition ?? DEFAULT_MOUSE_POSITION).clone(),
+      ...resolvedPostProcessing
+    };
+  }
+  const updateTextureUVTransform = useCallback5(() => {
+    const texture = loadedTextureRef.current;
+    if (!texture || !texture.image) {
+      return;
+    }
+    const { width: planeWidth, height: planeHeight } = meshDisplaySizeRef.current;
+    if (planeWidth <= 0 || planeHeight <= 0) {
+      return;
+    }
+    const image = texture.image;
+    if (!image.width || !image.height) {
+      return;
+    }
+    const imageAspect = image.width / image.height;
+    const planeAspect = planeWidth / planeHeight;
+    let scaleX = 1;
+    let scaleY = 1;
+    if (imageAspect > planeAspect) {
+      scaleX = imageAspect / planeAspect;
+    } else {
+      scaleY = planeAspect / imageAspect;
+    }
+    const uvScaleX = 1 / scaleX;
+    const uvScaleY = 1 / scaleY;
+    const offsetX = (1 - uvScaleX) * 0.5;
+    const offsetY = (1 - uvScaleY) * 0.5;
+    mediaUniformsRef.current.uvScale.value.set(uvScaleX, uvScaleY);
+    mediaUniformsRef.current.uvOffset.value.set(offsetX, offsetY);
+    const assets = assetsRef.current;
+    if (assets) {
+      assets.material.uniforms.uvScale.value.set(
+        uvScaleX,
+        uvScaleY
+      );
+      assets.material.uniforms.uvOffset.value.set(
+        offsetX,
+        offsetY
+      );
+    }
+  }, []);
+  const updateMeshScale = useCallback5(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    const { width: width2, height: height2 } = viewportSizeRef.current;
+    const camera = cameraRef.current;
+    let viewWidth = width2;
+    let viewHeight = height2;
+    if (camera instanceof THREE6.PerspectiveCamera) {
+      const distance = Math.abs(camera.position.z - assets.mesh.position.z);
+      const verticalFov = THREE6.MathUtils.degToRad(camera.fov);
+      viewHeight = 2 * Math.tan(verticalFov / 2) * distance;
+      viewWidth = viewHeight * camera.aspect;
+    }
+    const texture = loadedTextureRef.current;
+    if (!texture || !texture.image) {
+      assets.mesh.scale.set(viewWidth, viewHeight, 1);
+      meshDisplaySizeRef.current = { width: viewWidth, height: viewHeight };
+      return;
+    }
+    const image = texture.image;
+    const imageAspect = image.width && image.height ? image.width / Math.max(1, image.height) : 1;
+    const viewportAspect = viewWidth / Math.max(1, viewHeight);
+    let meshWidth = viewWidth;
+    let meshHeight = viewHeight;
+    if (imageAspect > viewportAspect) {
+      meshHeight = viewHeight;
+      meshWidth = viewHeight * imageAspect;
+    } else {
+      meshWidth = viewWidth;
+      meshHeight = viewWidth / Math.max(1e-4, imageAspect);
+    }
+    assets.mesh.scale.set(meshWidth, meshHeight, 1);
+    meshDisplaySizeRef.current = { width: meshWidth, height: meshHeight };
+    updateTextureUVTransform();
+  }, [updateTextureUVTransform]);
+  const updatePointerBounds = useCallback5(
+    (container = containerRef.current) => {
+      if (!container) return;
+      const bounds = container.getBoundingClientRect();
+      pointerBoundsRef.current = {
+        left: bounds.left,
+        top: bounds.top,
+        width: bounds.width || 1,
+        height: bounds.height || 1
+      };
+    },
+    []
+  );
+  const resetParallax = useCallback5(() => {
+    parallaxStateRef.current.targetX = 0;
+    parallaxStateRef.current.targetY = 0;
+    parallaxStateRef.current.rotationX = 0;
+    parallaxStateRef.current.rotationY = 0;
+    const mesh = assetsRef.current?.mesh;
+    if (mesh) {
+      mesh.rotation.x = 0;
+      mesh.rotation.y = 0;
+    }
+  }, []);
+  const handleCreate = useCallback5(
+    ({ scene, camera, renderer, size }) => {
+      renderer.outputColorSpace = THREE6.SRGBColorSpace;
+      renderer.toneMapping = THREE6.NoToneMapping;
+      if (!manualResolutionRef.current) {
+        resolutionRef.current.set(size.width, size.height);
+      }
+      viewportSizeRef.current = { width: size.width, height: size.height };
+      const geometry = new THREE6.PlaneGeometry(1, 1);
+      const material = new THREE6.ShaderMaterial({
+        vertexShader: vertex_default5,
+        fragmentShader: fragment_default6,
+        uniforms: mediaUniformsRef.current,
+        transparent: true,
+        depthTest: false
+      });
+      material.toneMapped = false;
+      const mesh = new THREE6.Mesh(geometry, material);
+      scene.add(mesh);
+      if (loadedTextureRef.current) {
+        mediaUniformsRef.current.map.value = loadedTextureRef.current;
+        material.uniforms.map.value = loadedTextureRef.current;
+      }
+      assetsRef.current = { mesh, geometry, material };
+      cameraRef.current = camera;
+      updateMeshScale();
+      const composer = new EffectComposer(renderer);
+      const renderPass = new RenderPass(scene, camera);
+      const effect = new AsciiEffectImpl({
+        ...initialEffectPropsRef.current,
+        resolution: resolutionRef.current.clone()
+      });
+      const effectPass = new EffectPass(camera, effect);
+      effectPass.renderToScreen = true;
+      composer.addPass(renderPass);
+      composer.addPass(effectPass);
+      composer.setSize(size.width, size.height);
+      composerRef.current = composer;
+      effectRef.current = effect;
+      return () => {
+        composer.dispose();
+        if (assetsRef.current) {
+          scene.remove(assetsRef.current.mesh);
+          assetsRef.current.geometry.dispose();
+          assetsRef.current.material.dispose();
+          assetsRef.current = null;
+        }
+        cameraRef.current = null;
+        loadedTextureRef.current?.dispose();
+        loadedTextureRef.current = null;
+        composerRef.current = null;
+        effectRef.current = null;
+      };
+    },
+    [updateMeshScale]
+  );
+  const handleRender = useCallback5(
+    (_context, delta, _elapsed) => {
+      const assets = assetsRef.current;
+      if (assets) {
+        const enabled = mouseParallax && parallaxIntensityRef.current > 0 && assets.mesh;
+        if (enabled) {
+          parallaxStateRef.current.rotationX += (parallaxStateRef.current.targetX - parallaxStateRef.current.rotationX) * PARALLAX_LERP;
+          parallaxStateRef.current.rotationY += (parallaxStateRef.current.targetY - parallaxStateRef.current.rotationY) * PARALLAX_LERP;
+          assets.mesh.rotation.x = parallaxStateRef.current.rotationX;
+          assets.mesh.rotation.y = parallaxStateRef.current.rotationY;
+        } else if (Math.abs(assets.mesh.rotation.x) > 1e-3 || Math.abs(assets.mesh.rotation.y) > 1e-3) {
+          assets.mesh.rotation.x *= 0.9;
+          assets.mesh.rotation.y *= 0.9;
+        }
+      }
+      composerRef.current?.render(delta);
+    },
+    [mouseParallax]
+  );
+  const handleResize = useCallback5(
+    (_context, size) => {
+      const composer = composerRef.current;
+      composer?.setSize(size.width, size.height);
+      viewportSizeRef.current = { width: size.width, height: size.height };
+      updateMeshScale();
+      updatePointerBounds(containerRef.current);
+      if (manualResolutionRef.current) {
+        resolutionRef.current.copy(manualResolutionRef.current);
+      } else {
+        resolutionRef.current.set(size.width, size.height);
+      }
+      effectRef.current?.updateUniforms({
+        resolution: resolutionRef.current
+      });
+      if (!usesExternalMouseRef.current) {
+        autoMouseRef.current.set(size.width / 2, size.height / 2);
+        effectRef.current?.updateUniforms({ mousePos: autoMouseRef.current });
+      }
+    },
+    [updateMeshScale, updatePointerBounds]
+  );
+  const { containerRef, contextRef } = useScene({
+    camera: {
+      type: "perspective",
+      near: 0.1,
+      far: 100,
+      position: [0, 0, 10],
+      fov: 50
+    },
+    onCreate: handleCreate,
+    onRender: handleRender,
+    onResize: handleResize,
+    manualRender: true
+  });
+  useEffect6(() => {
+    if (!mouseParallax) {
+      resetParallax();
+    }
+  }, [mouseParallax, resetParallax]);
+  useEffect6(() => {
+    if (!imageUrl) return;
+    let disposed = false;
+    const loader = new THREE6.TextureLoader();
+    loader.load(
+      imageUrl,
+      (texture) => {
+        if (disposed) {
+          texture.dispose();
+          return;
+        }
+        texture.colorSpace = THREE6.SRGBColorSpace;
+        texture.wrapS = THREE6.ClampToEdgeWrapping;
+        texture.wrapT = THREE6.ClampToEdgeWrapping;
+        texture.minFilter = THREE6.LinearFilter;
+        texture.magFilter = THREE6.LinearFilter;
+        loadedTextureRef.current?.dispose();
+        loadedTextureRef.current = texture;
+        mediaUniformsRef.current.map.value = texture;
+        const assets = assetsRef.current;
+        if (assets) {
+          assets.material.uniforms.map.value = texture;
+        }
+        updateMeshScale();
+        updateTextureUVTransform();
+      },
+      void 0,
+      () => {
+        if (disposed) return;
+        loadedTextureRef.current?.dispose();
+        loadedTextureRef.current = null;
+      }
+    );
+    return () => {
+      disposed = true;
+    };
+  }, [imageUrl, updateMeshScale, updateTextureUVTransform]);
+  useEffect6(() => {
+    const effect = effectRef.current;
+    if (!effect) return;
+    effect.updateUniforms({
+      cellSize,
+      invert,
+      colorMode,
+      asciiStyle
+    });
+  }, [asciiStyle, cellSize, colorMode, invert]);
+  useEffect6(() => {
+    if (!effectRef.current) return;
+    effectRef.current.updateUniforms(resolvedPostProcessing);
+  }, [resolvedPostProcessing]);
+  useEffect6(() => {
+    mediaUniformsRef.current.brightness.value = resolvedMediaAdjustments.brightness;
+    mediaUniformsRef.current.contrast.value = resolvedMediaAdjustments.contrast;
+    mediaUniformsRef.current.saturation.value = resolvedMediaAdjustments.saturation;
+    const material = assetsRef.current?.material;
+    if (material) {
+      material.uniforms.brightness.value = resolvedMediaAdjustments.brightness;
+      material.uniforms.contrast.value = resolvedMediaAdjustments.contrast;
+      material.uniforms.saturation.value = resolvedMediaAdjustments.saturation;
+    }
+  }, [resolvedMediaAdjustments]);
+  useEffect6(() => {
+    if (!mousePosition || !effectRef.current) return;
+    effectRef.current.updateUniforms({ mousePos: mousePosition });
+  }, [mousePosition]);
+  useEffect6(() => {
+    if (!resolution || !effectRef.current) return;
+    resolutionRef.current.copy(resolution);
+    manualResolutionRef.current = resolution.clone();
+    effectRef.current.updateUniforms({ resolution });
+  }, [resolution]);
+  useEffect6(() => {
+    if (mousePosition) return;
+    const container = containerRef.current;
+    if (!container) return;
+    updatePointerBounds(container);
+    const updateFromEvent = (event) => {
+      const bounds = pointerBoundsRef.current;
+      autoMouseRef.current.set(
+        event.clientX - bounds.left,
+        bounds.height - (event.clientY - bounds.top)
+      );
+      effectRef.current?.updateUniforms({ mousePos: autoMouseRef.current });
+      if (mouseParallax && bounds.width > 0 && bounds.height > 0) {
+        const normalizedX = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2;
+        const normalizedY = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2;
+        const intensity = parallaxIntensityRef.current;
+        parallaxStateRef.current.targetY = 0.3 * normalizedX * intensity;
+        parallaxStateRef.current.targetX = -0.2 * normalizedY * intensity;
+      }
+    };
+    const handlePointerEnter = () => {
+      updatePointerBounds();
+    };
+    const resetToCenter = () => {
+      const size = contextRef.current?.size ?? {
+        width: container.clientWidth || 1,
+        height: container.clientHeight || 1
+      };
+      autoMouseRef.current.set(size.width / 2, size.height / 2);
+      effectRef.current?.updateUniforms({ mousePos: autoMouseRef.current });
+      if (mouseParallax) {
+        resetParallax();
+      }
+    };
+    resetToCenter();
+    container.addEventListener("pointermove", updateFromEvent);
+    container.addEventListener("pointerenter", handlePointerEnter);
+    container.addEventListener("pointerleave", resetToCenter);
+    return () => {
+      container.removeEventListener("pointermove", updateFromEvent);
+      container.removeEventListener("pointerenter", handlePointerEnter);
+      container.removeEventListener("pointerleave", resetToCenter);
+    };
+  }, [
+    containerRef,
+    contextRef,
+    mouseParallax,
+    mousePosition,
+    resetParallax,
+    updatePointerBounds
+  ]);
+  useEffect6(() => {
+    parallaxIntensityRef.current = THREE6.MathUtils.clamp(
+      parallaxIntensity ?? 0,
+      0,
+      1
+    );
+  }, [parallaxIntensity]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/EfectoAsciiWrapper.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function EfectoAsciiWrapper({
+  settings,
+  imageUrl,
+  mediaAdjustments,
+  mouseParallax,
+  parallaxIntensity,
+  ...passThrough
+}) {
+  return /* @__PURE__ */ jsx6(
+    AsciiEffect,
+    {
+      asciiStyle: settings.asciiStyle,
+      cellSize: settings.cellSize,
+      invert: settings.invert,
+      colorMode: settings.colorMode,
+      postProcessing: settings.postProcessing,
+      imageUrl,
+      mediaAdjustments,
+      mouseParallax,
+      parallaxIntensity,
+      ...passThrough
+    }
+  );
+}
+
+// src/components/Efecto.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ASCII_BASE_DEFAULTS = {
+  cellSize: EFECTO_ASCII_COMPONENT_DEFAULTS.cellSize,
+  invert: EFECTO_ASCII_COMPONENT_DEFAULTS.invert,
+  colorMode: EFECTO_ASCII_COMPONENT_DEFAULTS.colorMode,
+  asciiStyle: EFECTO_ASCII_COMPONENT_DEFAULTS.asciiStyle
+};
+function Efecto({
+  postProcessing,
+  src,
+  mouseParallax = false,
+  parallaxIntensity = 0.5,
+  mediaAdjustments,
+  cellSize,
+  invert,
+  colorMode,
+  style,
+  asciiStyle,
+  ...wrapperProps
+}) {
+  const resolvedStyle = style ?? asciiStyle ?? ASCII_BASE_DEFAULTS.asciiStyle;
+  const baseAsciiProps = {
+    cellSize: cellSize ?? ASCII_BASE_DEFAULTS.cellSize,
+    invert: invert ?? ASCII_BASE_DEFAULTS.invert,
+    colorMode: colorMode ?? ASCII_BASE_DEFAULTS.colorMode,
+    asciiStyle: resolvedStyle
+  };
+  const asciiSettings = {
+    ...baseAsciiProps,
+    postProcessing
+  };
+  return /* @__PURE__ */ jsx7(
+    EfectoAsciiWrapper,
+    {
+      settings: asciiSettings,
+      imageUrl: src,
+      mediaAdjustments,
+      mouseParallax,
+      parallaxIntensity,
+      ...wrapperProps
+    }
+  );
+}
+
+// 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
 };