@toriistudio/shader-ui 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -13,13 +13,15 @@ function useScene({
   onCreate,
   onRender,
   onResize,
-  deps
+  deps,
+  manualRender = false
 } = {}) {
   const containerRef = useRef(null);
   const contextRef = useRef(null);
   const onCreateRef = useRef(onCreate);
   const onRenderRef = useRef(onRender);
   const onResizeRef = useRef(onResize);
+  const sizeRef = useRef({ width: 0, height: 0 });
   useEffect(() => {
     onCreateRef.current = onCreate;
   }, [onCreate]);
@@ -34,43 +36,90 @@ function useScene({
     const container = containerRef.current;
     if (!container) return;
     const resolvedPixelRatio = pixelRatio ?? (typeof window !== "undefined" ? Math.min(window.devicePixelRatio, 2) : 1);
+    const initialWidth = container.clientWidth || 1;
+    const initialHeight = container.clientHeight || 1;
+    sizeRef.current = { width: initialWidth, height: initialHeight };
     const renderer = new THREE.WebGLRenderer({
       alpha: true,
       antialias: true,
       ...rendererOptions
     });
+    renderer.autoClear = false;
+    renderer.autoClearColor = true;
+    renderer.autoClearDepth = true;
+    renderer.autoClearStencil = true;
     renderer.setPixelRatio(resolvedPixelRatio);
-    renderer.setSize(container.clientWidth, container.clientHeight, false);
+    renderer.setSize(initialWidth, initialHeight, false);
     renderer.setClearColor(0, 0);
     renderer.domElement.style.width = "100%";
     renderer.domElement.style.height = "100%";
     container.appendChild(renderer.domElement);
     const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(
-      cameraOptions?.fov ?? 55,
-      container.clientWidth / Math.max(1, container.clientHeight),
-      cameraOptions?.near ?? 0.1,
-      cameraOptions?.far ?? 500
-    );
-    const [x = 0, y = 0, z = 15] = cameraOptions?.position ?? [];
-    camera.position.set(x, y, z);
+    let camera;
+    if (cameraOptions?.type === "orthographic") {
+      const halfWidth = initialWidth / 2;
+      const halfHeight = initialHeight / 2;
+      const orthoCamera = new THREE.OrthographicCamera(
+        -halfWidth,
+        halfWidth,
+        halfHeight,
+        -halfHeight,
+        cameraOptions?.near ?? 0.1,
+        cameraOptions?.far ?? 1e3
+      );
+      const [, , z = 10] = cameraOptions?.position ?? [];
+      orthoCamera.position.set(0, 0, z);
+      camera = orthoCamera;
+    } else {
+      const perspectiveCamera = new THREE.PerspectiveCamera(
+        cameraOptions?.fov ?? 55,
+        initialWidth / Math.max(1, initialHeight),
+        cameraOptions?.near ?? 0.1,
+        cameraOptions?.far ?? 500
+      );
+      const [x = 0, y = 0, z = 15] = cameraOptions?.position ?? [];
+      perspectiveCamera.position.set(x, y, z);
+      camera = perspectiveCamera;
+    }
     const clock = new THREE.Clock();
-    const context = { renderer, scene, camera, clock };
+    const context = {
+      renderer,
+      scene,
+      camera,
+      clock,
+      size: { ...sizeRef.current }
+    };
     contextRef.current = context;
     const teardownCreate = onCreateRef.current?.(context);
+    let elapsedTime = 0;
     let animationFrameId = 0;
     const renderLoop = () => {
-      onRenderRef.current?.(context);
-      renderer.render(scene, camera);
+      const delta = clock.getDelta();
+      elapsedTime += delta;
+      context.size = { ...sizeRef.current };
+      onRenderRef.current?.(context, delta, elapsedTime);
+      if (!manualRender) {
+        renderer.render(scene, camera);
+      }
       animationFrameId = requestAnimationFrame(renderLoop);
     };
     animationFrameId = requestAnimationFrame(renderLoop);
     const resizeObserver = new ResizeObserver(() => {
-      const width = container.clientWidth;
-      const height = container.clientHeight;
+      const width = container.clientWidth || 1;
+      const height = container.clientHeight || 1;
       renderer.setSize(width, height, false);
-      camera.aspect = width / Math.max(1, height);
-      camera.updateProjectionMatrix();
+      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();
+      }
+      context.size = { ...sizeRef.current };
       onResizeRef.current?.(context, { width, height });
     });
     resizeObserver.observe(container);
@@ -130,15 +179,14 @@ function ShaderArt({
       assetsRef.current = null;
     };
   }, []);
-  const handleRender = useCallback((context) => {
-    shaderUniformsRef.current.iTime.value = context.clock.getElapsedTime();
-    const canvas = context.renderer.domElement;
-    shaderUniformsRef.current.iResolution.value.set(
-      canvas.width,
-      canvas.height,
-      1
-    );
-  }, []);
+  const handleRender = useCallback(
+    (context, _delta, elapsedTime) => {
+      shaderUniformsRef.current.iTime.value = elapsedTime;
+      const { width: width2, height: height2 } = context.size;
+      shaderUniformsRef.current.iResolution.value.set(width2, height2, 1);
+    },
+    []
+  );
   const { containerRef } = useScene({
     onCreate: handleCreate,
     onRender: handleRender
@@ -285,7 +333,12 @@ function FractalFlower({
       const points = new THREE3.Points(geometry, material);
       points.frustumCulled = false;
       scene.add(points);
-      assetsRef.current = { points, geometry, material, uniforms: uniformValues };
+      assetsRef.current = {
+        points,
+        geometry,
+        material,
+        uniforms: uniformValues
+      };
       return () => {
         scene.remove(points);
         geometry.dispose();
@@ -293,25 +346,29 @@ function FractalFlower({
         assetsRef.current = null;
       };
     },
-    [attributes.eValues, attributes.kValues, attributes.positions, attributes.rotations]
+    [
+      attributes.eValues,
+      attributes.kValues,
+      attributes.positions,
+      attributes.rotations
+    ]
   );
   const handleRender = useCallback2(
-    (context) => {
+    (context, delta, elapsedTime) => {
       const assets = assetsRef.current;
       if (!assets) return;
       const uniforms = assets.uniforms;
-      uniforms.uTime.value = context.clock.getElapsedTime();
-      const canvas = context.renderer.domElement;
-      uniforms.uResolution.value.set(canvas.width, canvas.height);
+      uniforms.uTime.value = elapsedTime;
+      const { width: width2, height: height2 } = context.size;
+      uniforms.uResolution.value.set(width2, height2);
       const basePointSize = Math.max(
         2,
-        canvas.height / 400 * (uniforms.uPetalRadius.value * 32)
+        height2 / 400 * (uniforms.uPetalRadius.value * 32)
       );
       const pointSize = Math.min(basePointSize, 6);
       uniforms.uPointSize.value = pointSize;
       const morph = morphRef.current;
       if (Math.abs(morph.target - morph.progress) > 1e-3) {
-        const delta = context.clock.getDelta();
         const direction = Math.sign(morph.target - morph.progress);
         morph.progress = clamp(
           morph.progress + direction * delta * MORPH_SPEED,
@@ -462,11 +519,14 @@ function OranoParticles({
       particlesRef.current = null;
     };
   }, []);
-  const handleRender = useCallback3((context) => {
-    const assets = particlesRef.current;
-    if (!assets) return;
-    assets.uniforms.uTime.value = context.clock.getElapsedTime();
-  }, []);
+  const handleRender = useCallback3(
+    (_context, _delta, elapsedTime) => {
+      const assets = particlesRef.current;
+      if (!assets) return;
+      assets.uniforms.uTime.value = elapsedTime;
+    },
+    []
+  );
   const { containerRef } = useScene({
     onCreate: handleCreate,
     onRender: handleRender
@@ -525,8 +585,1517 @@ function OranoParticles({
     }
   );
 }
+
+// src/components/MenuGlitch.tsx
+import { gsap } from "gsap";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect5,
+  useMemo as useMemo2,
+  useRef as useRef5
+} from "react";
+import * as THREE5 from "three";
+
+// src/shaders/menu-glitch/fragment.glsl
+var fragment_default4 = "#define M_PI 3.1415926535897932384626433832795\n\nuniform sampler2D tDiffuse;\nuniform sampler2D tGradient;\n\nuniform float uTime;\n\nuniform float uTileProgressVertical;\nuniform float uTileProgressHorizontal;\nuniform float uTileAmplitude;\nuniform vec2  uTileFrequency;\nuniform vec2  uTileOffset;\n\nuniform float uWaveProgress;\nuniform float uWaveAmplitude;\nuniform vec2  uWaveStrength;\n\nuniform float uGradientProgress;\nuniform float uGradientOffset;\nuniform float uGradientAmplitude;\n\nuniform float uBlueProgress;\nuniform float uBlueAmplitude;\n\nuniform float uWhiteTileChances;\nuniform float uWhiteTileFrequency;\nuniform float uWhiteTileStrength;\n\nuniform float uSaturation;\n\nvarying vec2 vUv;\n\n\n// --------------------------------------------------\n// Utilities\n// --------------------------------------------------\n\nfloat random(in vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec2 getTileCoord(vec2 pos, vec2 frequency) {\n    vec2 coord = vec2(\n        floor(pos.x * frequency.x),\n        floor(pos.y * frequency.y)\n    );\n\n    coord /= frequency;\n    return coord;\n}\n\nfloat toSin(float value) {\n    return (sin((value - 0.5) * M_PI) + 1.0) * 0.5;\n}\n\n\n// --------------------------------------------------\n// Main\n// --------------------------------------------------\n\nvoid main() {\n\n    // ------------------------\n    // Tiles\n    // ------------------------\n    vec2 tileCoord1 = getTileCoord(vUv, uTileFrequency * 1.8942);\n    vec2 tileCoord2 = getTileCoord(vUv, uTileFrequency * 1.0);\n    vec2 tileCoord3 = getTileCoord(vUv, uTileFrequency * 2.1245);\n\n    vec2 tileCoord = tileCoord2 +\n        step(random(tileCoord1), 0.5) * (tileCoord3 - tileCoord2);\n\n    float tileRandom = random(tileCoord);\n    float tileAngle  = tileRandom * M_PI * 2.0;\n\n    vec2 tileOffset = vec2(sin(tileAngle), cos(tileAngle)) * uTileOffset;\n\n    float tileProgress = 1.0 -\n        (distance(tileCoord.y, uTileProgressVertical) / (uTileAmplitude * 0.5));\n\n    tileProgress = clamp(tileProgress, 0.0, 1.0);\n\n    float tileProgressHorizontal = 1.0 -\n        (distance(tileCoord.x, uTileProgressHorizontal) / (uTileAmplitude * 0.5));\n    tileProgressHorizontal = clamp(tileProgressHorizontal, 0.0, 1.0);\n\n    // ------------------------\n    // Wave\n    // ------------------------\n    float waveProgress = 1.0 -\n        (distance(vUv.x, uWaveProgress) / (uWaveAmplitude * 0.5));\n\n    waveProgress = clamp(waveProgress, 0.0, 1.0);\n\n    vec2 waveOffset = toSin(waveProgress) * uWaveStrength;\n\n\n    // ------------------------\n    // Gradient\n    // ------------------------\n    float gradientProgress = (tileCoord.x - uGradientProgress) / uGradientAmplitude;\n    gradientProgress      += (tileRandom - 0.5) * uGradientOffset;\n\n    vec4 gradientColor = texture2D(\n        tGradient,\n        vec2(clamp(gradientProgress, 0.0, 1.0), 0.0)\n    );\n\n\n    // ------------------------\n    // Blue tint\n    // ------------------------\n    float blueProgress = (tileCoord.x - uBlueProgress) / uBlueAmplitude;\n    blueProgress      += tileOffset.x;\n    blueProgress       = clamp(blueProgress, 0.0, 1.0);\n\n\n    // ------------------------\n    // White flickering tiles\n    // ------------------------\n    float whiteTileProgress =\n        sin(uTime * uWhiteTileFrequency + tileRandom * M_PI * 2.0) * 0.5 + 0.5;\n\n    whiteTileProgress =\n        clamp(whiteTileProgress - (1.0 - uWhiteTileChances), 0.0, 1.0) *\n        (1.0 / uWhiteTileChances) *\n        uWhiteTileStrength;\n\n\n    // ------------------------\n    // Final color pipeline\n    // ------------------------\n    vec2 uv = vUv;\n\n    // Apply tile offset\n    uv += tileOffset * tileProgress;\n\n    // Apply waves (optional)\n    // uv += waveOffset;\n\n    // Repeat UV\n    uv = mod(uv, vec2(1.0));\n\n    // Base color removed so overlay only contains glitch elements\n    vec4 color = vec4(0.0);\n\n    // Add gradient\n    color.rgb += gradientColor.rgb * gradientColor.a * tileProgressHorizontal;\n\n    // Add white flicker effect\n    color.rgb += vec3(whiteTileProgress) * tileProgressHorizontal;\n\n    // Blue tone shift\n    vec3 blueColor = vec3((color.r + color.g + color.b) / 3.0) *\n                     vec3(0.3, 0.5, 1.0);\n\n    color.rgb = mix(color.rgb, blueColor, vec3(blueProgress));\n\n    // Saturation\n    color.rgb *= uSaturation;\n\n    float effectAlpha =\n        clamp(tileProgressHorizontal * (tileProgress * 0.6 + whiteTileProgress + gradientColor.a), 0.0, 1.0);\n\n    // Output\n    gl_FragColor = vec4(color.rgb, effectAlpha);\n}\n";
+
+// src/shaders/menu-glitch/vertex.glsl
+var vertex_default4 = "varying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
+
+// src/components/MenuGlitch.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var GRADIENT_DATA_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTVBRkY1OTJDREMyMTFFODhGRjFFRjgxRjM2QjM2MDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTVBRkY1OTNDREMyMTFFODhGRjFFRjgxRjM2QjM2MDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNUFGRjU5MENEQzIxMUU4OEZGMUVGODFGMzZCMzYwMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNUFGRjU5MUNEQzIxMUU4OEZGMUVGODFGMzZCMzYwMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pksi3ywAAADMSURBVHjarFDLDoMwDDMtUDjtME3TtMcn7f9/hngBCoTSTjsMydixnVZqxTcAX51Quwsad1M80PonWvdCUA7+rrii82eEulcG+hoTdwsrQtRB0UZu3KxrN8OPqIBKgRHxI8qaUTD1RuY2p90V+hOjmWix2uSSeGLPKrDdKc5GHzqZLPWY7XEG+F1PLBktpiuzf8ilkMvqcZfLLqf1ltnu7rLh4G88ZPxh4uUOmjMYO3aPqz8Yve0tGiaDduNr/xn8cWbBY8HLzQd8BBgAgOx+ERYDbIEAAAAASUVORK5CYII=";
+var BASE_TRANSITION_PROGRESS = 0.5;
+var SHOW_BASE_DURATION = 2.72;
+var HIDE_BASE_DURATION = 1.8;
+var SHOW_PRIMARY_DURATION = 1.1;
+var MIN_GLITCH_DURATION = 0.25;
+function MenuGlitch({
+  settings,
+  onShowDone,
+  onHideDone,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const diffuseTexture = useMemo2(() => createDiffuseTexture(), []);
+  const gradientTextureRef = useRef5(new THREE5.Texture());
+  const sanitizedValues = useMemo2(() => {
+    const clamp2 = THREE5.MathUtils.clamp;
+    return {
+      tileAmplitude: Math.max(0.1, settings.tileAmplitude),
+      planeScale: Math.max(0.1, settings.planeScale ?? 1),
+      tileOffsetX: settings.tileOffset.x,
+      tileOffsetY: settings.tileOffset.y,
+      tileFrequencyX: Math.max(0.1, settings.tileFrequency.x),
+      tileFrequencyY: Math.max(0.1, settings.tileFrequency.y),
+      gradientAmplitude: Math.max(0.05, settings.gradientAmplitude),
+      gradientOffset: settings.gradientOffset,
+      gradientProgress: settings.gradientProgress ?? 1,
+      blueAmplitude: Math.max(0.05, settings.blueAmplitude),
+      blueProgress: settings.blueProgress ?? 1,
+      waveAmplitude: Math.max(0.05, settings.waveAmplitude),
+      waveProgress: settings.waveProgress ?? 0.5,
+      waveStrengthX: settings.waveStrength.x,
+      waveStrengthY: settings.waveStrength.y,
+      whiteTileChances: clamp2(settings.whiteTileChances, 0.05, 1),
+      whiteTileFrequency: Math.max(0.01, settings.whiteTileFrequency),
+      whiteTileStrength: Math.max(0, settings.whiteTileStrength),
+      saturation: Math.max(0, settings.saturation),
+      duration: Math.max(
+        MIN_GLITCH_DURATION,
+        settings.duration ?? SHOW_PRIMARY_DURATION
+      ),
+      debug: settings.debug
+    };
+  }, [settings]);
+  const sanitizedRef = useRef5(sanitizedValues);
+  sanitizedRef.current = sanitizedValues;
+  const sizeRef = useRef5({ width: 0, height: 0 });
+  const assetsRef = useRef5(null);
+  const animationVisibleRef = useRef5(false);
+  const shaderUniforms = useRef5({
+    tDiffuse: { value: diffuseTexture },
+    tGradient: { value: gradientTextureRef.current },
+    uTime: { value: 0 },
+    uTileProgressVertical: { value: -0.5 },
+    uTileProgressHorizontal: { value: -0.5 },
+    uTileAmplitude: { value: settings.tileAmplitude },
+    uTileOffset: {
+      value: new THREE5.Vector2(settings.tileOffset.x, settings.tileOffset.y)
+    },
+    uTileFrequency: {
+      value: new THREE5.Vector2(
+        settings.tileFrequency.x,
+        settings.tileFrequency.y
+      )
+    },
+    uWaveProgress: { value: settings.waveProgress },
+    uWaveAmplitude: { value: settings.waveAmplitude },
+    uWaveStrength: {
+      value: new THREE5.Vector2(
+        settings.waveStrength.x,
+        settings.waveStrength.y
+      )
+    },
+    uGradientProgress: { value: settings.gradientProgress },
+    uGradientOffset: { value: settings.gradientOffset },
+    uGradientAmplitude: { value: settings.gradientAmplitude },
+    uBlueProgress: { value: settings.blueProgress },
+    uBlueAmplitude: { value: settings.blueAmplitude },
+    uWhiteTileChances: { value: settings.whiteTileChances },
+    uWhiteTileFrequency: { value: settings.whiteTileFrequency },
+    uWhiteTileStrength: { value: settings.whiteTileStrength },
+    uSaturation: { value: settings.saturation }
+  });
+  useEffect5(() => {
+    let disposed = false;
+    const loader = new THREE5.TextureLoader();
+    loader.load(
+      GRADIENT_DATA_URL,
+      (texture) => {
+        if (disposed) return;
+        texture.wrapS = THREE5.ClampToEdgeWrapping;
+        texture.wrapT = THREE5.ClampToEdgeWrapping;
+        texture.magFilter = THREE5.LinearFilter;
+        texture.minFilter = THREE5.LinearFilter;
+        texture.colorSpace = THREE5.SRGBColorSpace;
+        gradientTextureRef.current = texture;
+        shaderUniforms.current.tGradient.value = texture;
+      },
+      void 0,
+      () => {
+        if (disposed) return;
+        gradientTextureRef.current = new THREE5.Texture();
+        shaderUniforms.current.tGradient.value = gradientTextureRef.current;
+      }
+    );
+    return () => {
+      disposed = true;
+    };
+  }, []);
+  const updateMeshScale = useCallback4(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    const base = Math.max(
+      sizeRef.current.width || 1,
+      sizeRef.current.height || 1
+    );
+    const scale = base * sanitizedRef.current.planeScale;
+    assets.mesh.scale.set(scale, scale, 1);
+  }, []);
+  const updateVisibility = useCallback4(() => {
+    const mesh = assetsRef.current?.mesh;
+    if (!mesh) return;
+    mesh.visible = sanitizedRef.current.debug || animationVisibleRef.current;
+  }, []);
+  const handleCreate = useCallback4(
+    ({ scene, size }) => {
+      const geometry = new THREE5.PlaneGeometry(1, 1);
+      const material = new THREE5.ShaderMaterial({
+        vertexShader: vertex_default4,
+        fragmentShader: fragment_default4,
+        uniforms: shaderUniforms.current,
+        depthWrite: false,
+        depthTest: false,
+        transparent: true,
+        blending: THREE5.AdditiveBlending
+      });
+      const mesh = new THREE5.Mesh(geometry, material);
+      scene.add(mesh);
+      assetsRef.current = { mesh, geometry, material };
+      sizeRef.current = size;
+      updateMeshScale();
+      updateVisibility();
+      return () => {
+        scene.remove(mesh);
+        geometry.dispose();
+        material.dispose();
+        assetsRef.current = null;
+      };
+    },
+    [updateMeshScale, updateVisibility]
+  );
+  const handleRender = useCallback4(
+    (_context, _delta, elapsedTime) => {
+      shaderUniforms.current.uTime.value = elapsedTime;
+    },
+    []
+  );
+  const handleResize = useCallback4(
+    (_context, size) => {
+      sizeRef.current = size;
+      updateMeshScale();
+    },
+    [updateMeshScale]
+  );
+  const { containerRef } = useScene({
+    camera: { type: "orthographic", position: [0, 0, 10], near: 0.1, far: 100 },
+    onCreate: handleCreate,
+    onRender: handleRender,
+    onResize: handleResize
+  });
+  const showTimeline = useRef5(null);
+  const hideTimeline = useRef5(null);
+  const transitionTimeline = useRef5(null);
+  const timelineParams = useMemo2(
+    () => ({
+      tileAmplitude: sanitizedValues.tileAmplitude,
+      gradientAmplitude: sanitizedValues.gradientAmplitude,
+      gradientOffset: sanitizedValues.gradientOffset,
+      tileOffsetX: sanitizedValues.tileOffsetX,
+      duration: sanitizedValues.duration
+    }),
+    [
+      sanitizedValues.duration,
+      sanitizedValues.gradientAmplitude,
+      sanitizedValues.gradientOffset,
+      sanitizedValues.tileAmplitude,
+      sanitizedValues.tileOffsetX
+    ]
+  );
+  const primeShowAnimation = useCallback4(() => {
+    const uniforms = shaderUniforms.current;
+    uniforms.uTileProgressHorizontal.value = 1 + timelineParams.tileAmplitude * 0.5;
+    uniforms.uGradientProgress.value = 1 + timelineParams.gradientOffset;
+    uniforms.uBlueProgress.value = 1 + timelineParams.tileOffsetX;
+    uniforms.uSaturation.value = 1;
+    uniforms.uWhiteTileStrength.value = 0;
+  }, [
+    timelineParams.gradientOffset,
+    timelineParams.tileAmplitude,
+    timelineParams.tileOffsetX
+  ]);
+  const buildTimelines = useCallback4(() => {
+    const uniforms = shaderUniforms.current;
+    const glitchDuration = sanitizedRef.current.duration;
+    const desiredShowTotal = glitchDuration * (SHOW_BASE_DURATION / SHOW_PRIMARY_DURATION);
+    const desiredHideTotal = glitchDuration * (HIDE_BASE_DURATION / SHOW_PRIMARY_DURATION);
+    const showScale = desiredShowTotal / SHOW_BASE_DURATION;
+    const hideScale = desiredHideTotal / HIDE_BASE_DURATION;
+    const showAt = (time) => time / SHOW_BASE_DURATION * desiredShowTotal;
+    const hideAt = (time) => time / HIDE_BASE_DURATION * desiredHideTotal;
+    showTimeline.current?.kill();
+    hideTimeline.current?.kill();
+    transitionTimeline.current?.kill();
+    const showTl = gsap.timeline({ paused: true });
+    showTl.add(() => {
+      animationVisibleRef.current = true;
+      updateVisibility();
+    }, 0);
+    showTl.fromTo(
+      uniforms.uTileProgressHorizontal,
+      { value: 1 + timelineParams.tileAmplitude * 0.5 },
+      {
+        value: -timelineParams.tileAmplitude * 0.5,
+        duration: glitchDuration,
+        ease: "sine.inOut"
+      },
+      0
+    );
+    showTl.fromTo(
+      uniforms.uGradientProgress,
+      { value: 1 + timelineParams.gradientOffset },
+      {
+        value: -timelineParams.gradientOffset * 0.5 - timelineParams.gradientAmplitude,
+        duration: 0.6 * showScale,
+        ease: "sine.inOut"
+      },
+      showAt(0.1)
+    );
+    showTl.fromTo(
+      uniforms.uBlueProgress,
+      { value: 1 + timelineParams.tileOffsetX },
+      {
+        value: -timelineParams.tileOffsetX * 0.5 - timelineParams.gradientAmplitude,
+        duration: 0.6 * showScale,
+        ease: "sine.inOut"
+      },
+      showAt(0.125)
+    );
+    showTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1 },
+      { value: 1.01, duration: 0.52 * showScale, ease: "sine.inOut" },
+      0
+    );
+    showTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1 },
+      { value: 2.5, duration: 0.1 * showScale, ease: "sine.inOut" },
+      showAt(0.32)
+    );
+    showTl.fromTo(
+      uniforms.uSaturation,
+      { value: 2.5 },
+      { value: 1, duration: 1.8 * showScale, ease: "sine.out" },
+      showAt(0.92)
+    );
+    showTl.fromTo(
+      uniforms.uWhiteTileStrength,
+      { value: 0 },
+      { value: 0.1, duration: 1 * showScale, ease: "sine.inOut" },
+      showAt(0.3)
+    );
+    const hideTl = gsap.timeline({ paused: true });
+    hideTl.fromTo(
+      uniforms.uWhiteTileStrength,
+      { value: 0.1 },
+      { value: 0, duration: 1 * hideScale, ease: "sine.inOut" },
+      0
+    );
+    hideTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1 },
+      { value: 1.5, duration: 0.4 * hideScale, ease: "sine.inOut" },
+      hideAt(0.4)
+    );
+    hideTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1.5 },
+      { value: 1, duration: 1 * hideScale, ease: "sine.inOut" },
+      hideAt(0.8)
+    );
+    hideTl.fromTo(
+      uniforms.uBlueProgress,
+      {
+        value: -timelineParams.tileOffsetX * 0.5 - timelineParams.gradientAmplitude
+      },
+      {
+        value: 1 + timelineParams.tileOffsetX,
+        duration: 0.6 * hideScale,
+        ease: "sine.inOut"
+      },
+      hideAt(0.2)
+    );
+    hideTl.fromTo(
+      uniforms.uTileProgressHorizontal,
+      { value: -timelineParams.tileAmplitude * 0.5 },
+      {
+        value: 1 + timelineParams.tileAmplitude * 0.5,
+        duration: 0.9 * hideScale,
+        ease: "sine.inOut"
+      },
+      hideAt(0.2)
+    );
+    hideTl.fromTo(
+      uniforms.uGradientProgress,
+      {
+        value: -timelineParams.gradientOffset * 0.5 - timelineParams.gradientAmplitude
+      },
+      {
+        value: 1 + timelineParams.gradientOffset,
+        duration: 0.6 * hideScale,
+        ease: "sine.inOut"
+      },
+      hideAt(0.225)
+    );
+    hideTl.add(() => {
+      animationVisibleRef.current = false;
+      updateVisibility();
+      onHideDone?.();
+    }, hideAt(HIDE_BASE_DURATION));
+    showTl.call(
+      () => {
+        onShowDone?.();
+      },
+      void 0,
+      showAt(0.65)
+    );
+    showTimeline.current = showTl;
+    hideTimeline.current = hideTl;
+  }, [onHideDone, onShowDone, timelineParams, updateVisibility]);
+  useEffect5(() => {
+    const uniforms = shaderUniforms.current;
+    uniforms.tDiffuse.value = diffuseTexture;
+    if (gradientTextureRef.current) {
+      uniforms.tGradient.value = gradientTextureRef.current;
+    }
+    uniforms.uTileAmplitude.value = sanitizedValues.tileAmplitude;
+    uniforms.uTileOffset.value.set(
+      sanitizedValues.tileOffsetX,
+      sanitizedValues.tileOffsetY
+    );
+    uniforms.uTileFrequency.value.set(
+      sanitizedValues.tileFrequencyX,
+      sanitizedValues.tileFrequencyY
+    );
+    uniforms.uWaveAmplitude.value = sanitizedValues.waveAmplitude;
+    uniforms.uWaveProgress.value = sanitizedValues.waveProgress;
+    uniforms.uWaveStrength.value.set(
+      sanitizedValues.waveStrengthX,
+      sanitizedValues.waveStrengthY
+    );
+    uniforms.uGradientProgress.value = sanitizedValues.gradientProgress;
+    uniforms.uGradientOffset.value = sanitizedValues.gradientOffset;
+    uniforms.uGradientAmplitude.value = sanitizedValues.gradientAmplitude;
+    uniforms.uBlueProgress.value = sanitizedValues.blueProgress;
+    uniforms.uBlueAmplitude.value = sanitizedValues.blueAmplitude;
+    uniforms.uWhiteTileChances.value = sanitizedValues.whiteTileChances;
+    uniforms.uWhiteTileFrequency.value = sanitizedValues.whiteTileFrequency;
+    uniforms.uWhiteTileStrength.value = sanitizedValues.whiteTileStrength;
+    uniforms.uSaturation.value = sanitizedValues.saturation;
+    uniforms.uTileProgressVertical.value = BASE_TRANSITION_PROGRESS;
+    updateMeshScale();
+    updateVisibility();
+  }, [diffuseTexture, sanitizedValues, updateMeshScale, updateVisibility]);
+  useEffect5(() => {
+    buildTimelines();
+    return () => {
+      showTimeline.current?.kill();
+      hideTimeline.current?.kill();
+      transitionTimeline.current?.kill();
+    };
+  }, [buildTimelines]);
+  useEffect5(() => {
+    const mesh = assetsRef.current?.mesh;
+    if (mesh) {
+      mesh.visible = sanitizedValues.debug || animationVisibleRef.current;
+    }
+  }, [sanitizedValues.debug]);
+  const lastShowSignal = useRef5(settings.showSignal);
+  useEffect5(() => {
+    if (settings.showSignal === lastShowSignal.current) {
+      return;
+    }
+    lastShowSignal.current = settings.showSignal;
+    hideTimeline.current?.pause(0);
+    primeShowAnimation();
+    showTimeline.current?.seek(0).play();
+  }, [primeShowAnimation, settings.showSignal]);
+  const lastHideSignal = useRef5(settings.hideSignal);
+  useEffect5(() => {
+    if (settings.hideSignal === lastHideSignal.current) {
+      return;
+    }
+    lastHideSignal.current = settings.hideSignal;
+    showTimeline.current?.pause(0);
+    hideTimeline.current?.seek(0).play();
+  }, [settings.hideSignal]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+function createDiffuseTexture() {
+  const size = 256;
+  const data = new Uint8Array(size * size * 4);
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      const i = (y * size + x) * 4;
+      const stripe = Math.sin(y / size * Math.PI * 8) * 0.5 + 0.5;
+      const tint = 0.25 + Math.sin(x / size * Math.PI * 2) * 0.15;
+      const base = THREE5.MathUtils.clamp(stripe * 0.7 + tint, 0, 1);
+      data[i] = base * 255;
+      data[i + 1] = base * 200;
+      data[i + 2] = base * 150;
+      data[i + 3] = 255;
+    }
+  }
+  const texture = new THREE5.DataTexture(data, size, size, THREE5.RGBAFormat);
+  texture.needsUpdate = true;
+  texture.colorSpace = THREE5.SRGBColorSpace;
+  texture.wrapS = THREE5.RepeatWrapping;
+  texture.wrapT = THREE5.RepeatWrapping;
+  texture.magFilter = THREE5.LinearFilter;
+  texture.minFilter = THREE5.LinearMipmapLinearFilter;
+  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,
   ShaderArt
 };