@toriistudio/shader-ui 0.0.9 → 0.0.10

package/dist/index.d.mts

@@ -313,7 +313,10 @@ type DitherStreamProps = {
     height?: string | number;
     className?: string;
     style?: React.CSSProperties;
+    children?: React.ReactNode;
     imageTextureSrc?: string;
+    backgroundImageSrc?: string;
+    backgroundDithered?: boolean;
     projectionSpeed?: number;
     beamSpeed?: number;
     beamDirection?: "counterclockwise" | "clockwise";
@@ -321,11 +324,21 @@ type DitherStreamProps = {
     beamCenter?: [number, number];
     beamRadius?: number;
     beamScale?: number;
-    beamPathShape?: "circle" | "square" | "diamond" | "triangle" | "oval";
+    beamPathShape?: "circle" | "square" | "diamond" | "triangle" | "oval" | "custom";
+    beamCustomPathPoints?: Array<[number, number]>;
+    beamEnabled?: boolean;
     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;
+declare function DitherStream({ width, height, className, style, children, imageTextureSrc, backgroundImageSrc, backgroundDithered, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, beamCustomPathPoints, beamEnabled, 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 };
+type DitherStreamPathDrawerProps = {
+    enabled: boolean;
+    beamColor?: string;
+    backgroundImageSrc?: string;
+    onCommit: (points: Array<[number, number]>) => void;
+};
+declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, onCommit, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
+
+export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, DitherStreamPathDrawer, 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

@@ -313,7 +313,10 @@ type DitherStreamProps = {
     height?: string | number;
     className?: string;
     style?: React.CSSProperties;
+    children?: React.ReactNode;
     imageTextureSrc?: string;
+    backgroundImageSrc?: string;
+    backgroundDithered?: boolean;
     projectionSpeed?: number;
     beamSpeed?: number;
     beamDirection?: "counterclockwise" | "clockwise";
@@ -321,11 +324,21 @@ type DitherStreamProps = {
     beamCenter?: [number, number];
     beamRadius?: number;
     beamScale?: number;
-    beamPathShape?: "circle" | "square" | "diamond" | "triangle" | "oval";
+    beamPathShape?: "circle" | "square" | "diamond" | "triangle" | "oval" | "custom";
+    beamCustomPathPoints?: Array<[number, number]>;
+    beamEnabled?: boolean;
     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;
+declare function DitherStream({ width, height, className, style, children, imageTextureSrc, backgroundImageSrc, backgroundDithered, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, beamCustomPathPoints, beamEnabled, 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 };
+type DitherStreamPathDrawerProps = {
+    enabled: boolean;
+    beamColor?: string;
+    backgroundImageSrc?: string;
+    onCommit: (points: Array<[number, number]>) => void;
+};
+declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, onCommit, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
+
+export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, DitherStreamPathDrawer, 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

@@ -33,6 +33,7 @@ __export(src_exports, {
   AnimatedDrawingSVG: () => AnimatedDrawingSVG,
   DitherPulseRing: () => DitherPulseRing,
   DitherStream: () => DitherStream,
+  DitherStreamPathDrawer: () => DitherStreamPathDrawer,
   EFECTO_ASCII_COMPONENT_DEFAULTS: () => EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS: () => EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto: () => Efecto,
@@ -1804,9 +1805,9 @@ function AsciiEffect({
     let viewWidth = width2;
     let viewHeight = height2;
     if (camera instanceof THREE6.PerspectiveCamera) {
-      const distance = Math.abs(camera.position.z - assets.mesh.position.z);
+      const distance2 = Math.abs(camera.position.z - assets.mesh.position.z);
       const verticalFov = THREE6.MathUtils.degToRad(camera.fov);
-      viewHeight = 2 * Math.tan(verticalFov / 2) * distance;
+      viewHeight = 2 * Math.tan(verticalFov / 2) * distance2;
       viewWidth = viewHeight * camera.aspect;
     }
     const texture = loadedTextureRef.current;
@@ -2897,8 +2898,8 @@ function drawPolylineStamped(ctx, pts, visibleLen, totalLen, strokeWidth, stroke
     }
   };
   advanceSegment();
-  const stampAt = (distance) => {
-    const targetDistance = Math.min(distance, maxDistance);
+  const stampAt = (distance2) => {
+    const targetDistance = Math.min(distance2, maxDistance);
     while (segmentIndex < pts.length && targetDistance > segmentStartLen + segmentLength && segmentIndex < lastIndex) {
       segmentStartLen += segmentLength;
       segmentIndex++;
@@ -5154,7 +5155,7 @@ function createFallbackTexture() {
 }
 
 // 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";
+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 int uCustomPointCount;\nuniform vec2 uCustomPoints[64];\nuniform vec2 uPathPos;\nuniform float uPathAngle;\n\nout vec4 fragColor;\n\nconst float PI = 3.14159265;\nconst float TWO_PI = 6.28318531;\nconst int MAX_CUSTOM_POINTS = 64;\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\nfloat segmentDistance(vec2 p, vec2 a, vec2 b) {\n  vec2 pa = p - a;\n  vec2 ba = b - a;\n  float h = clamp(dot(pa, ba) / max(dot(ba, ba), 0.00001), 0.0, 1.0);\n  return length(pa - ba * h);\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  float customDist = 10.0;\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  } else if (uPathShape == 5 && uCustomPointCount > 1) {\n    vec2 uva = vec2(uv.x * aspect, uv.y);\n    for (int i = 0; i < MAX_CUSTOM_POINTS - 1; i++) {\n      if (i >= uCustomPointCount - 1) {\n        break;\n      }\n      vec2 a = vec2(uCustomPoints[i].x * aspect, uCustomPoints[i].y);\n      vec2 b = vec2(uCustomPoints[i + 1].x * aspect, uCustomPoints[i + 1].y);\n      customDist = min(customDist, segmentDistance(uva, a, b));\n    }\n    ringDist = customDist;\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";
@@ -5170,6 +5171,7 @@ function DitherStreamBeamCompositePass({
   beamRadius = 0.6,
   beamScale = 1,
   pathShape = "circle",
+  customPathPoints = [],
   pathPos = [0.5009, 1.0473],
   pathAngle = (0.999 - 0.25) * -6.28318531,
   target = null,
@@ -5177,6 +5179,7 @@ function DitherStreamBeamCompositePass({
   enabled = true,
   priority = 0
 }) {
+  const MAX_CUSTOM_POINTS = 64;
   const fallbackTexture = (0, import_react23.useMemo)(() => createFallbackTexture(), []);
   const uniforms = (0, import_react23.useMemo)(
     () => ({
@@ -5192,7 +5195,16 @@ function DitherStreamBeamCompositePass({
       uBeamRadius: { value: beamRadius },
       uBeamScale: { value: beamScale },
       uPathShape: {
-        value: pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : 0
+        value: pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : pathShape === "custom" ? 5 : 0
+      },
+      uCustomPointCount: {
+        value: Math.min(customPathPoints.length, MAX_CUSTOM_POINTS)
+      },
+      uCustomPoints: {
+        value: Array.from(
+          { length: MAX_CUSTOM_POINTS },
+          () => new THREE21.Vector2(-1, -1)
+        )
       },
       uPathPos: { value: new THREE21.Vector2(pathPos[0], pathPos[1]) },
       uPathAngle: { value: pathAngle }
@@ -5214,7 +5226,16 @@ function DitherStreamBeamCompositePass({
   );
   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.uPathShape.value = pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : pathShape === "custom" ? 5 : 0;
+  uniforms.uCustomPointCount.value = Math.min(
+    customPathPoints.length,
+    MAX_CUSTOM_POINTS
+  );
+  const uniformCustomPoints = uniforms.uCustomPoints.value;
+  for (let index = 0; index < MAX_CUSTOM_POINTS; index += 1) {
+    const point = customPathPoints[index];
+    uniformCustomPoints[index].set(point?.[0] ?? -1, point?.[1] ?? -1);
+  }
   uniforms.uPathPos.value.set(pathPos[0], pathPos[1]);
   uniforms.uPathAngle.value = pathAngle;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -5240,7 +5261,7 @@ 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";
+var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackgroundTexture;\nuniform float uHasBackground;\nuniform float uDitherBackground;\nuniform float uBackgroundAspect;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\n// Object-cover UV: fills the canvas, cropping the image centered at (0.5, 0.5).\nvec2 coverUV(vec2 uv, float imageAspect, float canvasAspect) {\n  vec2 offset = uv - 0.5;\n  if (imageAspect > canvasAspect) {\n    offset.x *= canvasAspect / imageAspect;\n  } else {\n    offset.y *= imageAspect / canvasAspect;\n  }\n  return offset + 0.5;\n}\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  // Foreground dither\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\n  // Background \u2014 sampled with cover UVs\n  vec2 bgUV = coverUV(uv, uBackgroundAspect, ar);\n  vec2 bgCellUV = coverUV(pixelUv, uBackgroundAspect, ar);\n\n  float beamReveal = smoothstep(0.4, 0.75, lum);\n  vec3 bgRaw = texture(uBackgroundTexture, bgUV).rgb;\n  vec3 bgRawColor = mix(vec3(0.0), bgRaw, uHasBackground * beamReveal);\n\n  // Background content at cell-snapped UV (pixelated)\n  vec3 bgCell = texture(uBackgroundTexture, bgCellUV).rgb;\n\n  // Dithered mode: background image multiplies the beam tint.\n  // bgCell * 0.6 + 0.4 maps [0,1] \u2192 [0.4, 1.0], so:\n  //   bright bg  \u2192 tint \xD7 1.0  (same intensity as raw mode)\n  //   dark bg    \u2192 tint \xD7 0.4  (dark areas of image dim the beam)\n  // The beam's hue is always preserved; the background shows as luminance texture.\n  vec3 bgCell3 = bgCell * 0.6 + 0.4;\n  vec3 bgFiltered = tint * bgCell3;\n  vec3 bgDotContent = mix(tint, bgFiltered, uHasBackground);\n  vec3 dotColor = mix(tint, bgDotContent, uDitherBackground);\n\n  // Gap (between dots): raw bg reveal in raw mode, black in dithered mode.\n  vec3 gapColor = bgRawColor * (1.0 - uDitherBackground);\n\n  fragColor = vec4(mix(gapColor, dotColor, 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";
@@ -5249,21 +5270,72 @@ var vertex_default15 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoor
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function DitherStreamDitherPass({
   inputTexture = null,
+  backgroundImageSrc,
+  ditherBackground = true,
   target = null,
   clear = true,
   enabled = true,
   priority = 0
 }) {
   const fallbackTexture = (0, import_react24.useMemo)(() => createFallbackTexture(), []);
+  const [backgroundTexture, setBackgroundTexture] = (0, import_react24.useState)(null);
+  const [backgroundAspect, setBackgroundAspect] = (0, import_react24.useState)(1);
+  (0, import_react24.useEffect)(() => {
+    if (!backgroundImageSrc) {
+      setBackgroundTexture(null);
+      setBackgroundAspect(1);
+      return;
+    }
+    let active = true;
+    const loader = new THREE22.TextureLoader();
+    loader.load(
+      backgroundImageSrc,
+      (texture) => {
+        if (!active) {
+          texture.dispose();
+          return;
+        }
+        texture.minFilter = THREE22.LinearFilter;
+        texture.magFilter = THREE22.LinearFilter;
+        texture.needsUpdate = true;
+        const img = texture.image;
+        if (img && img.naturalWidth && img.naturalHeight) {
+          setBackgroundAspect(img.naturalWidth / img.naturalHeight);
+        }
+        setBackgroundTexture(texture);
+      },
+      void 0,
+      (error) => {
+        if (!active) return;
+        console.error(
+          "[DitherStream] Failed to load backgroundImageSrc \u2014 likely a CORS issue. The image server must include Access-Control-Allow-Origin headers.",
+          backgroundImageSrc,
+          error
+        );
+        setBackgroundTexture(null);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [backgroundImageSrc]);
   const uniforms = (0, import_react24.useMemo)(
     () => ({
       uTexture: { value: inputTexture ?? fallbackTexture },
+      uBackgroundTexture: { value: fallbackTexture },
+      uHasBackground: { value: 0 },
+      uDitherBackground: { value: 1 },
+      uBackgroundAspect: { value: 1 },
       uResolution: { value: new THREE22.Vector2(1, 1) }
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   uniforms.uTexture.value = inputTexture ?? fallbackTexture;
+  uniforms.uBackgroundTexture.value = backgroundTexture ?? fallbackTexture;
+  uniforms.uHasBackground.value = backgroundTexture ? 1 : 0;
+  uniforms.uDitherBackground.value = ditherBackground ? 1 : 0;
+  uniforms.uBackgroundAspect.value = backgroundAspect;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ShaderPass,
     {
@@ -5522,7 +5594,10 @@ function DitherStream({
   height = "100%",
   className = "relative h-full w-full",
   style,
+  children,
   imageTextureSrc,
+  backgroundImageSrc,
+  backgroundDithered = true,
   projectionSpeed = 0.05,
   beamSpeed = 0.1,
   beamDirection = "counterclockwise",
@@ -5531,6 +5606,8 @@ function DitherStream({
   beamRadius = 0.6,
   beamScale = 1,
   beamPathShape = "circle",
+  beamCustomPathPoints = [],
+  beamEnabled = true,
   pathPos = [0.5009, 1.0473],
   pathAngle = (0.999 - 0.25) * -6.28318531,
   godrayIntensity = 2.9
@@ -5567,6 +5644,7 @@ function DitherStream({
               },
               {
                 component: DitherStreamBeamCompositePass,
+                enabled: beamEnabled,
                 props: {
                   beamSpeed,
                   beamDirection,
@@ -5575,12 +5653,14 @@ function DitherStream({
                   beamRadius,
                   beamScale,
                   pathShape: beamPathShape,
+                  customPathPoints: beamCustomPathPoints,
                   pathPos,
                   pathAngle
                 }
               },
               {
-                component: DitherStreamDitherPass
+                component: DitherStreamDitherPass,
+                props: { backgroundImageSrc, ditherBackground: backgroundDithered }
               },
               {
                 component: DitherStreamGodRaysPass,
@@ -5588,6 +5668,345 @@ function DitherStream({
               }
             ]
           }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/DitherStreamPathDrawer.tsx
+var import_react28 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var MIN_POINT_DISTANCE = 6e-3;
+var MAX_CAPTURED_POINTS = 512;
+var MAX_OUTPUT_POINTS = 64;
+var BRUSH_STEP_PX = 2;
+var BRUSH_RADIUS_PX = 8;
+var COMMIT_IDLE_MS = 2500;
+var DITHER_CELL = 3;
+var DITHER_HALO_FACTOR = 3.8;
+var BAYER_4X4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5]
+].map((row) => row.map((v) => v / 16));
+var bayerThreshold = (px, py) => {
+  const bx = (Math.floor(px / DITHER_CELL) % 4 + 4) % 4;
+  const by = (Math.floor(py / DITHER_CELL) % 4 + 4) % 4;
+  return BAYER_4X4[by][bx];
+};
+var clamp01 = (value) => Math.min(1, Math.max(0, value));
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var samplePath = (points, count) => {
+  if (points.length <= count) return points;
+  const sampled = [];
+  for (let index = 0; index < count; index += 1) {
+    const t = index / Math.max(1, count - 1);
+    const sourceIndex = Math.round(t * (points.length - 1));
+    sampled.push(points[sourceIndex]);
+  }
+  return sampled;
+};
+var hexToRgb = (hex) => {
+  const normalized = hex.replace("#", "");
+  if (normalized.length !== 6) {
+    return { r: 170, g: 176, b: 240 };
+  }
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16)
+  };
+};
+var hash2 = (x, y) => {
+  const n = x * 15731 + y * 789221 + 1376312589;
+  const masked = n & 2147483647;
+  return masked % 997 / 997;
+};
+function DitherStreamPathDrawer({
+  enabled,
+  beamColor = "#aab0f0",
+  backgroundImageSrc,
+  onCommit
+}) {
+  const overlayRef = (0, import_react28.useRef)(null);
+  const canvasRef = (0, import_react28.useRef)(null);
+  const drawingRef = (0, import_react28.useRef)(false);
+  const pointerIdRef = (0, import_react28.useRef)(null);
+  const commitTimeoutRef = (0, import_react28.useRef)(null);
+  const pointsRef = (0, import_react28.useRef)([]);
+  const lastPixelPointRef = (0, import_react28.useRef)(null);
+  const [cursor, setCursor] = (0, import_react28.useState)(null);
+  const updatePoints = (0, import_react28.useCallback)((nextPoints) => {
+    pointsRef.current = nextPoints;
+  }, []);
+  const getRelativePoint = (0, import_react28.useCallback)(
+    (event) => {
+      const rect = overlayRef.current?.getBoundingClientRect();
+      if (!rect || rect.width <= 0 || rect.height <= 0) return null;
+      const x = clamp01((event.clientX - rect.left) / rect.width);
+      const y = clamp01(1 - (event.clientY - rect.top) / rect.height);
+      return {
+        normalized: { x, y },
+        pixels: {
+          x: x * rect.width,
+          y: (1 - y) * rect.height
+        }
+      };
+    },
+    []
+  );
+  const clearCanvas = (0, import_react28.useCallback)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }, []);
+  const stampBrush = (0, import_react28.useCallback)(
+    (ctx, point, strength = 1) => {
+      const color = hexToRgb(beamColor);
+      const haloRadius = BRUSH_RADIUS_PX * DITHER_HALO_FACTOR;
+      const glow = ctx.createRadialGradient(
+        point.x,
+        point.y,
+        0,
+        point.x,
+        point.y,
+        haloRadius
+      );
+      glow.addColorStop(
+        0,
+        `rgba(${color.r}, ${color.g}, ${color.b}, ${0.09 * strength})`
+      );
+      glow.addColorStop(1, "rgba(0,0,0,0)");
+      ctx.fillStyle = glow;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, haloRadius, 0, Math.PI * 2);
+      ctx.fill();
+      const step = DITHER_CELL;
+      const startX = Math.floor((point.x - haloRadius) / step) * step;
+      const endX = Math.ceil((point.x + haloRadius) / step) * step;
+      const startY = Math.floor((point.y - haloRadius) / step) * step;
+      const endY = Math.ceil((point.y + haloRadius) / step) * step;
+      for (let py = startY; py <= endY; py += step) {
+        for (let px = startX; px <= endX; px += step) {
+          const radial = Math.hypot(
+            px + step * 0.5 - point.x,
+            py + step * 0.5 - point.y
+          );
+          if (radial > haloRadius) continue;
+          const normalizedDist = radial / haloRadius;
+          const density = 1 - normalizedDist;
+          if (bayerThreshold(px, py) >= density) continue;
+          const alpha = density * 0.9 * strength;
+          const isHot = normalizedDist < 0.28 && hash2(Math.floor(px) + 11, Math.floor(py) - 7) > 0.68;
+          ctx.fillStyle = isHot ? `rgba(255,255,255,${alpha})` : `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+          ctx.fillRect(px, py, step, step);
+        }
+      }
+      ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${0.88 * strength})`;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, BRUSH_RADIUS_PX * 0.55, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = `rgba(255,255,255,${0.92 * strength})`;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, BRUSH_RADIUS_PX * 0.28, 0, Math.PI * 2);
+      ctx.fill();
+    },
+    [beamColor]
+  );
+  const drawSegment = (0, import_react28.useCallback)(
+    (from, to) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dx = to.x - from.x;
+      const dy = to.y - from.y;
+      const distancePx = Math.hypot(dx, dy);
+      const steps = Math.max(1, Math.ceil(distancePx / BRUSH_STEP_PX));
+      for (let index = 0; index <= steps; index += 1) {
+        const t = index / steps;
+        stampBrush(
+          ctx,
+          { x: from.x + dx * t, y: from.y + dy * t },
+          drawingRef.current ? 1 : 0.92
+        );
+      }
+    },
+    [stampBrush]
+  );
+  const finalizePath = (0, import_react28.useCallback)(() => {
+    if (commitTimeoutRef.current) {
+      clearTimeout(commitTimeoutRef.current);
+      commitTimeoutRef.current = null;
+    }
+    const capturedPoints = pointsRef.current;
+    if (capturedPoints.length < 2) {
+      updatePoints([]);
+      return;
+    }
+    const sampled = samplePath(capturedPoints, MAX_OUTPUT_POINTS);
+    onCommit(sampled.map((point) => [point.x, point.y]));
+    updatePoints([]);
+  }, [onCommit, updatePoints]);
+  const queueCommit = (0, import_react28.useCallback)(() => {
+    if (commitTimeoutRef.current) {
+      clearTimeout(commitTimeoutRef.current);
+    }
+    commitTimeoutRef.current = setTimeout(() => {
+      finalizePath();
+    }, COMMIT_IDLE_MS);
+  }, [finalizePath]);
+  const addPoint = (0, import_react28.useCallback)(
+    (point) => {
+      const previousPoints = pointsRef.current;
+      if (!previousPoints.length) {
+        updatePoints([point]);
+        return;
+      }
+      const lastPoint = previousPoints[previousPoints.length - 1];
+      if (previousPoints.length < MAX_CAPTURED_POINTS && distance(lastPoint, point) >= MIN_POINT_DISTANCE) {
+        updatePoints([...previousPoints, point]);
+      }
+    },
+    [updatePoints]
+  );
+  (0, import_react28.useEffect)(() => {
+    if (enabled) return;
+    drawingRef.current = false;
+    pointerIdRef.current = null;
+    if (commitTimeoutRef.current) {
+      clearTimeout(commitTimeoutRef.current);
+      commitTimeoutRef.current = null;
+    }
+    pointsRef.current = [];
+    lastPixelPointRef.current = null;
+    setCursor(null);
+    clearCanvas();
+  }, [clearCanvas, enabled]);
+  (0, import_react28.useEffect)(() => {
+    if (!enabled) return;
+    const canvas = canvasRef.current;
+    const container = overlayRef.current;
+    if (!canvas || !container) return;
+    const resize = () => {
+      const rect = container.getBoundingClientRect();
+      const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+      canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.globalCompositeOperation = "source-over";
+      ctx.clearRect(0, 0, rect.width, rect.height);
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [enabled]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      ref: overlayRef,
+      className: "absolute inset-0 z-20 cursor-crosshair touch-none",
+      style: {
+        background: backgroundImageSrc ? void 0 : "radial-gradient(circle at center, rgba(102,110,164,0.10), rgba(7,9,17,0.72))",
+        border: "1px dashed rgba(188,196,246,0.35)"
+      },
+      onPointerDown: (event) => {
+        const point = getRelativePoint(event);
+        if (!point) return;
+        drawingRef.current = true;
+        pointerIdRef.current = event.pointerId;
+        setCursor(point.normalized);
+        const existingPoints = pointsRef.current;
+        if (existingPoints.length === 0) {
+          updatePoints([point.normalized]);
+        } else {
+          updatePoints([...existingPoints, point.normalized]);
+        }
+        lastPixelPointRef.current = point.pixels;
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (ctx) {
+          stampBrush(ctx, point.pixels);
+        }
+        queueCommit();
+        event.currentTarget.setPointerCapture(event.pointerId);
+      },
+      onPointerMove: (event) => {
+        const point = getRelativePoint(event);
+        if (!point) return;
+        setCursor(point.normalized);
+        if (!drawingRef.current) return;
+        addPoint(point.normalized);
+        const lastPoint = lastPixelPointRef.current;
+        if (lastPoint) {
+          drawSegment(lastPoint, point.pixels);
+        }
+        lastPixelPointRef.current = point.pixels;
+        queueCommit();
+      },
+      onPointerUp: (event) => {
+        if (pointerIdRef.current === event.pointerId) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        drawingRef.current = false;
+        pointerIdRef.current = null;
+        lastPixelPointRef.current = null;
+      },
+      onPointerCancel: (event) => {
+        if (pointerIdRef.current === event.pointerId) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        drawingRef.current = false;
+        pointerIdRef.current = null;
+        lastPixelPointRef.current = null;
+        if (commitTimeoutRef.current) {
+          clearTimeout(commitTimeoutRef.current);
+          commitTimeoutRef.current = null;
+        }
+        updatePoints([]);
+        clearCanvas();
+      },
+      children: [
+        backgroundImageSrc && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "img",
+            {
+              src: backgroundImageSrc,
+              className: "pointer-events-none absolute inset-0 h-full w-full object-cover",
+              alt: "",
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-black/50" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "pointer-events-none absolute left-1/2 top-3 -translate-x-1/2 rounded-full border border-white/30 bg-black/40 px-3 py-1 text-[11px] uppercase tracking-[0.14em] text-white/80", children: "Click and drag to draw your beam path" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "pointer-events-none absolute inset-0"
+          }
+        ),
+        cursor && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/70 bg-white/15",
+            style: {
+              left: `${cursor.x * 100}%`,
+              top: `${(1 - cursor.y) * 100}%`
+            }
+          }
         )
       ]
     }
@@ -5598,6 +6017,7 @@ function DitherStream({
   AnimatedDrawingSVG,
   DitherPulseRing,
   DitherStream,
+  DitherStreamPathDrawer,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,

package/dist/index.mjs

@@ -1781,9 +1781,9 @@ function AsciiEffect({
     let viewWidth = width2;
     let viewHeight = height2;
     if (camera instanceof THREE6.PerspectiveCamera) {
-      const distance = Math.abs(camera.position.z - assets.mesh.position.z);
+      const distance2 = Math.abs(camera.position.z - assets.mesh.position.z);
       const verticalFov = THREE6.MathUtils.degToRad(camera.fov);
-      viewHeight = 2 * Math.tan(verticalFov / 2) * distance;
+      viewHeight = 2 * Math.tan(verticalFov / 2) * distance2;
       viewWidth = viewHeight * camera.aspect;
     }
     const texture = loadedTextureRef.current;
@@ -2874,8 +2874,8 @@ function drawPolylineStamped(ctx, pts, visibleLen, totalLen, strokeWidth, stroke
     }
   };
   advanceSegment();
-  const stampAt = (distance) => {
-    const targetDistance = Math.min(distance, maxDistance);
+  const stampAt = (distance2) => {
+    const targetDistance = Math.min(distance2, maxDistance);
     while (segmentIndex < pts.length && targetDistance > segmentStartLen + segmentLength && segmentIndex < lastIndex) {
       segmentStartLen += segmentLength;
       segmentIndex++;
@@ -5140,7 +5140,7 @@ function createFallbackTexture() {
 }
 
 // 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";
+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 int uCustomPointCount;\nuniform vec2 uCustomPoints[64];\nuniform vec2 uPathPos;\nuniform float uPathAngle;\n\nout vec4 fragColor;\n\nconst float PI = 3.14159265;\nconst float TWO_PI = 6.28318531;\nconst int MAX_CUSTOM_POINTS = 64;\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\nfloat segmentDistance(vec2 p, vec2 a, vec2 b) {\n  vec2 pa = p - a;\n  vec2 ba = b - a;\n  float h = clamp(dot(pa, ba) / max(dot(ba, ba), 0.00001), 0.0, 1.0);\n  return length(pa - ba * h);\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  float customDist = 10.0;\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  } else if (uPathShape == 5 && uCustomPointCount > 1) {\n    vec2 uva = vec2(uv.x * aspect, uv.y);\n    for (int i = 0; i < MAX_CUSTOM_POINTS - 1; i++) {\n      if (i >= uCustomPointCount - 1) {\n        break;\n      }\n      vec2 a = vec2(uCustomPoints[i].x * aspect, uCustomPoints[i].y);\n      vec2 b = vec2(uCustomPoints[i + 1].x * aspect, uCustomPoints[i + 1].y);\n      customDist = min(customDist, segmentDistance(uva, a, b));\n    }\n    ringDist = customDist;\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";
@@ -5156,6 +5156,7 @@ function DitherStreamBeamCompositePass({
   beamRadius = 0.6,
   beamScale = 1,
   pathShape = "circle",
+  customPathPoints = [],
   pathPos = [0.5009, 1.0473],
   pathAngle = (0.999 - 0.25) * -6.28318531,
   target = null,
@@ -5163,6 +5164,7 @@ function DitherStreamBeamCompositePass({
   enabled = true,
   priority = 0
 }) {
+  const MAX_CUSTOM_POINTS = 64;
   const fallbackTexture = useMemo16(() => createFallbackTexture(), []);
   const uniforms = useMemo16(
     () => ({
@@ -5178,7 +5180,16 @@ function DitherStreamBeamCompositePass({
       uBeamRadius: { value: beamRadius },
       uBeamScale: { value: beamScale },
       uPathShape: {
-        value: pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : 0
+        value: pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : pathShape === "custom" ? 5 : 0
+      },
+      uCustomPointCount: {
+        value: Math.min(customPathPoints.length, MAX_CUSTOM_POINTS)
+      },
+      uCustomPoints: {
+        value: Array.from(
+          { length: MAX_CUSTOM_POINTS },
+          () => new THREE21.Vector2(-1, -1)
+        )
       },
       uPathPos: { value: new THREE21.Vector2(pathPos[0], pathPos[1]) },
       uPathAngle: { value: pathAngle }
@@ -5200,7 +5211,16 @@ function DitherStreamBeamCompositePass({
   );
   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.uPathShape.value = pathShape === "square" ? 1 : pathShape === "diamond" ? 2 : pathShape === "triangle" ? 3 : pathShape === "oval" ? 4 : pathShape === "custom" ? 5 : 0;
+  uniforms.uCustomPointCount.value = Math.min(
+    customPathPoints.length,
+    MAX_CUSTOM_POINTS
+  );
+  const uniformCustomPoints = uniforms.uCustomPoints.value;
+  for (let index = 0; index < MAX_CUSTOM_POINTS; index += 1) {
+    const point = customPathPoints[index];
+    uniformCustomPoints[index].set(point?.[0] ?? -1, point?.[1] ?? -1);
+  }
   uniforms.uPathPos.value.set(pathPos[0], pathPos[1]);
   uniforms.uPathAngle.value = pathAngle;
   return /* @__PURE__ */ jsx24(
@@ -5222,11 +5242,11 @@ function DitherStreamBeamCompositePass({
 }
 
 // src/components/DitherStreamDitherPass.tsx
-import { useMemo as useMemo17 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo17, useState as useState4 } 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";
+var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackgroundTexture;\nuniform float uHasBackground;\nuniform float uDitherBackground;\nuniform float uBackgroundAspect;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\n// Object-cover UV: fills the canvas, cropping the image centered at (0.5, 0.5).\nvec2 coverUV(vec2 uv, float imageAspect, float canvasAspect) {\n  vec2 offset = uv - 0.5;\n  if (imageAspect > canvasAspect) {\n    offset.x *= canvasAspect / imageAspect;\n  } else {\n    offset.y *= imageAspect / canvasAspect;\n  }\n  return offset + 0.5;\n}\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  // Foreground dither\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\n  // Background \u2014 sampled with cover UVs\n  vec2 bgUV = coverUV(uv, uBackgroundAspect, ar);\n  vec2 bgCellUV = coverUV(pixelUv, uBackgroundAspect, ar);\n\n  float beamReveal = smoothstep(0.4, 0.75, lum);\n  vec3 bgRaw = texture(uBackgroundTexture, bgUV).rgb;\n  vec3 bgRawColor = mix(vec3(0.0), bgRaw, uHasBackground * beamReveal);\n\n  // Background content at cell-snapped UV (pixelated)\n  vec3 bgCell = texture(uBackgroundTexture, bgCellUV).rgb;\n\n  // Dithered mode: background image multiplies the beam tint.\n  // bgCell * 0.6 + 0.4 maps [0,1] \u2192 [0.4, 1.0], so:\n  //   bright bg  \u2192 tint \xD7 1.0  (same intensity as raw mode)\n  //   dark bg    \u2192 tint \xD7 0.4  (dark areas of image dim the beam)\n  // The beam's hue is always preserved; the background shows as luminance texture.\n  vec3 bgCell3 = bgCell * 0.6 + 0.4;\n  vec3 bgFiltered = tint * bgCell3;\n  vec3 bgDotContent = mix(tint, bgFiltered, uHasBackground);\n  vec3 dotColor = mix(tint, bgDotContent, uDitherBackground);\n\n  // Gap (between dots): raw bg reveal in raw mode, black in dithered mode.\n  vec3 gapColor = bgRawColor * (1.0 - uDitherBackground);\n\n  fragColor = vec4(mix(gapColor, dotColor, 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";
@@ -5235,21 +5255,72 @@ var vertex_default15 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoor
 import { jsx as jsx25 } from "react/jsx-runtime";
 function DitherStreamDitherPass({
   inputTexture = null,
+  backgroundImageSrc,
+  ditherBackground = true,
   target = null,
   clear = true,
   enabled = true,
   priority = 0
 }) {
   const fallbackTexture = useMemo17(() => createFallbackTexture(), []);
+  const [backgroundTexture, setBackgroundTexture] = useState4(null);
+  const [backgroundAspect, setBackgroundAspect] = useState4(1);
+  useEffect17(() => {
+    if (!backgroundImageSrc) {
+      setBackgroundTexture(null);
+      setBackgroundAspect(1);
+      return;
+    }
+    let active = true;
+    const loader = new THREE22.TextureLoader();
+    loader.load(
+      backgroundImageSrc,
+      (texture) => {
+        if (!active) {
+          texture.dispose();
+          return;
+        }
+        texture.minFilter = THREE22.LinearFilter;
+        texture.magFilter = THREE22.LinearFilter;
+        texture.needsUpdate = true;
+        const img = texture.image;
+        if (img && img.naturalWidth && img.naturalHeight) {
+          setBackgroundAspect(img.naturalWidth / img.naturalHeight);
+        }
+        setBackgroundTexture(texture);
+      },
+      void 0,
+      (error) => {
+        if (!active) return;
+        console.error(
+          "[DitherStream] Failed to load backgroundImageSrc \u2014 likely a CORS issue. The image server must include Access-Control-Allow-Origin headers.",
+          backgroundImageSrc,
+          error
+        );
+        setBackgroundTexture(null);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [backgroundImageSrc]);
   const uniforms = useMemo17(
     () => ({
       uTexture: { value: inputTexture ?? fallbackTexture },
+      uBackgroundTexture: { value: fallbackTexture },
+      uHasBackground: { value: 0 },
+      uDitherBackground: { value: 1 },
+      uBackgroundAspect: { value: 1 },
       uResolution: { value: new THREE22.Vector2(1, 1) }
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   uniforms.uTexture.value = inputTexture ?? fallbackTexture;
+  uniforms.uBackgroundTexture.value = backgroundTexture ?? fallbackTexture;
+  uniforms.uHasBackground.value = backgroundTexture ? 1 : 0;
+  uniforms.uDitherBackground.value = ditherBackground ? 1 : 0;
+  uniforms.uBackgroundAspect.value = backgroundAspect;
   return /* @__PURE__ */ jsx25(
     ShaderPass,
     {
@@ -5268,7 +5339,7 @@ function DitherStreamDitherPass({
 }
 
 // src/components/DitherStreamGodRaysPass.tsx
-import { useEffect as useEffect17, useMemo as useMemo18 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo18 } from "react";
 import * as THREE23 from "three";
 
 // src/shaders/dither-godray-extract/fragment.glsl
@@ -5313,13 +5384,13 @@ function DitherStreamGodRaysPass({
     () => new THREE23.WebGLRenderTarget(1, 1, TARGET_OPTIONS),
     []
   );
-  useEffect17(() => {
+  useEffect18(() => {
     return () => {
       extractTarget.dispose();
       marchTarget.dispose();
     };
   }, [extractTarget, marchTarget]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (size.width <= 1 || size.height <= 1) return;
     extractTarget.setSize(size.width, size.height);
     marchTarget.setSize(
@@ -5402,7 +5473,7 @@ function DitherStreamGodRaysPass({
 }
 
 // src/components/DitherStreamProjectionPass.tsx
-import { useEffect as useEffect18, useMemo as useMemo19, useState as useState4 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo19, useState as useState5 } from "react";
 import * as THREE24 from "three";
 
 // src/shaders/dither-godray-projection/fragment.glsl
@@ -5422,9 +5493,9 @@ function DitherStreamProjectionPass({
   enabled = true,
   priority = 0
 }) {
-  const [imageTexture, setImageTexture] = useState4(null);
+  const [imageTexture, setImageTexture] = useState5(null);
   const fallbackTexture = useMemo19(() => createFallbackTexture(), []);
-  useEffect18(() => {
+  useEffect19(() => {
     let active = true;
     const loader = new THREE24.TextureLoader();
     loader.load(
@@ -5481,11 +5552,11 @@ function DitherStreamProjectionPass({
 }
 
 // src/components/DitherStreamRendererConfig.tsx
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 import * as THREE25 from "three";
 function DitherStreamRendererConfig() {
   const sharedScene = useSceneContext();
-  useEffect19(() => {
+  useEffect20(() => {
     const context = sharedScene?.contextRef.current;
     if (!context) return;
     const renderer = context.renderer;
@@ -5508,7 +5579,10 @@ function DitherStream({
   height = "100%",
   className = "relative h-full w-full",
   style,
+  children,
   imageTextureSrc,
+  backgroundImageSrc,
+  backgroundDithered = true,
   projectionSpeed = 0.05,
   beamSpeed = 0.1,
   beamDirection = "counterclockwise",
@@ -5517,6 +5591,8 @@ function DitherStream({
   beamRadius = 0.6,
   beamScale = 1,
   beamPathShape = "circle",
+  beamCustomPathPoints = [],
+  beamEnabled = true,
   pathPos = [0.5009, 1.0473],
   pathAngle = (0.999 - 0.25) * -6.28318531,
   godrayIntensity = 2.9
@@ -5553,6 +5629,7 @@ function DitherStream({
               },
               {
                 component: DitherStreamBeamCompositePass,
+                enabled: beamEnabled,
                 props: {
                   beamSpeed,
                   beamDirection,
@@ -5561,12 +5638,14 @@ function DitherStream({
                   beamRadius,
                   beamScale,
                   pathShape: beamPathShape,
+                  customPathPoints: beamCustomPathPoints,
                   pathPos,
                   pathAngle
                 }
               },
               {
-                component: DitherStreamDitherPass
+                component: DitherStreamDitherPass,
+                props: { backgroundImageSrc, ditherBackground: backgroundDithered }
               },
               {
                 component: DitherStreamGodRaysPass,
@@ -5574,6 +5653,350 @@ function DitherStream({
               }
             ]
           }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/DitherStreamPathDrawer.tsx
+import {
+  useCallback as useCallback9,
+  useEffect as useEffect21,
+  useRef as useRef13,
+  useState as useState6
+} from "react";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs5 } from "react/jsx-runtime";
+var MIN_POINT_DISTANCE = 6e-3;
+var MAX_CAPTURED_POINTS = 512;
+var MAX_OUTPUT_POINTS = 64;
+var BRUSH_STEP_PX = 2;
+var BRUSH_RADIUS_PX = 8;
+var COMMIT_IDLE_MS = 2500;
+var DITHER_CELL = 3;
+var DITHER_HALO_FACTOR = 3.8;
+var BAYER_4X4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5]
+].map((row) => row.map((v) => v / 16));
+var bayerThreshold = (px, py) => {
+  const bx = (Math.floor(px / DITHER_CELL) % 4 + 4) % 4;
+  const by = (Math.floor(py / DITHER_CELL) % 4 + 4) % 4;
+  return BAYER_4X4[by][bx];
+};
+var clamp01 = (value) => Math.min(1, Math.max(0, value));
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var samplePath = (points, count) => {
+  if (points.length <= count) return points;
+  const sampled = [];
+  for (let index = 0; index < count; index += 1) {
+    const t = index / Math.max(1, count - 1);
+    const sourceIndex = Math.round(t * (points.length - 1));
+    sampled.push(points[sourceIndex]);
+  }
+  return sampled;
+};
+var hexToRgb = (hex) => {
+  const normalized = hex.replace("#", "");
+  if (normalized.length !== 6) {
+    return { r: 170, g: 176, b: 240 };
+  }
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16)
+  };
+};
+var hash2 = (x, y) => {
+  const n = x * 15731 + y * 789221 + 1376312589;
+  const masked = n & 2147483647;
+  return masked % 997 / 997;
+};
+function DitherStreamPathDrawer({
+  enabled,
+  beamColor = "#aab0f0",
+  backgroundImageSrc,
+  onCommit
+}) {
+  const overlayRef = useRef13(null);
+  const canvasRef = useRef13(null);
+  const drawingRef = useRef13(false);
+  const pointerIdRef = useRef13(null);
+  const commitTimeoutRef = useRef13(null);
+  const pointsRef = useRef13([]);
+  const lastPixelPointRef = useRef13(null);
+  const [cursor, setCursor] = useState6(null);
+  const updatePoints = useCallback9((nextPoints) => {
+    pointsRef.current = nextPoints;
+  }, []);
+  const getRelativePoint = useCallback9(
+    (event) => {
+      const rect = overlayRef.current?.getBoundingClientRect();
+      if (!rect || rect.width <= 0 || rect.height <= 0) return null;
+      const x = clamp01((event.clientX - rect.left) / rect.width);
+      const y = clamp01(1 - (event.clientY - rect.top) / rect.height);
+      return {
+        normalized: { x, y },
+        pixels: {
+          x: x * rect.width,
+          y: (1 - y) * rect.height
+        }
+      };
+    },
+    []
+  );
+  const clearCanvas = useCallback9(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }, []);
+  const stampBrush = useCallback9(
+    (ctx, point, strength = 1) => {
+      const color = hexToRgb(beamColor);
+      const haloRadius = BRUSH_RADIUS_PX * DITHER_HALO_FACTOR;
+      const glow = ctx.createRadialGradient(
+        point.x,
+        point.y,
+        0,
+        point.x,
+        point.y,
+        haloRadius
+      );
+      glow.addColorStop(
+        0,
+        `rgba(${color.r}, ${color.g}, ${color.b}, ${0.09 * strength})`
+      );
+      glow.addColorStop(1, "rgba(0,0,0,0)");
+      ctx.fillStyle = glow;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, haloRadius, 0, Math.PI * 2);
+      ctx.fill();
+      const step = DITHER_CELL;
+      const startX = Math.floor((point.x - haloRadius) / step) * step;
+      const endX = Math.ceil((point.x + haloRadius) / step) * step;
+      const startY = Math.floor((point.y - haloRadius) / step) * step;
+      const endY = Math.ceil((point.y + haloRadius) / step) * step;
+      for (let py = startY; py <= endY; py += step) {
+        for (let px = startX; px <= endX; px += step) {
+          const radial = Math.hypot(
+            px + step * 0.5 - point.x,
+            py + step * 0.5 - point.y
+          );
+          if (radial > haloRadius) continue;
+          const normalizedDist = radial / haloRadius;
+          const density = 1 - normalizedDist;
+          if (bayerThreshold(px, py) >= density) continue;
+          const alpha = density * 0.9 * strength;
+          const isHot = normalizedDist < 0.28 && hash2(Math.floor(px) + 11, Math.floor(py) - 7) > 0.68;
+          ctx.fillStyle = isHot ? `rgba(255,255,255,${alpha})` : `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+          ctx.fillRect(px, py, step, step);
+        }
+      }
+      ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${0.88 * strength})`;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, BRUSH_RADIUS_PX * 0.55, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = `rgba(255,255,255,${0.92 * strength})`;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, BRUSH_RADIUS_PX * 0.28, 0, Math.PI * 2);
+      ctx.fill();
+    },
+    [beamColor]
+  );
+  const drawSegment = useCallback9(
+    (from, to) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dx = to.x - from.x;
+      const dy = to.y - from.y;
+      const distancePx = Math.hypot(dx, dy);
+      const steps = Math.max(1, Math.ceil(distancePx / BRUSH_STEP_PX));
+      for (let index = 0; index <= steps; index += 1) {
+        const t = index / steps;
+        stampBrush(
+          ctx,
+          { x: from.x + dx * t, y: from.y + dy * t },
+          drawingRef.current ? 1 : 0.92
+        );
+      }
+    },
+    [stampBrush]
+  );
+  const finalizePath = useCallback9(() => {
+    if (commitTimeoutRef.current) {
+      clearTimeout(commitTimeoutRef.current);
+      commitTimeoutRef.current = null;
+    }
+    const capturedPoints = pointsRef.current;
+    if (capturedPoints.length < 2) {
+      updatePoints([]);
+      return;
+    }
+    const sampled = samplePath(capturedPoints, MAX_OUTPUT_POINTS);
+    onCommit(sampled.map((point) => [point.x, point.y]));
+    updatePoints([]);
+  }, [onCommit, updatePoints]);
+  const queueCommit = useCallback9(() => {
+    if (commitTimeoutRef.current) {
+      clearTimeout(commitTimeoutRef.current);
+    }
+    commitTimeoutRef.current = setTimeout(() => {
+      finalizePath();
+    }, COMMIT_IDLE_MS);
+  }, [finalizePath]);
+  const addPoint = useCallback9(
+    (point) => {
+      const previousPoints = pointsRef.current;
+      if (!previousPoints.length) {
+        updatePoints([point]);
+        return;
+      }
+      const lastPoint = previousPoints[previousPoints.length - 1];
+      if (previousPoints.length < MAX_CAPTURED_POINTS && distance(lastPoint, point) >= MIN_POINT_DISTANCE) {
+        updatePoints([...previousPoints, point]);
+      }
+    },
+    [updatePoints]
+  );
+  useEffect21(() => {
+    if (enabled) return;
+    drawingRef.current = false;
+    pointerIdRef.current = null;
+    if (commitTimeoutRef.current) {
+      clearTimeout(commitTimeoutRef.current);
+      commitTimeoutRef.current = null;
+    }
+    pointsRef.current = [];
+    lastPixelPointRef.current = null;
+    setCursor(null);
+    clearCanvas();
+  }, [clearCanvas, enabled]);
+  useEffect21(() => {
+    if (!enabled) return;
+    const canvas = canvasRef.current;
+    const container = overlayRef.current;
+    if (!canvas || !container) return;
+    const resize = () => {
+      const rect = container.getBoundingClientRect();
+      const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+      canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.globalCompositeOperation = "source-over";
+      ctx.clearRect(0, 0, rect.width, rect.height);
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [enabled]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: overlayRef,
+      className: "absolute inset-0 z-20 cursor-crosshair touch-none",
+      style: {
+        background: backgroundImageSrc ? void 0 : "radial-gradient(circle at center, rgba(102,110,164,0.10), rgba(7,9,17,0.72))",
+        border: "1px dashed rgba(188,196,246,0.35)"
+      },
+      onPointerDown: (event) => {
+        const point = getRelativePoint(event);
+        if (!point) return;
+        drawingRef.current = true;
+        pointerIdRef.current = event.pointerId;
+        setCursor(point.normalized);
+        const existingPoints = pointsRef.current;
+        if (existingPoints.length === 0) {
+          updatePoints([point.normalized]);
+        } else {
+          updatePoints([...existingPoints, point.normalized]);
+        }
+        lastPixelPointRef.current = point.pixels;
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (ctx) {
+          stampBrush(ctx, point.pixels);
+        }
+        queueCommit();
+        event.currentTarget.setPointerCapture(event.pointerId);
+      },
+      onPointerMove: (event) => {
+        const point = getRelativePoint(event);
+        if (!point) return;
+        setCursor(point.normalized);
+        if (!drawingRef.current) return;
+        addPoint(point.normalized);
+        const lastPoint = lastPixelPointRef.current;
+        if (lastPoint) {
+          drawSegment(lastPoint, point.pixels);
+        }
+        lastPixelPointRef.current = point.pixels;
+        queueCommit();
+      },
+      onPointerUp: (event) => {
+        if (pointerIdRef.current === event.pointerId) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        drawingRef.current = false;
+        pointerIdRef.current = null;
+        lastPixelPointRef.current = null;
+      },
+      onPointerCancel: (event) => {
+        if (pointerIdRef.current === event.pointerId) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        drawingRef.current = false;
+        pointerIdRef.current = null;
+        lastPixelPointRef.current = null;
+        if (commitTimeoutRef.current) {
+          clearTimeout(commitTimeoutRef.current);
+          commitTimeoutRef.current = null;
+        }
+        updatePoints([]);
+        clearCanvas();
+      },
+      children: [
+        backgroundImageSrc && /* @__PURE__ */ jsxs5(Fragment5, { children: [
+          /* @__PURE__ */ jsx29(
+            "img",
+            {
+              src: backgroundImageSrc,
+              className: "pointer-events-none absolute inset-0 h-full w-full object-cover",
+              alt: "",
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsx29("div", { className: "pointer-events-none absolute inset-0 bg-black/50" })
+        ] }),
+        /* @__PURE__ */ jsx29("div", { className: "pointer-events-none absolute left-1/2 top-3 -translate-x-1/2 rounded-full border border-white/30 bg-black/40 px-3 py-1 text-[11px] uppercase tracking-[0.14em] text-white/80", children: "Click and drag to draw your beam path" }),
+        /* @__PURE__ */ jsx29(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "pointer-events-none absolute inset-0"
+          }
+        ),
+        cursor && /* @__PURE__ */ jsx29(
+          "div",
+          {
+            className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/70 bg-white/15",
+            style: {
+              left: `${cursor.x * 100}%`,
+              top: `${(1 - cursor.y) * 100}%`
+            }
+          }
         )
       ]
     }
@@ -5583,6 +6006,7 @@ export {
   AnimatedDrawingSVG,
   DitherPulseRing,
   DitherStream,
+  DitherStreamPathDrawer,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
   EFECTO_ASCII_POST_PROCESSING_DEFAULTS,
   Efecto,

package/package.json

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