@toriistudio/shader-ui 0.0.8 → 0.0.9

package/dist/index.d.mts

@@ -278,7 +278,7 @@ type NoiseWarpPassUniforms = {
     radius: number;
 };
 
-type CombineMode = "add" | "screen" | "multiply" | "overlay" | "max" | "min" | "difference" | "alphaOver" | "premultipliedOver" | "lerp" | "mask";
+type CombineShaderMode = "add" | "screen" | "multiply" | "overlay" | "max" | "min" | "difference" | "alphaOver" | "premultipliedOver" | "lerp" | "mask";
 
 type DitherPulseRingProps = {
     spriteTextureSrc?: string;
@@ -286,7 +286,7 @@ type DitherPulseRingProps = {
     diffuseEnabled?: boolean;
     blurEnabled?: boolean;
     noiseWarpEnabled?: boolean;
-    combineMode?: CombineMode;
+    combineMode?: CombineShaderMode;
     noiseWarpRadius?: NoiseWarpPassUniforms["radius"];
     noiseWarpStrength?: NoiseWarpPassUniforms["strength"];
     diffuseRadius?: DiffusePassUniforms["diffuseRadius"];
@@ -308,4 +308,24 @@ type DitherPulseRingProps = {
 };
 declare function DitherPulseRing({ spriteTextureSrc, glyphDitherEnabled, diffuseEnabled, blurEnabled, noiseWarpEnabled, combineMode, noiseWarpRadius, noiseWarpStrength, diffuseRadius, blurRadius, borderThickness, borderIntensity, borderColor, borderDitherStrength, borderTonemap, borderAlpha, ringColor, ringSpeed, ringPosition, ringAlpha, width, height, className, style, }: DitherPulseRingProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedDrawingSVG, type CombineMode as CombineShaderMode, DitherPulseRing, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
+type DitherStreamProps = {
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    imageTextureSrc?: string;
+    projectionSpeed?: number;
+    beamSpeed?: number;
+    beamDirection?: "counterclockwise" | "clockwise";
+    beamColor?: [number, number, number] | string;
+    beamCenter?: [number, number];
+    beamRadius?: number;
+    beamScale?: number;
+    beamPathShape?: "circle" | "square" | "diamond" | "triangle" | "oval";
+    pathPos?: [number, number];
+    pathAngle?: number;
+    godrayIntensity?: number;
+};
+declare function DitherStream({ width, height, className, style, imageTextureSrc, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, pathPos, pathAngle, godrayIntensity, }: DitherStreamProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };

package/dist/index.d.ts

@@ -278,7 +278,7 @@ type NoiseWarpPassUniforms = {
     radius: number;
 };
 
-type CombineMode = "add" | "screen" | "multiply" | "overlay" | "max" | "min" | "difference" | "alphaOver" | "premultipliedOver" | "lerp" | "mask";
+type CombineShaderMode = "add" | "screen" | "multiply" | "overlay" | "max" | "min" | "difference" | "alphaOver" | "premultipliedOver" | "lerp" | "mask";
 
 type DitherPulseRingProps = {
     spriteTextureSrc?: string;
@@ -286,7 +286,7 @@ type DitherPulseRingProps = {
     diffuseEnabled?: boolean;
     blurEnabled?: boolean;
     noiseWarpEnabled?: boolean;
-    combineMode?: CombineMode;
+    combineMode?: CombineShaderMode;
     noiseWarpRadius?: NoiseWarpPassUniforms["radius"];
     noiseWarpStrength?: NoiseWarpPassUniforms["strength"];
     diffuseRadius?: DiffusePassUniforms["diffuseRadius"];
@@ -308,4 +308,24 @@ type DitherPulseRingProps = {
 };
 declare function DitherPulseRing({ spriteTextureSrc, glyphDitherEnabled, diffuseEnabled, blurEnabled, noiseWarpEnabled, combineMode, noiseWarpRadius, noiseWarpStrength, diffuseRadius, blurRadius, borderThickness, borderIntensity, borderColor, borderDitherStrength, borderTonemap, borderAlpha, ringColor, ringSpeed, ringPosition, ringAlpha, width, height, className, style, }: DitherPulseRingProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedDrawingSVG, type CombineMode as CombineShaderMode, DitherPulseRing, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
+type DitherStreamProps = {
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    imageTextureSrc?: string;
+    projectionSpeed?: number;
+    beamSpeed?: number;
+    beamDirection?: "counterclockwise" | "clockwise";
+    beamColor?: [number, number, number] | string;
+    beamCenter?: [number, number];
+    beamRadius?: number;
+    beamScale?: number;
+    beamPathShape?: "circle" | "square" | "diamond" | "triangle" | "oval";
+    pathPos?: [number, number];
+    pathAngle?: number;
+    godrayIntensity?: number;
+};
+declare function DitherStream({ width, height, className, style, imageTextureSrc, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, pathPos, pathAngle, godrayIntensity, }: DitherStreamProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };

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,
@@ -4593,17 +4594,20 @@ function RenderPipeline({
 }) {
   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 }) => {
@@ -4633,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);
@@ -4654,7 +4658,7 @@ 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;
@@ -4748,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);
@@ -5128,10 +5135,469 @@ function DitherPulseRingContent({
     )
   ] });
 }
+
+// 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,
+    {
+      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 }
+              }
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedDrawingSVG,
   DitherPulseRing,
+  DitherStream,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,

package/dist/index.mjs

@@ -4580,17 +4580,20 @@ function RenderPipeline({
 }) {
   const sharedScene = useSceneContext();
   const size = sharedScene?.size ?? { width: 1, height: 1 };
+  const shouldCombine = Boolean(combine);
   const targets = useMemo12(() => {
     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]);
   useEffect14(() => {
     if (size.width <= 1 || size.height <= 1) return;
     targets.forEach(({ target }) => {
@@ -4620,7 +4623,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);
@@ -4641,7 +4644,7 @@ 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;
@@ -4735,20 +4738,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);
@@ -5115,9 +5121,468 @@ function DitherPulseRingContent({
     )
   ] });
 }
+
+// src/components/DitherStreamBeamCompositePass.tsx
+import { useMemo as useMemo16 } from "react";
+import * as THREE21 from "three";
+
+// src/utils/createFallbackTexture.ts
+import * as THREE20 from "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
+import { jsx as jsx24 } from "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 = useMemo16(() => createFallbackTexture(), []);
+  const uniforms = useMemo16(
+    () => ({
+      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__ */ jsx24(
+    ShaderPass,
+    {
+      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
+import { useMemo as useMemo17 } from "react";
+import * as THREE22 from "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
+import { jsx as jsx25 } from "react/jsx-runtime";
+function DitherStreamDitherPass({
+  inputTexture = null,
+  target = null,
+  clear = true,
+  enabled = true,
+  priority = 0
+}) {
+  const fallbackTexture = useMemo17(() => createFallbackTexture(), []);
+  const uniforms = useMemo17(
+    () => ({
+      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__ */ jsx25(
+    ShaderPass,
+    {
+      vertexShader: vertex_default15,
+      fragmentShader: fragment_default16,
+      uniforms,
+      inputTexture: inputTexture ?? fallbackTexture,
+      target,
+      clear,
+      enabled,
+      priority,
+      resolutionUniform: "uResolution",
+      blending: THREE22.NoBlending
+    }
+  );
+}
+
+// src/components/DitherStreamGodRaysPass.tsx
+import { useEffect as useEffect17, useMemo as useMemo18 } from "react";
+import * as THREE23 from "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
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs3 } from "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 = useMemo18(() => createFallbackTexture(), []);
+  const extractTarget = useMemo18(
+    () => new THREE23.WebGLRenderTarget(1, 1, TARGET_OPTIONS),
+    []
+  );
+  const marchTarget = useMemo18(
+    () => new THREE23.WebGLRenderTarget(1, 1, TARGET_OPTIONS),
+    []
+  );
+  useEffect17(() => {
+    return () => {
+      extractTarget.dispose();
+      marchTarget.dispose();
+    };
+  }, [extractTarget, marchTarget]);
+  useEffect17(() => {
+    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 = useMemo18(
+    () => ({
+      uTexture: { value: inputTexture ?? fallbackTexture }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const marchUniforms = useMemo18(
+    () => ({
+      uTexture: { value: extractTarget.texture }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const finalUniforms = useMemo18(
+    () => ({
+      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__ */ jsxs3(Fragment4, { children: [
+    /* @__PURE__ */ jsx26(
+      ShaderPass,
+      {
+        vertexShader: vertex_default16,
+        fragmentShader: fragment_default17,
+        uniforms: extractUniforms,
+        inputTexture: inputTexture ?? fallbackTexture,
+        target: extractTarget,
+        clear: true,
+        enabled,
+        priority,
+        blending: THREE23.NoBlending
+      }
+    ),
+    /* @__PURE__ */ jsx26(
+      ShaderPass,
+      {
+        vertexShader: vertex_default18,
+        fragmentShader: fragment_default19,
+        uniforms: marchUniforms,
+        inputTexture: extractTarget.texture,
+        target: marchTarget,
+        clear: true,
+        enabled,
+        priority: priority + 1,
+        blending: THREE23.NoBlending
+      }
+    ),
+    /* @__PURE__ */ jsx26(
+      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
+import { useEffect as useEffect18, useMemo as useMemo19, useState as useState4 } from "react";
+import * as THREE24 from "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
+import { jsx as jsx27 } from "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] = useState4(null);
+  const fallbackTexture = useMemo19(() => createFallbackTexture(), []);
+  useEffect18(() => {
+    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 = useMemo19(
+    () => ({
+      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__ */ jsx27(
+    ShaderPass,
+    {
+      vertexShader: vertex_default19,
+      fragmentShader: fragment_default20,
+      uniforms,
+      target,
+      clear,
+      enabled,
+      priority,
+      timeUniform: "uTime",
+      blending: THREE24.NoBlending
+    }
+  );
+}
+
+// src/components/DitherStreamRendererConfig.tsx
+import { useEffect as useEffect19 } from "react";
+import * as THREE25 from "three";
+function DitherStreamRendererConfig() {
+  const sharedScene = useSceneContext();
+  useEffect19(() => {
+    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
+import { jsx as jsx28, jsxs as jsxs4 } from "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__ */ jsxs4(
+    SceneProvider,
+    {
+      width,
+      height,
+      className,
+      style,
+      manualRender: true,
+      children: [
+        /* @__PURE__ */ jsx28(DitherStreamRendererConfig, {}),
+        /* @__PURE__ */ jsx28(
+          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 }
+              }
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AnimatedDrawingSVG,
   DitherPulseRing,
+  DitherStream,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/shader-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Shader components",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",