@toriistudio/shader-ui 0.0.2 → 0.0.3

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,7 +1053,1047 @@ 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
+    }
+  );
+}
 export {
+  EFECTO_ASCII_COMPONENT_DEFAULTS,
+  EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
+  Efecto,
   FractalFlower,
   MenuGlitch,
   OranoParticles,