@toriistudio/shader-ui 0.0.7 → 0.0.9

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   AnimatedDrawingSVG: () => AnimatedDrawingSVG,
   DitherPulseRing: () => DitherPulseRing,
+  DitherStream: () => DitherStream,
   EFECTO_ASCII_COMPONENT_DEFAULTS: () => EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS: () => EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto: () => Efecto,
@@ -3550,7 +3551,7 @@ var THREE9 = __toESM(require("three"));
 var import_react11 = require("react");
 var THREE8 = __toESM(require("three"));
 
-// src/hooks/SceneProvider.tsx
+// src/context/SceneProvider.tsx
 var import_react10 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SceneProviderContext = (0, import_react10.createContext)(null);
@@ -3746,7 +3747,15 @@ function ShaderPass({
       context.renderer.setRenderTarget(prevTarget);
       context.renderer.autoClear = prevAutoClear;
     },
-    [clear, clearColor, enabled, resolutionUniform, target, timeUniform, uniforms]
+    [
+      clear,
+      clearColor,
+      enabled,
+      resolutionUniform,
+      target,
+      timeUniform,
+      uniforms
+    ]
   );
   const sharedContextRef = sharedScene?.contextRef;
   const shouldCreateOwnScene = !sharedContextRef;
@@ -3776,13 +3785,10 @@ function ShaderPass({
       renderOnce();
       return;
     }
-    const unregister = register(
-      (ctx, delta, elapsed) => {
-        void elapsed;
-        handleRender(ctx, delta);
-      },
-      priority
-    );
+    const unregister = register((ctx, delta, elapsed) => {
+      void elapsed;
+      handleRender(ctx, delta);
+    }, priority);
     return () => {
       unregister?.();
     };
@@ -4238,75 +4244,14 @@ function ExpandingRingPass({
 var import_react19 = require("react");
 var THREE16 = __toESM(require("three"));
 
-// src/components/CombineShaderPass.tsx
+// src/components/TargetPreview.tsx
 var import_react17 = require("react");
 var THREE14 = __toESM(require("three"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var VERT = `
-out vec2 vUv;
-
-void main() {
-  vUv = uv;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`;
-var FRAG = `
-precision highp float;
-
-in vec2 vUv;
-
-uniform sampler2D uTextureA;
-uniform sampler2D uTextureB;
-
-out vec4 fragColor;
-
-void main() {
-  vec4 a = texture(uTextureA, vUv);
-  vec4 b = texture(uTextureB, vUv);
-  vec3 rgb = a.rgb + b.rgb;
-  float alpha = max(a.a, b.a);
-  fragColor = vec4(rgb, alpha);
-}
-`;
-function CombineShaderPass({
-  inputA,
-  inputB,
-  target = null,
-  clear = true,
-  priority = 0
-}) {
-  const uniforms = (0, import_react17.useMemo)(
-    () => ({
-      uTextureA: { value: inputA },
-      uTextureB: { value: inputB }
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  uniforms.uTextureA.value = inputA;
-  uniforms.uTextureB.value = inputB;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    ShaderPass,
-    {
-      vertexShader: VERT,
-      fragmentShader: FRAG,
-      uniforms,
-      target,
-      clear,
-      priority,
-      blending: THREE14.NoBlending
-    }
-  );
-}
-
-// src/components/TargetPreview.tsx
-var import_react18 = require("react");
-var THREE15 = __toESM(require("three"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
 function TargetPreview({
   target,
   renderOrder = 0,
-  blending = THREE15.NoBlending,
+  blending = THREE14.NoBlending,
   transparent = true,
   toneMapped = false,
   className,
@@ -4315,15 +4260,15 @@ function TargetPreview({
   height,
   ...divProps
 }) {
-  const assetsRef = (0, import_react18.useRef)(null);
+  const assetsRef = (0, import_react17.useRef)(null);
   const sharedScene = useSceneContext();
   const sharedReady = sharedScene?.ready ?? true;
-  const handleCreate = (0, import_react18.useCallback)(() => {
-    const scene = new THREE15.Scene();
-    const camera = new THREE15.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const handleCreate = (0, import_react17.useCallback)(() => {
+    const scene = new THREE14.Scene();
+    const camera = new THREE14.OrthographicCamera(-1, 1, 1, -1, 0, 1);
     camera.position.z = 1;
-    const geometry = new THREE15.PlaneGeometry(2, 2);
-    const material = new THREE15.MeshBasicMaterial({
+    const geometry = new THREE14.PlaneGeometry(2, 2);
+    const material = new THREE14.MeshBasicMaterial({
       map: target.texture,
       toneMapped,
       transparent,
@@ -4331,7 +4276,7 @@ function TargetPreview({
       depthWrite: false,
       depthTest: false
     });
-    const mesh = new THREE15.Mesh(geometry, material);
+    const mesh = new THREE14.Mesh(geometry, material);
     mesh.renderOrder = renderOrder;
     scene.add(mesh);
     assetsRef.current = { scene, camera, mesh, geometry, material };
@@ -4342,7 +4287,7 @@ function TargetPreview({
       assetsRef.current = null;
     };
   }, [blending, renderOrder, target.texture, toneMapped, transparent]);
-  const handleRender = (0, import_react18.useCallback)((context) => {
+  const handleRender = (0, import_react17.useCallback)((context) => {
     const assets = assetsRef.current;
     if (!assets) return;
     const prevTarget = context.renderer.getRenderTarget();
@@ -4356,13 +4301,13 @@ function TargetPreview({
     onCreate: shouldCreateOwnScene ? handleCreate : void 0,
     onRender: shouldCreateOwnScene ? handleRender : void 0
   });
-  const containerRef = shouldCreateOwnScene ? ownScene.containerRef : (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const containerRef = shouldCreateOwnScene ? ownScene.containerRef : (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (!sharedContextRef || !sharedReady) return;
     const cleanup = handleCreate();
     return cleanup;
   }, [sharedContextRef, handleCreate, sharedReady]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!sharedContextRef?.current || !sharedReady) return;
     const context = sharedContextRef.current;
     const register = context.registerRenderCallback;
@@ -4370,23 +4315,20 @@ function TargetPreview({
       handleRender(context);
       return;
     }
-    const unregister = register(
-      (ctx) => {
-        handleRender(ctx);
-      },
-      renderOrder
-    );
+    const unregister = register((ctx) => {
+      handleRender(ctx);
+    }, renderOrder);
     return () => {
       unregister?.();
     };
   }, [sharedContextRef, handleRender, renderOrder, sharedReady]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const assets = assetsRef.current;
     if (!assets) return;
     assets.material.map = target.texture;
     assets.material.needsUpdate = true;
   }, [target.texture]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const assets = assetsRef.current;
     if (!assets) return;
     assets.material.blending = blending;
@@ -4397,7 +4339,7 @@ function TargetPreview({
   if (!shouldCreateOwnScene) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       ref: containerRef,
@@ -4412,6 +4354,232 @@ function TargetPreview({
   );
 }
 
+// src/components/CombineShaderPass.tsx
+var import_react18 = require("react");
+var THREE15 = __toESM(require("three"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var COMBINE_MODE = {
+  add: 0,
+  screen: 1,
+  multiply: 2,
+  overlay: 3,
+  max: 4,
+  min: 5,
+  difference: 6,
+  alphaOver: 7,
+  premultipliedOver: 8,
+  lerp: 9,
+  mask: 10
+};
+var TONEMAP = {
+  none: 0,
+  reinhard: 1,
+  aces: 2
+};
+var VERT = `
+out vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+var FRAG = `
+precision highp float;
+
+in vec2 vUv;
+
+uniform sampler2D uTextureA;
+uniform sampler2D uTextureB;
+uniform sampler2D uMaskTexture;
+
+uniform int uMode;
+uniform float uOpacityA;
+uniform float uOpacityB;
+uniform float uMix;
+uniform int uMaskChannel;
+uniform float uMaskThreshold;
+uniform bool uInvertMask;
+uniform bool uClampOutput;
+uniform int uTonemap;
+uniform bool uHasMask;
+
+out vec4 fragColor;
+
+float overlayChannel(float base, float blend) {
+  return base < 0.5
+    ? (2.0 * base * blend)
+    : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend));
+}
+
+vec3 overlayBlend(vec3 base, vec3 blend) {
+  return vec3(
+    overlayChannel(base.r, blend.r),
+    overlayChannel(base.g, blend.g),
+    overlayChannel(base.b, blend.b)
+  );
+}
+
+float sampleMask(vec2 uv) {
+  vec4 maskSample = texture(uMaskTexture, uv);
+  float m = maskSample.r;
+  if (uMaskChannel == 1) {
+    m = maskSample.g;
+  } else if (uMaskChannel == 2) {
+    m = maskSample.b;
+  } else if (uMaskChannel == 3) {
+    m = maskSample.a;
+  }
+  if (uInvertMask) {
+    m = 1.0 - m;
+  }
+  return m;
+}
+
+vec3 tonemapReinhard(vec3 color) {
+  return color / (color + vec3(1.0));
+}
+
+vec3 tonemapAces(vec3 color) {
+  // ACES approximation by Krzysztof Narkowicz
+  float a = 2.51;
+  float b = 0.03;
+  float c = 2.43;
+  float d = 0.59;
+  float e = 0.14;
+  return clamp((color * (a * color + b)) / (color * (c * color + d) + e), 0.0, 1.0);
+}
+
+void main() {
+  vec4 a = texture(uTextureA, vUv);
+  vec4 b = texture(uTextureB, vUv);
+
+  a.rgb *= uOpacityA;
+  a.a *= uOpacityA;
+  b.rgb *= uOpacityB;
+  b.a *= uOpacityB;
+
+  vec3 rgb = vec3(0.0);
+  float alpha = 0.0;
+
+  if (uMode == 0) {
+    rgb = a.rgb + b.rgb;
+    alpha = max(a.a, b.a);
+  } else if (uMode == 1) {
+    rgb = 1.0 - (1.0 - a.rgb) * (1.0 - b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 2) {
+    rgb = a.rgb * b.rgb;
+    alpha = max(a.a, b.a);
+  } else if (uMode == 3) {
+    rgb = overlayBlend(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 4) {
+    rgb = max(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 5) {
+    rgb = min(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 6) {
+    rgb = abs(a.rgb - b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 7) {
+    float outA = a.a + b.a * (1.0 - a.a);
+    vec3 premult = a.rgb * a.a + b.rgb * b.a * (1.0 - a.a);
+    vec3 outRgb = outA > 1e-6 ? premult / outA : vec3(0.0);
+    rgb = outRgb;
+    alpha = outA;
+  } else if (uMode == 8) {
+    rgb = a.rgb + b.rgb * (1.0 - a.a);
+    alpha = a.a + b.a * (1.0 - a.a);
+  } else if (uMode == 9) {
+    float t = uHasMask ? sampleMask(vUv) : uMix;
+    rgb = mix(b.rgb, a.rgb, t);
+    alpha = mix(b.a, a.a, t);
+  } else if (uMode == 10) {
+    float t = uHasMask ? sampleMask(vUv) : uMix;
+    bool chooseA = t > uMaskThreshold;
+    rgb = chooseA ? a.rgb : b.rgb;
+    alpha = chooseA ? a.a : b.a;
+  }
+
+  if (uTonemap == 1) {
+    rgb = tonemapReinhard(rgb);
+  } else if (uTonemap == 2) {
+    rgb = tonemapAces(rgb);
+  }
+
+  if (uClampOutput) {
+    rgb = clamp(rgb, 0.0, 1.0);
+    alpha = clamp(alpha, 0.0, 1.0);
+  }
+
+  fragColor = vec4(rgb, alpha);
+}
+`;
+function CombineShaderPass({
+  inputA,
+  inputB,
+  mode = "add",
+  opacityA = 1,
+  opacityB = 1,
+  clampOutput = true,
+  mix = 0.5,
+  maskTexture,
+  maskChannel = 0,
+  maskThreshold = 0.5,
+  invertMask = false,
+  tonemap = "none",
+  target = null,
+  clear = true,
+  priority = 0
+}) {
+  const uniforms = (0, import_react18.useMemo)(
+    () => ({
+      uTextureA: { value: inputA },
+      uTextureB: { value: inputB },
+      uMaskTexture: { value: maskTexture ?? inputA },
+      uMode: { value: COMBINE_MODE[mode] },
+      uOpacityA: { value: opacityA },
+      uOpacityB: { value: opacityB },
+      uMix: { value: mix },
+      uMaskChannel: { value: maskChannel },
+      uMaskThreshold: { value: maskThreshold },
+      uInvertMask: { value: invertMask },
+      uClampOutput: { value: clampOutput },
+      uTonemap: { value: TONEMAP[tonemap] },
+      uHasMask: { value: Boolean(maskTexture) }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uTextureA.value = inputA;
+  uniforms.uTextureB.value = inputB;
+  uniforms.uMaskTexture.value = maskTexture ?? inputA;
+  uniforms.uMode.value = COMBINE_MODE[mode];
+  uniforms.uOpacityA.value = opacityA;
+  uniforms.uOpacityB.value = opacityB;
+  uniforms.uMix.value = mix;
+  uniforms.uMaskChannel.value = maskChannel;
+  uniforms.uMaskThreshold.value = maskThreshold;
+  uniforms.uInvertMask.value = invertMask;
+  uniforms.uClampOutput.value = clampOutput;
+  uniforms.uTonemap.value = TONEMAP[tonemap];
+  uniforms.uHasMask.value = Boolean(maskTexture);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    ShaderPass,
+    {
+      vertexShader: VERT,
+      fragmentShader: FRAG,
+      uniforms,
+      target,
+      clear,
+      priority,
+      blending: THREE15.NoBlending
+    }
+  );
+}
+
 // src/components/RenderPipeline.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DEFAULT_TARGET_OPTIONS = {
@@ -4420,22 +4588,26 @@ var DEFAULT_TARGET_OPTIONS = {
 };
 function RenderPipeline({
   passes,
+  combine,
   preview = true,
   previewProps
 }) {
   const sharedScene = useSceneContext();
   const size = sharedScene?.size ?? { width: 1, height: 1 };
+  const shouldCombine = Boolean(combine);
   const targets = (0, import_react19.useMemo)(() => {
     const entries = passes.map((_, index) => ({
       key: `pass_${index}`,
       target: new THREE16.WebGLRenderTarget(1, 1, DEFAULT_TARGET_OPTIONS)
     }));
-    entries.push({
-      key: "combine",
-      target: new THREE16.WebGLRenderTarget(1, 1, DEFAULT_TARGET_OPTIONS)
-    });
+    if (shouldCombine) {
+      entries.push({
+        key: "combine",
+        target: new THREE16.WebGLRenderTarget(1, 1, DEFAULT_TARGET_OPTIONS)
+      });
+    }
     return entries;
-  }, [passes]);
+  }, [passes, shouldCombine]);
   (0, import_react19.useEffect)(() => {
     if (size.width <= 1 || size.height <= 1) return;
     targets.forEach(({ target }) => {
@@ -4453,7 +4625,9 @@ function RenderPipeline({
     throw new Error("RenderPipeline requires at least 2 passes.");
   }
   const passTargets = targets.filter((entry) => entry.key.startsWith("pass_"));
-  const combineTarget = targets.find((entry) => entry.key === "combine")?.target;
+  const combineTarget = targets.find(
+    (entry) => entry.key === "combine"
+  )?.target;
   const firstEnabledIndex = passes.findIndex((pass) => pass.enabled !== false);
   const secondEnabledIndex = passes.findIndex(
     (pass, index) => index > firstEnabledIndex && pass.enabled !== false
@@ -4463,7 +4637,7 @@ function RenderPipeline({
     if (!passes.length) return null;
     const lastEnabledIndex = [...passes].map((pass, index) => ({ pass, index })).filter(({ pass }) => pass.enabled !== false).map(({ index }) => index).pop();
     if (lastEnabledIndex === void 0) return null;
-    if (lastEnabledIndex <= Math.max(firstEnabledIndex, secondEnabledIndex)) {
+    if (shouldCombine && lastEnabledIndex <= Math.max(firstEnabledIndex, secondEnabledIndex)) {
       return combineTarget ?? null;
     }
     return passOutputTarget(lastEnabledIndex);
@@ -4484,22 +4658,23 @@ function RenderPipeline({
       },
       `pass_${index}`
     );
-    if (!combineRendered && combineTarget && index === secondEnabledIndex) {
+    if (shouldCombine && !combineRendered && combineTarget && index === secondEnabledIndex) {
       const inputA = passOutputTarget(firstEnabledIndex)?.texture ?? inputTexture;
       const inputB = passOutputTarget(secondEnabledIndex)?.texture ?? inputTexture;
       combineRendered = true;
       previousOutput = combineTarget;
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react19.Fragment, { children: [
         element,
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           CombineShaderPass,
           {
+            ...combine,
             inputA,
             inputB,
             target: combineTarget
           }
         )
-      ] });
+      ] }, `combine_${index}`);
     }
     previousOutput = target;
     return element;
@@ -4577,20 +4752,23 @@ function useMouse({
     const handleMouseLeave = () => {
       mouse.set(center?.x ?? 0.5, center?.y ?? 0.5);
     };
-    const moveTarget = element ?? window;
-    moveTarget.addEventListener("mousemove", handleMouseMove);
-    moveTarget.addEventListener("mouseleave", handleMouseLeave);
     if (element) {
+      element.addEventListener("mousemove", handleMouseMove);
+      element.addEventListener("mouseleave", handleMouseLeave);
       element.addEventListener("mouseenter", updateRect);
+    } else if (hasWindow) {
+      window.addEventListener("mousemove", handleMouseMove);
     }
     if (hasWindow) {
       window.addEventListener("resize", handleResize);
     }
     return () => {
-      moveTarget.removeEventListener("mousemove", handleMouseMove);
-      moveTarget.removeEventListener("mouseleave", handleMouseLeave);
       if (element) {
+        element.removeEventListener("mousemove", handleMouseMove);
+        element.removeEventListener("mouseleave", handleMouseLeave);
         element.removeEventListener("mouseenter", updateRect);
+      } else if (hasWindow) {
+        window.removeEventListener("mousemove", handleMouseMove);
       }
       if (hasWindow) {
         window.removeEventListener("resize", handleResize);
@@ -4770,6 +4948,7 @@ function DitherPulseRing({
   diffuseEnabled = false,
   blurEnabled = false,
   noiseWarpEnabled = false,
+  combineMode,
   noiseWarpRadius,
   noiseWarpStrength,
   diffuseRadius,
@@ -4806,6 +4985,7 @@ function DitherPulseRing({
           diffuseEnabled,
           blurEnabled,
           noiseWarpEnabled,
+          combineMode,
           noiseWarpRadius,
           noiseWarpStrength,
           diffuseRadius,
@@ -4831,6 +5011,7 @@ function DitherPulseRingContent({
   diffuseEnabled = false,
   blurEnabled = false,
   noiseWarpEnabled = false,
+  combineMode,
   noiseWarpRadius,
   noiseWarpStrength,
   diffuseRadius,
@@ -4846,6 +5027,22 @@ function DitherPulseRingContent({
   ringPosition,
   ringAlpha
 }) {
+  const normalizeHexColor = (hex) => {
+    if (!hex) return null;
+    const normalized = hex.replace("#", "");
+    if (normalized.length !== 6) return null;
+    const r = parseInt(normalized.slice(0, 2), 16) / 255;
+    const g = parseInt(normalized.slice(2, 4), 16) / 255;
+    const b = parseInt(normalized.slice(4, 6), 16) / 255;
+    return [r, g, b];
+  };
+  const resolveColor = (color) => {
+    if (!color) return null;
+    if (typeof color === "string") {
+      return normalizeHexColor(color);
+    }
+    return color;
+  };
   const glyphUniforms = {};
   glyphUniforms.trackMouse = false;
   const noiseUniforms = {};
@@ -4869,49 +5066,529 @@ function DitherPulseRingContent({
   const borderUniforms = {};
   if (borderThickness !== void 0) borderUniforms.thickness = borderThickness;
   if (borderIntensity !== void 0) borderUniforms.intensity = borderIntensity;
-  if (borderColor) borderUniforms.color = borderColor;
+  const resolvedBorderColor = resolveColor(borderColor);
+  if (resolvedBorderColor) borderUniforms.color = resolvedBorderColor;
   if (borderDitherStrength !== void 0) {
     borderUniforms.ditherStrength = borderDitherStrength;
   }
   if (borderTonemap !== void 0) borderUniforms.tonemap = borderTonemap;
   if (borderAlpha !== void 0) borderUniforms.alpha = borderAlpha;
   const ringUniforms = {};
-  if (ringColor) ringUniforms.color = ringColor;
+  const resolvedRingColor = resolveColor(ringColor);
+  if (resolvedRingColor) ringUniforms.color = resolvedRingColor;
   if (ringSpeed !== void 0) ringUniforms.speed = ringSpeed;
   if (ringPosition) ringUniforms.position = ringPosition;
   if (ringAlpha !== void 0) ringUniforms.alpha = ringAlpha;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    RenderPipeline,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      RenderPipeline,
+      {
+        passes: [
+          {
+            component: BorderBeamPass,
+            props: { uniforms: borderUniforms }
+          },
+          {
+            component: GlyphDitherPass,
+            enabled: glyphDitherEnabled,
+            props: { spriteTextureSrc, uniforms: glyphUniforms }
+          }
+        ],
+        combine: combineMode ? { mode: combineMode } : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      RenderPipeline,
+      {
+        passes: [
+          {
+            component: BorderBeamPass,
+            props: { uniforms: borderUniforms }
+          },
+          {
+            component: ExpandingRingPass,
+            props: { uniforms: ringUniforms }
+          },
+          {
+            component: NoiseWarpPass,
+            enabled: noiseWarpEnabled,
+            props: { uniforms: noiseUniforms }
+          },
+          {
+            component: GlyphDitherPass,
+            enabled: glyphDitherEnabled,
+            props: { spriteTextureSrc, uniforms: glyphUniforms }
+          },
+          {
+            component: DiffusePass,
+            enabled: diffuseEnabled,
+            props: { uniforms: diffuseUniforms }
+          },
+          {
+            component: BlurPass,
+            enabled: blurEnabled,
+            props: { uniforms: blurUniforms }
+          }
+        ],
+        combine: combineMode ? { mode: combineMode } : void 0
+      }
+    )
+  ] });
+}
+
+// src/components/DitherStreamBeamCompositePass.tsx
+var import_react23 = require("react");
+var THREE21 = __toESM(require("three"));
+
+// src/utils/createFallbackTexture.ts
+var THREE20 = __toESM(require("three"));
+function createFallbackTexture() {
+  const data = new Uint8Array([0, 0, 0, 255]);
+  const texture = new THREE20.DataTexture(data, 1, 1, THREE20.RGBAFormat);
+  texture.needsUpdate = true;
+  texture.wrapS = THREE20.ClampToEdgeWrapping;
+  texture.wrapT = THREE20.ClampToEdgeWrapping;
+  texture.minFilter = THREE20.NearestFilter;
+  texture.magFilter = THREE20.NearestFilter;
+  return texture;
+}
+
+// src/shaders/dither-godray-beam-composite/fragment.glsl
+var fragment_default15 = "precision highp float;\nprecision highp int;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uBeamSpeed;\nuniform float uBeamDirection;\nuniform vec3 uBeamColor;\nuniform vec2 uBeamCenter;\nuniform float uBeamRadius;\nuniform float uBeamScale;\nuniform int uPathShape;\nuniform vec2 uPathPos;\nuniform float uPathAngle;\n\nout vec4 fragColor;\n\nconst float PI = 3.14159265;\nconst float TWO_PI = 6.28318531;\n\nuvec2 hash2d(uvec2 v) {\n  v = v * 1664525u + 1013904223u;\n  v.x += v.y * v.y * 1664525u + 1013904223u;\n  v.y += v.x * v.x * 1664525u + 1013904223u;\n  v ^= v >> 16u;\n  v.x += v.y * v.y * 1664525u + 1013904223u;\n  v.y += v.x * v.x * 1664525u + 1013904223u;\n  return v;\n}\n\nfloat randomFibo(vec2 p) {\n  uvec2 v = floatBitsToUint(p);\n  v = hash2d(v);\n  return float(v.x ^ v.y) / float(0xffffffffu);\n}\n\nfloat calculateAngle(vec2 p, vec2 c) {\n  float a = atan(p.y - c.y, p.x - c.x);\n  return a < 0.0 ? a + TWO_PI : a;\n}\n\nfloat angularDiff(float a, float b) {\n  float d = abs(a - b);\n  return d > PI ? TWO_PI - d : d;\n}\n\nfloat angularFade(float pointAngle, float peakAngle, float fadeAmount) {\n  return 1.04 - smoothstep(0.0, fadeAmount, angularDiff(pointAngle, peakAngle));\n}\n\nfloat sdEquilateralTriangle(vec2 p) {\n  const float k = 1.7320508;\n  p.x = abs(p.x) - 1.0;\n  p.y = p.y + 1.0 / k;\n  if (p.x + k * p.y > 0.0) {\n    p = vec2(p.x - k * p.y, -k * p.x - p.y) / 2.0;\n  }\n  p.x -= clamp(p.x, -2.0, 0.0);\n  return -length(p) * sign(p.y);\n}\n\nvec3 dodge(vec3 src, vec3 dst) {\n  return vec3(\n    src.x >= 1.0 ? 1.0 : min(1.0, dst.x / max(0.001, 1.0 - src.x)),\n    src.y >= 1.0 ? 1.0 : min(1.0, dst.y / max(0.001, 1.0 - src.y)),\n    src.z >= 1.0 ? 1.0 : min(1.0, dst.z / max(0.001, 1.0 - src.z))\n  );\n}\n\nfloat easeExpoIn(float t) {\n  return t <= 0.0 ? 0.0 : pow(2.0, 10.0 * (t - 1.0));\n}\n\nvec2 rot2(vec2 v, float a) {\n  float c = cos(a);\n  float s = sin(a);\n  return vec2(v.x * c - v.y * s, v.x * s + v.y * c);\n}\n\nvec3 beamAt(vec2 uv) {\n  float aspect = uResolution.x / uResolution.y;\n  vec2 center = uBeamCenter;\n\n  vec2 u2 = vec2(uv.x * aspect, uv.y);\n  vec2 c2 = vec2(center.x * aspect, center.y);\n\n  float ringRadius = uBeamRadius;\n  vec2 delta = (u2 - c2) / max(uBeamScale, 0.0001);\n  float circleDist = abs(length(delta) - ringRadius);\n  float squareDist = abs(max(abs(delta.x), abs(delta.y)) - ringRadius);\n  float diamondDist = abs(abs(delta.x) + abs(delta.y) - ringRadius);\n  float ovalDist =\n    abs(length(vec2(delta.x / 1.5, delta.y)) - ringRadius);\n  float triangleDist =\n    abs(sdEquilateralTriangle(delta / max(ringRadius, 0.0001))) * ringRadius;\n\n  float ringDist = circleDist;\n  if (uPathShape == 1) {\n    ringDist = squareDist;\n  } else if (uPathShape == 2) {\n    ringDist = diamondDist;\n  } else if (uPathShape == 3) {\n    ringDist = triangleDist;\n  } else if (uPathShape == 4) {\n    ringDist = ovalDist;\n  }\n\n  float b = 0.25 / (1.0 - smoothstep(0.2, 0.002, ringDist + 0.02));\n  float ang = fract(0.19 + uTime * uBeamSpeed * uBeamDirection) * TWO_PI;\n  b *= angularFade(calculateAngle(u2, c2), ang, PI * 0.5);\n\n  vec3 col = b * pow(max(0.0, 1.0 - ringDist), 3.0) * uBeamColor;\n  col = tanh(clamp(col, -40.0, 40.0));\n  col += (randomFibo(gl_FragCoord.xy) - 0.5) / 255.0;\n\n  return col;\n}\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  float ang = uPathAngle;\n  vec2 pos = uPathPos;\n  vec2 off = uv - pos;\n  vec2 ro = rot2(off, -ang);\n  vec2 so = ro;\n\n  if (ro.x > 0.0) {\n    float e = easeExpoIn(ro.x);\n    so.y = ro.y / (1.0 + 4.0 * e * e);\n  }\n\n  vec2 st = clamp(pos + rot2(so, ang), 0.0, 1.0);\n\n  vec3 beam = beamAt(st);\n  vec4 img = texture(uTexture, st);\n  vec3 outColor = mix(beam, dodge(img.rgb, beam), img.a);\n\n  fragColor = vec4(outColor, 1.0);\n}\n";
+
+// src/shaders/dither-godray-beam-composite/vertex.glsl
+var vertex_default14 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/components/DitherStreamBeamCompositePass.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function DitherStreamBeamCompositePass({
+  inputTexture = null,
+  beamSpeed = 0.1,
+  beamDirection = "counterclockwise",
+  beamColor = [0.667, 0.686, 0.941],
+  beamCenter = [0.5, 0.95],
+  beamRadius = 0.6,
+  beamScale = 1,
+  pathShape = "circle",
+  pathPos = [0.5009, 1.0473],
+  pathAngle = (0.999 - 0.25) * -6.28318531,
+  target = null,
+  clear = true,
+  enabled = true,
+  priority = 0
+}) {
+  const fallbackTexture = (0, import_react23.useMemo)(() => createFallbackTexture(), []);
+  const uniforms = (0, import_react23.useMemo)(
+    () => ({
+      uTexture: { value: inputTexture ?? fallbackTexture },
+      uTime: { value: 0 },
+      uResolution: { value: new THREE21.Vector2(1, 1) },
+      uBeamSpeed: { value: beamSpeed },
+      uBeamDirection: { value: beamDirection === "clockwise" ? -1 : 1 },
+      uBeamColor: {
+        value: new THREE21.Color(beamColor[0], beamColor[1], beamColor[2])
+      },
+      uBeamCenter: { value: new THREE21.Vector2(beamCenter[0], beamCenter[1]) },
+      uBeamRadius: { value: beamRadius },
+      uBeamScale: { value: beamScale },
+      uPathShape: {
+        value: pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : 0
+      },
+      uPathPos: { value: new THREE21.Vector2(pathPos[0], pathPos[1]) },
+      uPathAngle: { value: pathAngle }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uTexture.value = inputTexture ?? fallbackTexture;
+  uniforms.uBeamSpeed.value = beamSpeed;
+  uniforms.uBeamDirection.value = beamDirection === "clockwise" ? -1 : 1;
+  uniforms.uBeamColor.value.setRGB(
+    beamColor[0],
+    beamColor[1],
+    beamColor[2]
+  );
+  uniforms.uBeamCenter.value.set(
+    beamCenter[0],
+    beamCenter[1]
+  );
+  uniforms.uBeamRadius.value = beamRadius;
+  uniforms.uBeamScale.value = beamScale;
+  uniforms.uPathShape.value = pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : 0;
+  uniforms.uPathPos.value.set(pathPos[0], pathPos[1]);
+  uniforms.uPathAngle.value = pathAngle;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    ShaderPass,
     {
-      passes: [
-        {
-          component: BorderBeamPass,
-          props: { uniforms: borderUniforms }
-        },
-        {
-          component: ExpandingRingPass,
-          props: { clear: true, uniforms: ringUniforms }
-        },
-        {
-          component: NoiseWarpPass,
-          enabled: noiseWarpEnabled,
-          props: { uniforms: noiseUniforms }
-        },
-        {
-          component: GlyphDitherPass,
-          enabled: glyphDitherEnabled,
-          props: { spriteTextureSrc, uniforms: glyphUniforms }
-        },
-        {
-          component: DiffusePass,
-          enabled: diffuseEnabled,
-          props: { uniforms: diffuseUniforms }
-        },
-        {
-          component: BlurPass,
-          enabled: blurEnabled,
-          props: { uniforms: blurUniforms }
+      vertexShader: vertex_default14,
+      fragmentShader: fragment_default15,
+      uniforms,
+      inputTexture: inputTexture ?? fallbackTexture,
+      target,
+      clear,
+      enabled,
+      priority,
+      timeUniform: "uTime",
+      resolutionUniform: "uResolution",
+      blending: THREE21.NoBlending
+    }
+  );
+}
+
+// src/components/DitherStreamDitherPass.tsx
+var import_react24 = require("react");
+var THREE22 = __toESM(require("three"));
+
+// src/shaders/dither-godray-dither/fragment.glsl
+var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  float ar = uResolution.x / uResolution.y;\n  float ac = mix(ar, 1.0 / ar, 0.5);\n\n  float gs = 0.005;\n  float bg = 1.0 / gs;\n  vec2 cellSize = vec2(1.0 / (bg * ar), 1.0 / bg) * ac;\n\n  vec2 pos = vec2(0.5);\n  vec2 off = uv - pos;\n  vec2 cell = floor(off / cellSize);\n  vec2 center = (cell + 0.5) * cellSize;\n  vec2 pixelUv = center + pos;\n\n  vec4 c = texture(uTexture, pixelUv);\n  float lum = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));\n  float gm = pow(mix(0.2, 2.2, 0.3), 2.2);\n\n  vec2 local = mod(uv - pos, cellSize) / cellSize;\n  vec2 ct = local * 2.0 - 1.0;\n  float d = length(ct);\n\n  float ns = 16.0;\n  float si = clamp(floor(lum * ns * gm), 0.0, ns - 1.0);\n  float rad = si / ns;\n  float alpha = smoothstep(rad + 0.08, rad - 0.08, d);\n\n  vec3 tint = (c.rgb - si * 0.04) * 1.4;\n  fragColor = vec4(mix(vec3(0.0), tint, alpha), 1.0);\n}\n";
+
+// src/shaders/dither-godray-dither/vertex.glsl
+var vertex_default15 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/components/DitherStreamDitherPass.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function DitherStreamDitherPass({
+  inputTexture = null,
+  target = null,
+  clear = true,
+  enabled = true,
+  priority = 0
+}) {
+  const fallbackTexture = (0, import_react24.useMemo)(() => createFallbackTexture(), []);
+  const uniforms = (0, import_react24.useMemo)(
+    () => ({
+      uTexture: { value: inputTexture ?? fallbackTexture },
+      uResolution: { value: new THREE22.Vector2(1, 1) }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uTexture.value = inputTexture ?? fallbackTexture;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    ShaderPass,
+    {
+      vertexShader: vertex_default15,
+      fragmentShader: fragment_default16,
+      uniforms,
+      inputTexture: inputTexture ?? fallbackTexture,
+      target,
+      clear,
+      enabled,
+      priority,
+      resolutionUniform: "uResolution",
+      blending: THREE22.NoBlending
+    }
+  );
+}
+
+// src/components/DitherStreamGodRaysPass.tsx
+var import_react25 = require("react");
+var THREE23 = __toESM(require("three"));
+
+// src/shaders/dither-godray-extract/fragment.glsl
+var fragment_default17 = "precision highp float;\n\nin vec2 vTextureCoord;\nuniform sampler2D uTexture;\nout vec4 fragColor;\n\nvoid main() {\n  vec4 c = texture(uTexture, vTextureCoord);\n  float l = dot(c.rgb, vec3(0.299, 0.587, 0.114));\n  fragColor = c * smoothstep(-0.1, 0.0, l);\n}\n";
+
+// src/shaders/dither-godray-extract/vertex.glsl
+var vertex_default16 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/shaders/dither-godray-final/fragment.glsl
+var fragment_default18 = "precision highp float;\n\nin vec2 vTextureCoord;\nuniform sampler2D uScene;\nuniform sampler2D uGR;\nuniform float uGodrayIntensity;\nout vec4 fragColor;\n\nvoid main() {\n  vec3 bg = texture(uScene, vTextureCoord).rgb;\n  vec3 gr = texture(uGR, vTextureCoord).rgb;\n  fragColor = vec4(bg + gr * uGodrayIntensity, 1.0);\n}\n";
+
+// src/shaders/dither-godray-final/vertex.glsl
+var vertex_default17 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/shaders/dither-godray-march/fragment.glsl
+var fragment_default19 = "precision highp float;\n\nin vec2 vTextureCoord;\nuniform sampler2D uTexture;\nout vec4 fragColor;\n\nvoid main() {\n  vec3 col = vec3(0.0);\n  vec2 pos = vec2(0.5);\n  vec2 dir = (pos - vTextureCoord) * 0.02;\n  float w = 1.0;\n  vec2 tc = vTextureCoord;\n\n  for (int i = 0; i < 16; i++) {\n    col += texture(uTexture, tc).rgb * w;\n    w *= 0.94;\n    tc += dir;\n  }\n\n  fragColor = vec4(col / 16.0, length(tc - vTextureCoord));\n}\n";
+
+// src/shaders/dither-godray-march/vertex.glsl
+var vertex_default18 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/components/DitherStreamGodRaysPass.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TARGET_OPTIONS = {
+  depthBuffer: false,
+  stencilBuffer: false
+};
+function DitherStreamGodRaysPass({
+  inputTexture = null,
+  intensity = 2.9,
+  target = null,
+  enabled = true,
+  priority = 0
+}) {
+  const sharedScene = useSceneContext();
+  const size = sharedScene?.size ?? { width: 1, height: 1 };
+  const fallbackTexture = (0, import_react25.useMemo)(() => createFallbackTexture(), []);
+  const extractTarget = (0, import_react25.useMemo)(
+    () => new THREE23.WebGLRenderTarget(1, 1, TARGET_OPTIONS),
+    []
+  );
+  const marchTarget = (0, import_react25.useMemo)(
+    () => new THREE23.WebGLRenderTarget(1, 1, TARGET_OPTIONS),
+    []
+  );
+  (0, import_react25.useEffect)(() => {
+    return () => {
+      extractTarget.dispose();
+      marchTarget.dispose();
+    };
+  }, [extractTarget, marchTarget]);
+  (0, import_react25.useEffect)(() => {
+    if (size.width <= 1 || size.height <= 1) return;
+    extractTarget.setSize(size.width, size.height);
+    marchTarget.setSize(
+      Math.max(1, Math.floor(size.width / 4)),
+      Math.max(1, Math.floor(size.height / 4))
+    );
+  }, [extractTarget, marchTarget, size.height, size.width]);
+  const extractUniforms = (0, import_react25.useMemo)(
+    () => ({
+      uTexture: { value: inputTexture ?? fallbackTexture }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const marchUniforms = (0, import_react25.useMemo)(
+    () => ({
+      uTexture: { value: extractTarget.texture }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const finalUniforms = (0, import_react25.useMemo)(
+    () => ({
+      uScene: { value: inputTexture ?? fallbackTexture },
+      uGR: { value: marchTarget.texture },
+      uGodrayIntensity: { value: intensity }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  extractUniforms.uTexture.value = inputTexture ?? fallbackTexture;
+  marchUniforms.uTexture.value = extractTarget.texture;
+  finalUniforms.uScene.value = inputTexture ?? fallbackTexture;
+  finalUniforms.uGR.value = marchTarget.texture;
+  finalUniforms.uGodrayIntensity.value = intensity;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      ShaderPass,
+      {
+        vertexShader: vertex_default16,
+        fragmentShader: fragment_default17,
+        uniforms: extractUniforms,
+        inputTexture: inputTexture ?? fallbackTexture,
+        target: extractTarget,
+        clear: true,
+        enabled,
+        priority,
+        blending: THREE23.NoBlending
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      ShaderPass,
+      {
+        vertexShader: vertex_default18,
+        fragmentShader: fragment_default19,
+        uniforms: marchUniforms,
+        inputTexture: extractTarget.texture,
+        target: marchTarget,
+        clear: true,
+        enabled,
+        priority: priority + 1,
+        blending: THREE23.NoBlending
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      ShaderPass,
+      {
+        vertexShader: vertex_default17,
+        fragmentShader: fragment_default18,
+        uniforms: finalUniforms,
+        inputTexture: inputTexture ?? fallbackTexture,
+        target,
+        clear: true,
+        enabled,
+        priority: priority + 2,
+        blending: THREE23.NoBlending
+      }
+    )
+  ] });
+}
+
+// src/components/DitherStreamProjectionPass.tsx
+var import_react26 = require("react");
+var THREE24 = __toESM(require("three"));
+
+// src/shaders/dither-godray-projection/fragment.glsl
+var fragment_default20 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTex;\nuniform float uTime;\nuniform float uProjectionSpeed;\n\nout vec4 fragColor;\n\nconst float PI = 3.14159265;\n\nvec3 ray(vec2 uv, vec2 m, float a) {\n  vec2 s = (uv - 0.5) * 2.0;\n  s.x *= a;\n  s.y *= -1.0;\n\n  float f = mix(radians(20.0), radians(120.0), 0.38);\n  vec3 r = normalize(vec3(s * tan(f / 2.0), -1.0));\n\n  float rx = (m.y - 0.5) * PI;\n  float ry = (m.x - 0.5) * PI * 2.0;\n  mat3 rY = mat3(cos(ry), 0.0, -sin(ry), 0.0, 1.0, 0.0, sin(ry), 0.0, cos(ry));\n  mat3 rX = mat3(1.0, 0.0, 0.0, 0.0, cos(rx), sin(rx), 0.0, -sin(rx), cos(rx));\n\n  return normalize(rX * rY * r);\n}\n\nvec2 directionToUv(vec3 d) {\n  return vec2(atan(d.z, d.x) / (2.0 * PI) + 0.75, acos(clamp(d.y, -1.0, 1.0)) / PI);\n}\n\nvec4 sampleRepeat(vec2 uv) {\n  vec2 f = vec2(uv.x, fract(uv.y));\n  vec4 c = texture(uTex, f);\n\n  float blendWidth = 0.1;\n  float blendFactor = 0.0;\n  if (f.y < blendWidth) {\n    blendFactor = 1.0 - f.y / blendWidth;\n  } else if (f.y > 1.0 - blendWidth) {\n    blendFactor = (f.y - (1.0 - blendWidth)) / blendWidth;\n  }\n\n  if (blendFactor > 0.0) {\n    blendFactor = smoothstep(0.0, 1.0, blendFactor);\n    vec2 opposite = vec2(f.x, f.y > 0.5 ? f.y - 0.5 : f.y + 0.5);\n    c = mix(c, texture(uTex, opposite), blendFactor);\n  }\n\n  return c;\n}\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  vec3 rd = ray(uv, vec2(0.5, 0.5056), 2.0);\n  vec2 s = directionToUv(rd);\n\n  float f = mix(radians(20.0), radians(120.0), 0.38);\n  s = (s - 0.5) * (2.0 / tan(f / 2.0)) + 0.5;\n  s += vec2(0.0, 0.02) * uTime * uProjectionSpeed;\n\n  vec4 c = sampleRepeat(s);\n  c.rgb = clamp(c.rgb - 0.14, 0.0, 1.0);\n\n  float l = dot(c.rgb, vec3(0.299, 0.587, 0.114));\n  c.rgb = mix(vec3(l), c.rgb, 0.79);\n  c.rgb = 1.22 * (c.rgb - 0.5) + 0.5;\n  c.rgb = clamp(c.rgb, 0.0, 1.0);\n\n  fragColor = c;\n}\n";
+
+// src/shaders/dither-godray-projection/vertex.glsl
+var vertex_default19 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/components/DitherStreamProjectionPass.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var DEFAULT_IMAGE_SRC = "https://firebasestorage.googleapis.com/v0/b/unicorn-studio.appspot.com/o/Zz28X5RDkvcGGVYLr9X6QdTIhxy1%2FUntitled%20design%20-%202025-10-14T141250.707.webp?alt=media&token=bfcd11a8-6529-41a6-a592-d78147e93840";
+function DitherStreamProjectionPass({
+  imageTextureSrc = DEFAULT_IMAGE_SRC,
+  projectionSpeed = 0.05,
+  target = null,
+  clear = true,
+  enabled = true,
+  priority = 0
+}) {
+  const [imageTexture, setImageTexture] = (0, import_react26.useState)(null);
+  const fallbackTexture = (0, import_react26.useMemo)(() => createFallbackTexture(), []);
+  (0, import_react26.useEffect)(() => {
+    let active = true;
+    const loader = new THREE24.TextureLoader();
+    loader.load(
+      imageTextureSrc,
+      (texture) => {
+        if (!active) {
+          texture.dispose();
+          return;
         }
+        texture.wrapS = THREE24.RepeatWrapping;
+        texture.wrapT = THREE24.RepeatWrapping;
+        texture.minFilter = THREE24.LinearFilter;
+        texture.magFilter = THREE24.LinearFilter;
+        texture.generateMipmaps = true;
+        texture.colorSpace = THREE24.NoColorSpace;
+        texture.needsUpdate = true;
+        setImageTexture(texture);
+      },
+      void 0,
+      () => {
+        if (!active) return;
+        setImageTexture(fallbackTexture);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [fallbackTexture, imageTextureSrc]);
+  const uniforms = (0, import_react26.useMemo)(
+    () => ({
+      uTex: { value: imageTexture ?? fallbackTexture },
+      uTime: { value: 0 },
+      uProjectionSpeed: { value: projectionSpeed }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uTex.value = imageTexture ?? fallbackTexture;
+  uniforms.uProjectionSpeed.value = projectionSpeed;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    ShaderPass,
+    {
+      vertexShader: vertex_default19,
+      fragmentShader: fragment_default20,
+      uniforms,
+      target,
+      clear,
+      enabled,
+      priority,
+      timeUniform: "uTime",
+      blending: THREE24.NoBlending
+    }
+  );
+}
+
+// src/components/DitherStreamRendererConfig.tsx
+var import_react27 = require("react");
+var THREE25 = __toESM(require("three"));
+function DitherStreamRendererConfig() {
+  const sharedScene = useSceneContext();
+  (0, import_react27.useEffect)(() => {
+    const context = sharedScene?.contextRef.current;
+    if (!context) return;
+    const renderer = context.renderer;
+    const prevOutputColorSpace = renderer.outputColorSpace;
+    const prevToneMapping = renderer.toneMapping;
+    renderer.outputColorSpace = THREE25.LinearSRGBColorSpace;
+    renderer.toneMapping = THREE25.NoToneMapping;
+    return () => {
+      renderer.outputColorSpace = prevOutputColorSpace;
+      renderer.toneMapping = prevToneMapping;
+    };
+  }, [sharedScene]);
+  return null;
+}
+
+// src/components/DitherStream.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function DitherStream({
+  width = "100%",
+  height = "100%",
+  className = "relative h-full w-full",
+  style,
+  imageTextureSrc,
+  projectionSpeed = 0.05,
+  beamSpeed = 0.1,
+  beamDirection = "counterclockwise",
+  beamColor = [0.667, 0.686, 0.941],
+  beamCenter = [0.5, 0.95],
+  beamRadius = 0.6,
+  beamScale = 1,
+  beamPathShape = "circle",
+  pathPos = [0.5009, 1.0473],
+  pathAngle = (0.999 - 0.25) * -6.28318531,
+  godrayIntensity = 2.9
+}) {
+  const resolveColor = (color) => {
+    if (Array.isArray(color)) return color;
+    const normalized = color.replace("#", "");
+    if (normalized.length !== 6)
+      return [0.667, 0.686, 0.941];
+    return [
+      parseInt(normalized.slice(0, 2), 16) / 255,
+      parseInt(normalized.slice(2, 4), 16) / 255,
+      parseInt(normalized.slice(4, 6), 16) / 255
+    ];
+  };
+  const resolvedBeamColor = resolveColor(beamColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    SceneProvider,
+    {
+      width,
+      height,
+      className,
+      style,
+      manualRender: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DitherStreamRendererConfig, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          RenderPipeline,
+          {
+            passes: [
+              {
+                component: DitherStreamProjectionPass,
+                props: { imageTextureSrc, projectionSpeed }
+              },
+              {
+                component: DitherStreamBeamCompositePass,
+                props: {
+                  beamSpeed,
+                  beamDirection,
+                  beamColor: resolvedBeamColor,
+                  beamCenter,
+                  beamRadius,
+                  beamScale,
+                  pathShape: beamPathShape,
+                  pathPos,
+                  pathAngle
+                }
+              },
+              {
+                component: DitherStreamDitherPass
+              },
+              {
+                component: DitherStreamGodRaysPass,
+                props: { intensity: godrayIntensity }
+              }
+            ]
+          }
+        )
       ]
     }
   );
@@ -4920,6 +5597,7 @@ function DitherPulseRingContent({
 0 && (module.exports = {
   AnimatedDrawingSVG,
   DitherPulseRing,
+  DitherStream,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,