@toriistudio/shader-ui 0.0.5 → 0.0.6

package/dist/index.d.mts

@@ -224,4 +224,14 @@ declare const WANDY_HAND_DEFAULTS: {
 };
 declare function WandyHand({ text, fontUrl, fontSize, durationMs, strokeWidth, penOpacity, strokeColor, lineCap, lineJoin, samplesPerCurve, strokeMode, canvasPadding, backgroundColor, imperfectionsEnabled, size, animate, onDrawn, }: WandyHandProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedDrawingSVG, 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, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
+type RippleWaveProps = {
+    width?: string | number;
+    height?: string | number;
+    intensity?: number;
+    zoom?: number;
+    speed?: number;
+    hexColors?: string[];
+};
+declare function RippleWave({ width, height, intensity, zoom, speed, hexColors, }: RippleWaveProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDrawingSVG, 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

@@ -224,4 +224,14 @@ declare const WANDY_HAND_DEFAULTS: {
 };
 declare function WandyHand({ text, fontUrl, fontSize, durationMs, strokeWidth, penOpacity, strokeColor, lineCap, lineJoin, samplesPerCurve, strokeMode, canvasPadding, backgroundColor, imperfectionsEnabled, size, animate, onDrawn, }: WandyHandProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedDrawingSVG, 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, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
+type RippleWaveProps = {
+    width?: string | number;
+    height?: string | number;
+    intensity?: number;
+    zoom?: number;
+    speed?: number;
+    hexColors?: string[];
+};
+declare function RippleWave({ width, height, intensity, zoom, speed, hexColors, }: RippleWaveProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDrawingSVG, 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

@@ -37,6 +37,7 @@ __export(src_exports, {
   FractalFlower: () => FractalFlower,
   MenuGlitch: () => MenuGlitch,
   OranoParticles: () => OranoParticles,
+  RippleWave: () => RippleWave,
   ShaderArt: () => ShaderArt,
   Snow: () => Snow,
   WANDY_HAND_DEFAULTS: () => WANDY_HAND_DEFAULTS,
@@ -3138,7 +3139,7 @@ var WANDY_HAND_DEFAULTS = {
   animate: true
 };
 function WandyHand({
-  text,
+  text = "",
   fontUrl,
   fontSize,
   durationMs = WANDY_HAND_DEFAULTS.durationMs,
@@ -3236,7 +3237,8 @@ function WandyHand({
   }, [resolvedFontUrl]);
   const prepared = (0, import_react9.useMemo)(() => {
     if (!font) return null;
-    const safe = text.trim().length ? text : " ";
+    const safeText = typeof text === "string" ? text : "";
+    const safe = safeText.trim().length ? safeText : " ";
     return prepareText(font, safe, resolvedFontSize, resolvedSamplesPerCurve);
   }, [font, text, resolvedFontSize, resolvedSamplesPerCurve]);
   const aspectRatio = (0, import_react9.useMemo)(() => {
@@ -3247,7 +3249,8 @@ function WandyHand({
   }, [prepared]);
   const strokePlan = (0, import_react9.useMemo)(() => {
     if (!prepared) return null;
-    const safe = text.trim().length ? text : " ";
+    const safeText = typeof text === "string" ? text : "";
+    const safe = safeText.trim().length ? safeText : " ";
     return createStrokePlan(
       prepared.contours,
       prepared.totalLen,
@@ -3469,6 +3472,286 @@ function WandyHand({
     }
   );
 }
+
+// src/components/RippleWave.tsx
+var import_react11 = require("react");
+var THREE9 = __toESM(require("three"));
+
+// src/components/ShaderPass.tsx
+var import_react10 = require("react");
+var THREE8 = __toESM(require("three"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var buildQuadGeometry = () => {
+  const geom = new THREE8.BufferGeometry();
+  const positions = new Float32Array([
+    -1,
+    -1,
+    0,
+    1,
+    -1,
+    0,
+    1,
+    1,
+    0,
+    -1,
+    -1,
+    0,
+    1,
+    1,
+    0,
+    -1,
+    1,
+    0
+  ]);
+  const uvs = new Float32Array([
+    0,
+    0,
+    1,
+    0,
+    1,
+    1,
+    0,
+    0,
+    1,
+    1,
+    0,
+    1
+  ]);
+  geom.setAttribute("position", new THREE8.BufferAttribute(positions, 3));
+  geom.setAttribute("uv", new THREE8.BufferAttribute(uvs, 2));
+  return geom;
+};
+function ShaderPass({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  inputUniform = "uTexture",
+  inputTexture = null,
+  target = null,
+  clear = true,
+  clearColor = 0,
+  blending = THREE8.NoBlending,
+  transparent = false,
+  enabled = true,
+  timeUniform,
+  resolutionUniform,
+  hexColors,
+  priority: _priority,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const assetsRef = (0, import_react10.useRef)(null);
+  void _priority;
+  const mixedPaletteColor = (0, import_react10.useMemo)(() => {
+    if (!hexColors?.length) return null;
+    const mixed = new THREE8.Color(0, 0, 0);
+    hexColors.forEach((hex) => {
+      const c = new THREE8.Color(hex);
+      mixed.r += c.r;
+      mixed.g += c.g;
+      mixed.b += c.b;
+    });
+    mixed.r /= hexColors.length;
+    mixed.g /= hexColors.length;
+    mixed.b /= hexColors.length;
+    return mixed;
+  }, [hexColors]);
+  (0, import_react10.useEffect)(() => {
+    if (!uniforms.uPaletteColor) {
+      uniforms.uPaletteColor = {
+        value: mixedPaletteColor ?? new THREE8.Color(0, 0, 0)
+      };
+    } else {
+      uniforms.uPaletteColor.value.copy(
+        mixedPaletteColor ?? new THREE8.Color(0, 0, 0)
+      );
+    }
+    if (!uniforms.uHasPalette) {
+      uniforms.uHasPalette = { value: mixedPaletteColor ? 1 : 0 };
+    } else {
+      uniforms.uHasPalette.value = mixedPaletteColor ? 1 : 0;
+    }
+    if (assetsRef.current) {
+      assetsRef.current.material.uniformsNeedUpdate = true;
+    }
+  }, [mixedPaletteColor, uniforms]);
+  const handleCreate = (0, import_react10.useCallback)(() => {
+    const scene = new THREE8.Scene();
+    const camera = new THREE8.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const geometry = buildQuadGeometry();
+    const material = new THREE8.ShaderMaterial({
+      glslVersion: THREE8.GLSL3,
+      vertexShader,
+      fragmentShader,
+      uniforms,
+      blending,
+      transparent,
+      depthTest: false,
+      depthWrite: false
+    });
+    const mesh = new THREE8.Mesh(geometry, material);
+    mesh.frustumCulled = false;
+    scene.add(mesh);
+    assetsRef.current = { scene, camera, mesh, geometry, material };
+    return () => {
+      scene.remove(mesh);
+      geometry.dispose();
+      material.dispose();
+      assetsRef.current = null;
+    };
+  }, [blending, fragmentShader, transparent, uniforms, vertexShader]);
+  const handleRender = (0, import_react10.useCallback)(
+    (context, delta) => {
+      if (!enabled) return;
+      const assets = assetsRef.current;
+      if (!assets) return;
+      if (timeUniform && uniforms[timeUniform]) {
+        uniforms[timeUniform].value = (uniforms[timeUniform].value ?? 0) + delta;
+      }
+      if (resolutionUniform && uniforms[resolutionUniform]) {
+        const v = uniforms[resolutionUniform].value;
+        if (v?.set) v.set(context.size.width, context.size.height);
+      }
+      const prevTarget = context.renderer.getRenderTarget();
+      const prevAutoClear = context.renderer.autoClear;
+      context.renderer.autoClear = false;
+      if (target) context.renderer.setRenderTarget(target);
+      else context.renderer.setRenderTarget(null);
+      if (clear) {
+        const prevClear = context.renderer.getClearColor(new THREE8.Color());
+        const prevAlpha = context.renderer.getClearAlpha();
+        context.renderer.setClearColor(new THREE8.Color(clearColor), 1);
+        context.renderer.clear(true, true, true);
+        context.renderer.setClearColor(prevClear, prevAlpha);
+      }
+      context.renderer.render(assets.scene, assets.camera);
+      context.renderer.setRenderTarget(prevTarget);
+      context.renderer.autoClear = prevAutoClear;
+    },
+    [clear, clearColor, enabled, resolutionUniform, target, timeUniform, uniforms]
+  );
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender,
+    manualRender: true
+  });
+  (0, import_react10.useEffect)(() => {
+    if (!inputTexture) return;
+    const u = uniforms?.[inputUniform];
+    if (u) u.value = inputTexture;
+  }, [inputTexture, inputUniform, uniforms]);
+  (0, import_react10.useEffect)(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    assets.material.vertexShader = vertexShader;
+    assets.material.fragmentShader = fragmentShader;
+    assets.material.uniforms = uniforms;
+    assets.material.needsUpdate = true;
+  }, [fragmentShader, uniforms, vertexShader]);
+  (0, import_react10.useEffect)(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    assets.material.blending = blending;
+    assets.material.transparent = transparent;
+    assets.material.needsUpdate = true;
+  }, [blending, transparent]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/shaders/ripple-wave/fragment.glsl
+var fragment_default8 = "precision highp float;\n\nin vec2 vUv;\nout vec4 FragColor;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uIntensity;\nuniform float uZoom;\nuniform float uSpeed;\nuniform vec3 uPaletteA;\nuniform vec3 uPaletteB;\nuniform int uHasPalette;\n\nvoid main() {\n  vec2 uv = vUv - 0.5;\n  uv.x *= uResolution.x / max(uResolution.y, 1.0);\n  uv *= uZoom;\n\n  float t = uTime * uSpeed;\n  float rings = sin(length(uv) * 8.0 - t * 1.5);\n  float waves = sin((uv.x + uv.y) * 6.0 + t * 0.9);\n  float glow = smoothstep(0.0, 1.0, rings * 0.5 + 0.5);\n\n  vec3 base = mix(vec3(0.05, 0.1, 0.2), vec3(0.35, 0.8, 0.9), glow);\n  if (uHasPalette == 1) {\n    base = mix(uPaletteA, uPaletteB, glow);\n  }\n  vec3 color = base + waves * 0.12;\n  color *= uIntensity;\n\n  FragColor = vec4(color, 1.0);\n}\n";
+
+// src/shaders/ripple-wave/vertex.glsl
+var vertex_default7 = "out vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/components/RippleWave.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RippleWave({
+  width,
+  height,
+  intensity = 0.85,
+  zoom = 1.2,
+  speed = 0.9,
+  hexColors
+}) {
+  const uniforms = (0, import_react11.useMemo)(
+    () => ({
+      uTime: { value: 0 },
+      uResolution: { value: new THREE9.Vector2() },
+      uIntensity: { value: intensity },
+      uZoom: { value: zoom },
+      uSpeed: { value: speed },
+      uPaletteA: { value: new THREE9.Color(0, 0, 0) },
+      uPaletteB: { value: new THREE9.Color(0, 0, 0) },
+      uHasPalette: { value: 0 }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uIntensity.value = intensity;
+  uniforms.uZoom.value = zoom;
+  uniforms.uSpeed.value = speed;
+  const mixedPalette = (0, import_react11.useMemo)(() => {
+    if (!hexColors?.length) return null;
+    const midpoint = Math.ceil(hexColors.length / 2);
+    const firstHalf = hexColors.slice(0, midpoint);
+    const secondHalf = hexColors.slice(midpoint);
+    const average = (colors) => {
+      if (!colors.length) return new THREE9.Color(0, 0, 0);
+      const mixed = new THREE9.Color(0, 0, 0);
+      colors.forEach((hex) => {
+        const c = new THREE9.Color(hex);
+        mixed.r += c.r;
+        mixed.g += c.g;
+        mixed.b += c.b;
+      });
+      mixed.r /= colors.length;
+      mixed.g /= colors.length;
+      mixed.b /= colors.length;
+      return mixed;
+    };
+    return {
+      a: average(firstHalf),
+      b: average(secondHalf.length ? secondHalf : firstHalf)
+    };
+  }, [hexColors]);
+  if (mixedPalette) {
+    uniforms.uPaletteA.value.copy(mixedPalette.a);
+    uniforms.uPaletteB.value.copy(mixedPalette.b);
+    uniforms.uHasPalette.value = 1;
+  } else {
+    uniforms.uHasPalette.value = 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ShaderPass,
+    {
+      vertexShader: vertex_default7,
+      fragmentShader: fragment_default8,
+      uniforms,
+      clearColor: 396052,
+      timeUniform: "uTime",
+      resolutionUniform: "uResolution",
+      priority: 1,
+      width,
+      height
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedDrawingSVG,
@@ -3478,6 +3761,7 @@ function WandyHand({
   FractalFlower,
   MenuGlitch,
   OranoParticles,
+  RippleWave,
   ShaderArt,
   Snow,
   WANDY_HAND_DEFAULTS,

package/dist/index.mjs

@@ -3113,7 +3113,7 @@ var WANDY_HAND_DEFAULTS = {
   animate: true
 };
 function WandyHand({
-  text,
+  text = "",
   fontUrl,
   fontSize,
   durationMs = WANDY_HAND_DEFAULTS.durationMs,
@@ -3211,7 +3211,8 @@ function WandyHand({
   }, [resolvedFontUrl]);
   const prepared = useMemo4(() => {
     if (!font) return null;
-    const safe = text.trim().length ? text : " ";
+    const safeText = typeof text === "string" ? text : "";
+    const safe = safeText.trim().length ? safeText : " ";
     return prepareText(font, safe, resolvedFontSize, resolvedSamplesPerCurve);
   }, [font, text, resolvedFontSize, resolvedSamplesPerCurve]);
   const aspectRatio = useMemo4(() => {
@@ -3222,7 +3223,8 @@ function WandyHand({
   }, [prepared]);
   const strokePlan = useMemo4(() => {
     if (!prepared) return null;
-    const safe = text.trim().length ? text : " ";
+    const safeText = typeof text === "string" ? text : "";
+    const safe = safeText.trim().length ? safeText : " ";
     return createStrokePlan(
       prepared.contours,
       prepared.totalLen,
@@ -3444,6 +3446,286 @@ function WandyHand({
     }
   );
 }
+
+// src/components/RippleWave.tsx
+import { useMemo as useMemo6 } from "react";
+import * as THREE9 from "three";
+
+// src/components/ShaderPass.tsx
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo5, useRef as useRef10 } from "react";
+import * as THREE8 from "three";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var buildQuadGeometry = () => {
+  const geom = new THREE8.BufferGeometry();
+  const positions = new Float32Array([
+    -1,
+    -1,
+    0,
+    1,
+    -1,
+    0,
+    1,
+    1,
+    0,
+    -1,
+    -1,
+    0,
+    1,
+    1,
+    0,
+    -1,
+    1,
+    0
+  ]);
+  const uvs = new Float32Array([
+    0,
+    0,
+    1,
+    0,
+    1,
+    1,
+    0,
+    0,
+    1,
+    1,
+    0,
+    1
+  ]);
+  geom.setAttribute("position", new THREE8.BufferAttribute(positions, 3));
+  geom.setAttribute("uv", new THREE8.BufferAttribute(uvs, 2));
+  return geom;
+};
+function ShaderPass({
+  vertexShader,
+  fragmentShader,
+  uniforms,
+  inputUniform = "uTexture",
+  inputTexture = null,
+  target = null,
+  clear = true,
+  clearColor = 0,
+  blending = THREE8.NoBlending,
+  transparent = false,
+  enabled = true,
+  timeUniform,
+  resolutionUniform,
+  hexColors,
+  priority: _priority,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const assetsRef = useRef10(null);
+  void _priority;
+  const mixedPaletteColor = useMemo5(() => {
+    if (!hexColors?.length) return null;
+    const mixed = new THREE8.Color(0, 0, 0);
+    hexColors.forEach((hex) => {
+      const c = new THREE8.Color(hex);
+      mixed.r += c.r;
+      mixed.g += c.g;
+      mixed.b += c.b;
+    });
+    mixed.r /= hexColors.length;
+    mixed.g /= hexColors.length;
+    mixed.b /= hexColors.length;
+    return mixed;
+  }, [hexColors]);
+  useEffect10(() => {
+    if (!uniforms.uPaletteColor) {
+      uniforms.uPaletteColor = {
+        value: mixedPaletteColor ?? new THREE8.Color(0, 0, 0)
+      };
+    } else {
+      uniforms.uPaletteColor.value.copy(
+        mixedPaletteColor ?? new THREE8.Color(0, 0, 0)
+      );
+    }
+    if (!uniforms.uHasPalette) {
+      uniforms.uHasPalette = { value: mixedPaletteColor ? 1 : 0 };
+    } else {
+      uniforms.uHasPalette.value = mixedPaletteColor ? 1 : 0;
+    }
+    if (assetsRef.current) {
+      assetsRef.current.material.uniformsNeedUpdate = true;
+    }
+  }, [mixedPaletteColor, uniforms]);
+  const handleCreate = useCallback7(() => {
+    const scene = new THREE8.Scene();
+    const camera = new THREE8.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const geometry = buildQuadGeometry();
+    const material = new THREE8.ShaderMaterial({
+      glslVersion: THREE8.GLSL3,
+      vertexShader,
+      fragmentShader,
+      uniforms,
+      blending,
+      transparent,
+      depthTest: false,
+      depthWrite: false
+    });
+    const mesh = new THREE8.Mesh(geometry, material);
+    mesh.frustumCulled = false;
+    scene.add(mesh);
+    assetsRef.current = { scene, camera, mesh, geometry, material };
+    return () => {
+      scene.remove(mesh);
+      geometry.dispose();
+      material.dispose();
+      assetsRef.current = null;
+    };
+  }, [blending, fragmentShader, transparent, uniforms, vertexShader]);
+  const handleRender = useCallback7(
+    (context, delta) => {
+      if (!enabled) return;
+      const assets = assetsRef.current;
+      if (!assets) return;
+      if (timeUniform && uniforms[timeUniform]) {
+        uniforms[timeUniform].value = (uniforms[timeUniform].value ?? 0) + delta;
+      }
+      if (resolutionUniform && uniforms[resolutionUniform]) {
+        const v = uniforms[resolutionUniform].value;
+        if (v?.set) v.set(context.size.width, context.size.height);
+      }
+      const prevTarget = context.renderer.getRenderTarget();
+      const prevAutoClear = context.renderer.autoClear;
+      context.renderer.autoClear = false;
+      if (target) context.renderer.setRenderTarget(target);
+      else context.renderer.setRenderTarget(null);
+      if (clear) {
+        const prevClear = context.renderer.getClearColor(new THREE8.Color());
+        const prevAlpha = context.renderer.getClearAlpha();
+        context.renderer.setClearColor(new THREE8.Color(clearColor), 1);
+        context.renderer.clear(true, true, true);
+        context.renderer.setClearColor(prevClear, prevAlpha);
+      }
+      context.renderer.render(assets.scene, assets.camera);
+      context.renderer.setRenderTarget(prevTarget);
+      context.renderer.autoClear = prevAutoClear;
+    },
+    [clear, clearColor, enabled, resolutionUniform, target, timeUniform, uniforms]
+  );
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender,
+    manualRender: true
+  });
+  useEffect10(() => {
+    if (!inputTexture) return;
+    const u = uniforms?.[inputUniform];
+    if (u) u.value = inputTexture;
+  }, [inputTexture, inputUniform, uniforms]);
+  useEffect10(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    assets.material.vertexShader = vertexShader;
+    assets.material.fragmentShader = fragmentShader;
+    assets.material.uniforms = uniforms;
+    assets.material.needsUpdate = true;
+  }, [fragmentShader, uniforms, vertexShader]);
+  useEffect10(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    assets.material.blending = blending;
+    assets.material.transparent = transparent;
+    assets.material.needsUpdate = true;
+  }, [blending, transparent]);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/shaders/ripple-wave/fragment.glsl
+var fragment_default8 = "precision highp float;\n\nin vec2 vUv;\nout vec4 FragColor;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uIntensity;\nuniform float uZoom;\nuniform float uSpeed;\nuniform vec3 uPaletteA;\nuniform vec3 uPaletteB;\nuniform int uHasPalette;\n\nvoid main() {\n  vec2 uv = vUv - 0.5;\n  uv.x *= uResolution.x / max(uResolution.y, 1.0);\n  uv *= uZoom;\n\n  float t = uTime * uSpeed;\n  float rings = sin(length(uv) * 8.0 - t * 1.5);\n  float waves = sin((uv.x + uv.y) * 6.0 + t * 0.9);\n  float glow = smoothstep(0.0, 1.0, rings * 0.5 + 0.5);\n\n  vec3 base = mix(vec3(0.05, 0.1, 0.2), vec3(0.35, 0.8, 0.9), glow);\n  if (uHasPalette == 1) {\n    base = mix(uPaletteA, uPaletteB, glow);\n  }\n  vec3 color = base + waves * 0.12;\n  color *= uIntensity;\n\n  FragColor = vec4(color, 1.0);\n}\n";
+
+// src/shaders/ripple-wave/vertex.glsl
+var vertex_default7 = "out vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
+
+// src/components/RippleWave.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function RippleWave({
+  width,
+  height,
+  intensity = 0.85,
+  zoom = 1.2,
+  speed = 0.9,
+  hexColors
+}) {
+  const uniforms = useMemo6(
+    () => ({
+      uTime: { value: 0 },
+      uResolution: { value: new THREE9.Vector2() },
+      uIntensity: { value: intensity },
+      uZoom: { value: zoom },
+      uSpeed: { value: speed },
+      uPaletteA: { value: new THREE9.Color(0, 0, 0) },
+      uPaletteB: { value: new THREE9.Color(0, 0, 0) },
+      uHasPalette: { value: 0 }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uIntensity.value = intensity;
+  uniforms.uZoom.value = zoom;
+  uniforms.uSpeed.value = speed;
+  const mixedPalette = useMemo6(() => {
+    if (!hexColors?.length) return null;
+    const midpoint = Math.ceil(hexColors.length / 2);
+    const firstHalf = hexColors.slice(0, midpoint);
+    const secondHalf = hexColors.slice(midpoint);
+    const average = (colors) => {
+      if (!colors.length) return new THREE9.Color(0, 0, 0);
+      const mixed = new THREE9.Color(0, 0, 0);
+      colors.forEach((hex) => {
+        const c = new THREE9.Color(hex);
+        mixed.r += c.r;
+        mixed.g += c.g;
+        mixed.b += c.b;
+      });
+      mixed.r /= colors.length;
+      mixed.g /= colors.length;
+      mixed.b /= colors.length;
+      return mixed;
+    };
+    return {
+      a: average(firstHalf),
+      b: average(secondHalf.length ? secondHalf : firstHalf)
+    };
+  }, [hexColors]);
+  if (mixedPalette) {
+    uniforms.uPaletteA.value.copy(mixedPalette.a);
+    uniforms.uPaletteB.value.copy(mixedPalette.b);
+    uniforms.uHasPalette.value = 1;
+  } else {
+    uniforms.uHasPalette.value = 0;
+  }
+  return /* @__PURE__ */ jsx12(
+    ShaderPass,
+    {
+      vertexShader: vertex_default7,
+      fragmentShader: fragment_default8,
+      uniforms,
+      clearColor: 396052,
+      timeUniform: "uTime",
+      resolutionUniform: "uResolution",
+      priority: 1,
+      width,
+      height
+    }
+  );
+}
 export {
   AnimatedDrawingSVG,
   EFECTO_ASCII_COMPONENT_DEFAULTS,
@@ -3452,6 +3734,7 @@ export {
   FractalFlower,
   MenuGlitch,
   OranoParticles,
+  RippleWave,
   ShaderArt,
   Snow,
   WANDY_HAND_DEFAULTS,

package/package.json

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