@fjandin/react-shader 0.0.16 → 0.0.17

package/dist/index.cjs

@@ -31,11 +31,16 @@ var exports_src = {};
 __export(exports_src, {
   useAudio: () => useAudio,
   generateUtilsFunction: () => generateUtilsFunction,
+  generateSimplexNoiseFunctionGpu: () => generateSimplexNoiseFunctionGpu,
   generateSimplexNoiseFunction: () => generateSimplexNoiseFunction,
+  generateSceneCirclesFunctionGpu: () => generateSceneCirclesFunctionGpu,
   generateSceneCirclesFunction: () => generateSceneCirclesFunction,
+  generateDistortionRippleFunctionGpu: () => generateDistortionRippleFunctionGpu,
   generateDistortionRippleFunction: () => generateDistortionRippleFunction,
+  generateColorPaletteFunctionGpu: () => generateColorPaletteFunctionGpu,
   generateColorPaletteFunction: () => generateColorPaletteFunction,
-  ReactShader: () => ReactShader
+  ReactShader: () => ReactShader,
+  ReactGpuShader: () => ReactGpuShader
 });
 module.exports = __toCommonJS(exports_src);
 
@@ -247,11 +252,525 @@ function useAudio(options = {}) {
     isRunning
   };
 }
-// src/ReactShader.tsx
+// src/ReactGpuShader.tsx
 var import_react3 = require("react");
 
-// src/hooks/useWebGL.ts
+// src/hooks/useWebGPU.ts
 var import_react2 = require("react");
+function isVec2(value) {
+  return Array.isArray(value) && value.length === 2 && typeof value[0] === "number";
+}
+function isVec3(value) {
+  return Array.isArray(value) && value.length === 3 && typeof value[0] === "number";
+}
+function isVec4(value) {
+  return Array.isArray(value) && value.length === 4 && typeof value[0] === "number";
+}
+function isVec4Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 4;
+}
+function inferWgslType(value) {
+  if (typeof value === "number") {
+    return { wgslType: "f32", baseType: "f32", isArray: false, arrayLength: 0 };
+  }
+  if (isVec4Array(value)) {
+    return {
+      wgslType: `array<vec4f, ${value.length}>`,
+      baseType: "vec4f",
+      isArray: true,
+      arrayLength: value.length
+    };
+  }
+  if (isVec4(value)) {
+    return { wgslType: "vec4f", baseType: "vec4f", isArray: false, arrayLength: 0 };
+  }
+  if (isVec3(value)) {
+    return { wgslType: "vec3f", baseType: "vec3f", isArray: false, arrayLength: 0 };
+  }
+  if (isVec2(value)) {
+    return { wgslType: "vec2f", baseType: "vec2f", isArray: false, arrayLength: 0 };
+  }
+  throw new Error(`Unsupported uniform value type: ${typeof value}`);
+}
+function getTypeAlignment(type) {
+  switch (type) {
+    case "f32":
+      return 4;
+    case "vec2f":
+      return 8;
+    case "vec3f":
+    case "vec4f":
+      return 16;
+  }
+}
+function getTypeSize(type) {
+  switch (type) {
+    case "f32":
+      return 4;
+    case "vec2f":
+      return 8;
+    case "vec3f":
+      return 12;
+    case "vec4f":
+      return 16;
+  }
+}
+var UNIFORM_ARRAY_STRIDE = 16;
+var DEFAULT_UNIFORMS = [
+  { name: "iTime", baseType: "f32" },
+  { name: "iMouseLeftDown", baseType: "f32" },
+  { name: "iResolution", baseType: "vec2f" },
+  { name: "iMouse", baseType: "vec2f" },
+  { name: "iMouseNormalized", baseType: "vec2f" }
+];
+function calculateUniformLayout(customUniforms) {
+  const fields = [];
+  let offset = 0;
+  const addField = (name, baseType) => {
+    const alignment = getTypeAlignment(baseType);
+    const size = getTypeSize(baseType);
+    offset = Math.ceil(offset / alignment) * alignment;
+    fields.push({ name, type: baseType, offset, size, isArray: false });
+    offset += size;
+  };
+  const addArrayField = (name, baseType, arrayLength) => {
+    offset = Math.ceil(offset / 16) * 16;
+    const totalSize = arrayLength * UNIFORM_ARRAY_STRIDE;
+    fields.push({
+      name,
+      type: `array<${baseType}, ${arrayLength}>`,
+      offset,
+      size: totalSize,
+      isArray: true,
+      arrayLength,
+      elementStride: UNIFORM_ARRAY_STRIDE
+    });
+    offset += totalSize;
+  };
+  for (const u of DEFAULT_UNIFORMS) {
+    addField(u.name, u.baseType);
+  }
+  if (customUniforms) {
+    const scalarEntries = [];
+    const arrayEntries = [];
+    for (const [name, value] of Object.entries(customUniforms)) {
+      const inferred = inferWgslType(value);
+      if (inferred.isArray) {
+        arrayEntries.push({ name, inferred });
+      } else {
+        scalarEntries.push({ name, inferred });
+      }
+    }
+    for (const { name } of arrayEntries) {
+      scalarEntries.push({
+        name: `${name}_count`,
+        inferred: { wgslType: "f32", baseType: "f32", isArray: false, arrayLength: 0 }
+      });
+    }
+    scalarEntries.sort((a, b) => getTypeAlignment(b.inferred.baseType) - getTypeAlignment(a.inferred.baseType));
+    for (const { name, inferred } of scalarEntries) {
+      addField(name, inferred.baseType);
+    }
+    for (const { name, inferred } of arrayEntries) {
+      addArrayField(name, inferred.baseType, inferred.arrayLength);
+    }
+  }
+  const bufferSize = Math.ceil(offset / 16) * 16;
+  return { fields, bufferSize };
+}
+function generateUniformStruct(layout) {
+  const members = layout.fields.map((f) => `  ${f.name}: ${f.type},`).join(`
+`);
+  return `struct Uniforms {
+${members}
+}`;
+}
+function packUniformValue(field, value, floatData) {
+  const floatOffset = field.offset / 4;
+  if (field.isArray && field.elementStride && field.arrayLength) {
+    const stride = field.elementStride / 4;
+    const maxLen = field.arrayLength;
+    if (isVec4Array(value)) {
+      for (let i = 0;i < value.length && i < maxLen; i++) {
+        const elemOffset = floatOffset + i * stride;
+        floatData[elemOffset] = value[i][0];
+        floatData[elemOffset + 1] = value[i][1];
+        floatData[elemOffset + 2] = value[i][2];
+        floatData[elemOffset + 3] = value[i][3];
+      }
+    }
+  } else if (typeof value === "number") {
+    floatData[floatOffset] = value;
+  } else if (Array.isArray(value) && typeof value[0] === "number") {
+    for (let i = 0;i < value.length; i++) {
+      floatData[floatOffset + i] = value[i];
+    }
+  }
+}
+var VERTEX_SHADER = `
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+  // Full-screen triangle (covers clip space with a single triangle)
+  var pos = array<vec2f, 3>(
+    vec2f(-1.0, -1.0),
+    vec2f(3.0, -1.0),
+    vec2f(-1.0, 3.0)
+  );
+
+  var output: VertexOutput;
+  output.position = vec4f(pos[vertexIndex], 0.0, 1.0);
+  // UV coordinates: (0,0) at bottom-left, (1,1) at top-right
+  output.uv = (pos[vertexIndex] + 1.0) * 0.5;
+  return output;
+}
+`;
+function createFragmentShader(userCode, layout) {
+  return `
+${generateUniformStruct(layout)}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+${userCode}
+
+@fragment
+fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let fragCoord = uv * uniforms.iResolution;
+  let correctedUv = ((uv * uniforms.iResolution) - 0.5 * uniforms.iResolution) / uniforms.iResolution.y;
+
+  return mainImage(correctedUv);
+}
+`;
+}
+async function initializeWebGPU(canvas, fragmentSource, customUniforms) {
+  if (!navigator.gpu) {
+    throw new Error("WebGPU not supported in this browser");
+  }
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    throw new Error("Failed to get WebGPU adapter");
+  }
+  const device = await adapter.requestDevice();
+  const context = canvas.getContext("webgpu");
+  if (!context) {
+    throw new Error("Failed to get WebGPU context");
+  }
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  context.configure({
+    device,
+    format,
+    alphaMode: "premultiplied"
+  });
+  const uniformLayout = calculateUniformLayout(customUniforms);
+  const vertexModule = device.createShaderModule({
+    label: "vertex shader",
+    code: VERTEX_SHADER
+  });
+  const fragmentModule = device.createShaderModule({
+    label: "fragment shader",
+    code: createFragmentShader(fragmentSource, uniformLayout)
+  });
+  const uniformBuffer = device.createBuffer({
+    label: "uniforms",
+    size: uniformLayout.bufferSize,
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+  });
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.FRAGMENT,
+        buffer: { type: "uniform" }
+      }
+    ]
+  });
+  const uniformBindGroup = device.createBindGroup({
+    layout: bindGroupLayout,
+    entries: [
+      {
+        binding: 0,
+        resource: { buffer: uniformBuffer }
+      }
+    ]
+  });
+  const pipelineLayout = device.createPipelineLayout({
+    bindGroupLayouts: [bindGroupLayout]
+  });
+  const pipeline = device.createRenderPipeline({
+    label: "render pipeline",
+    layout: pipelineLayout,
+    vertex: {
+      module: vertexModule,
+      entryPoint: "main"
+    },
+    fragment: {
+      module: fragmentModule,
+      entryPoint: "main",
+      targets: [{ format }]
+    }
+  });
+  return {
+    device,
+    context,
+    pipeline,
+    uniformBuffer,
+    uniformBindGroup,
+    uniformLayout
+  };
+}
+function cleanupWebGPU(state) {
+  state.uniformBuffer.destroy();
+  state.device.destroy();
+}
+function useWebGPU(options) {
+  const canvasRef = import_react2.useRef(null);
+  const stateRef = import_react2.useRef(null);
+  const animationFrameRef = import_react2.useRef(0);
+  const elapsedTimeRef = import_react2.useRef(0);
+  const lastFrameTimeRef = import_react2.useRef(0);
+  const mouseRef = import_react2.useRef([0, 0]);
+  const mouseNormalizedRef = import_react2.useRef([0, 0]);
+  const mouseLeftDownRef = import_react2.useRef(false);
+  const canvasRectRef = import_react2.useRef(null);
+  const onErrorRef = import_react2.useRef(options.onError);
+  const fragmentRef = import_react2.useRef(options.fragment);
+  const uniformsRef = import_react2.useRef(options.uniforms);
+  const dprRef = import_react2.useRef(window.devicePixelRatio || 1);
+  onErrorRef.current = options.onError;
+  fragmentRef.current = options.fragment;
+  uniformsRef.current = options.uniforms;
+  const render = import_react2.useCallback((time) => {
+    const state = stateRef.current;
+    const canvas = canvasRef.current;
+    if (!state || !canvas) {
+      return;
+    }
+    const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
+    lastFrameTimeRef.current = time;
+    elapsedTimeRef.current += deltaTime;
+    const { device, context, pipeline, uniformBuffer, uniformBindGroup, uniformLayout } = state;
+    const dpr = dprRef.current;
+    const displayWidth = canvas.clientWidth;
+    const displayHeight = canvas.clientHeight;
+    if (displayWidth === 0 || displayHeight === 0) {
+      animationFrameRef.current = requestAnimationFrame(render);
+      return;
+    }
+    const bufferWidth = Math.round(displayWidth * dpr);
+    const bufferHeight = Math.round(displayHeight * dpr);
+    if (canvas.width !== bufferWidth || canvas.height !== bufferHeight) {
+      canvas.width = bufferWidth;
+      canvas.height = bufferHeight;
+    }
+    const defaultValues = {
+      iTime: elapsedTimeRef.current,
+      iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
+      iResolution: [canvas.width, canvas.height],
+      iMouse: mouseRef.current,
+      iMouseNormalized: mouseNormalizedRef.current
+    };
+    const allValues = { ...defaultValues, ...uniformsRef.current };
+    if (uniformsRef.current) {
+      for (const [name, value] of Object.entries(uniformsRef.current)) {
+        if (isVec4Array(value)) {
+          allValues[`${name}_count`] = value.length;
+        }
+      }
+    }
+    const uniformData = new Float32Array(uniformLayout.bufferSize / 4);
+    for (const field of uniformLayout.fields) {
+      const value = allValues[field.name];
+      if (value === undefined) {
+        continue;
+      }
+      packUniformValue(field, value, uniformData);
+    }
+    device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+    const commandEncoder = device.createCommandEncoder();
+    const textureView = context.getCurrentTexture().createView();
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: textureView,
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
+    renderPass.setPipeline(pipeline);
+    renderPass.setBindGroup(0, uniformBindGroup);
+    renderPass.draw(3);
+    renderPass.end();
+    device.queue.submit([commandEncoder.finish()]);
+    animationFrameRef.current = requestAnimationFrame(render);
+  }, []);
+  import_react2.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    let mounted = true;
+    const initialize = async () => {
+      try {
+        const state = await initializeWebGPU(canvas, fragmentRef.current, uniformsRef.current);
+        if (!mounted) {
+          cleanupWebGPU(state);
+          return;
+        }
+        stateRef.current = state;
+        elapsedTimeRef.current = 0;
+        lastFrameTimeRef.current = 0;
+        animationFrameRef.current = requestAnimationFrame(render);
+      } catch (err) {
+        if (!mounted)
+          return;
+        const error = err instanceof Error ? err : new Error(String(err));
+        if (onErrorRef.current) {
+          onErrorRef.current(error);
+        } else {
+          console.error("WebGPU initialization failed:", error);
+        }
+      }
+    };
+    const dprMediaQuery = window.matchMedia(`(resolution: ${dprRef.current}dppx)`);
+    const handleDprChange = () => {
+      dprRef.current = window.devicePixelRatio || 1;
+    };
+    dprMediaQuery.addEventListener("change", handleDprChange);
+    initialize();
+    return () => {
+      mounted = false;
+      dprMediaQuery.removeEventListener("change", handleDprChange);
+      cancelAnimationFrame(animationFrameRef.current);
+      if (stateRef.current) {
+        cleanupWebGPU(stateRef.current);
+        stateRef.current = null;
+      }
+    };
+  }, [render]);
+  import_react2.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const updateRect = () => {
+      canvasRectRef.current = canvas.getBoundingClientRect();
+    };
+    updateRect();
+    const resizeObserver = new ResizeObserver(updateRect);
+    resizeObserver.observe(canvas);
+    window.addEventListener("scroll", updateRect, { passive: true });
+    const handleMouseMove = (event) => {
+      const rect = canvasRectRef.current;
+      if (!rect)
+        return;
+      const dpr = dprRef.current;
+      const x = (event.clientX - rect.left) * dpr;
+      const y = (rect.height - (event.clientY - rect.top)) * dpr;
+      mouseRef.current = [x, y];
+      const minDimension = Math.min(canvas.width, canvas.height) || 1;
+      mouseNormalizedRef.current = [
+        (mouseRef.current[0] - canvas.width / 2) / minDimension,
+        (mouseRef.current[1] - canvas.height / 2) / minDimension
+      ];
+    };
+    const handleMouseDown = (event) => {
+      if (event.button === 0) {
+        mouseLeftDownRef.current = true;
+      }
+    };
+    const handleMouseUp = (event) => {
+      if (event.button === 0) {
+        mouseLeftDownRef.current = false;
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updateRect);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  return { canvasRef, mouseRef };
+}
+
+// src/ReactGpuShader.tsx
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var FULLSCREEN_CONTAINER_STYLE = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  zIndex: 9000
+};
+var DEFAULT_CONTAINER_STYLE = {
+  position: "relative",
+  width: "100%",
+  height: "100%"
+};
+var CANVAS_STYLE = {
+  display: "block",
+  width: "100%",
+  height: "100%"
+};
+function ReactGpuShader({ className, fragment, uniforms, fullscreen = false }) {
+  const [error, setError] = import_react3.useState(null);
+  const handleError = import_react3.useCallback((err) => {
+    setError(err.message);
+    console.error("ReactGpuShader error:", err);
+  }, []);
+  import_react3.useEffect(() => {
+    setError(null);
+  }, [fragment]);
+  const { canvasRef } = useWebGPU({
+    fragment,
+    uniforms,
+    onError: handleError
+  });
+  const containerStyle = import_react3.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+      className,
+      style: {
+        ...containerStyle,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#1a1a1a",
+        color: "#ff6b6b",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        padding: "16px",
+        overflow: "auto",
+        boxSizing: "border-box",
+        width: "100%",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("pre", {
+        style: { margin: 0, whiteSpace: "pre-wrap" },
+        children: error
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
+    ref: canvasRef,
+    className,
+    style: CANVAS_STYLE
+  }, undefined, false, undefined, this);
+}
+// src/ReactShader.tsx
+var import_react5 = require("react");
+
+// src/hooks/useWebGL.ts
+var import_react4 = require("react");
 
 // src/utils/shader.ts
 function compileShader(gl, type, source) {
@@ -440,13 +959,13 @@ function cleanupTextures(gl, manager) {
 
 // src/utils/uniforms.ts
 var MAX_ARRAY_LENGTH = 100;
-function isVec2(value) {
+function isVec22(value) {
   return Array.isArray(value) && value.length === 2 && typeof value[0] === "number";
 }
-function isVec3(value) {
+function isVec32(value) {
   return Array.isArray(value) && value.length === 3 && typeof value[0] === "number";
 }
-function isVec4(value) {
+function isVec42(value) {
   return Array.isArray(value) && value.length === 4 && typeof value[0] === "number";
 }
 function isFloatArray(value) {
@@ -458,11 +977,11 @@ function isVec2Array(value) {
 function isVec3Array(value) {
   return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 3;
 }
-function isVec4Array(value) {
+function isVec4Array2(value) {
   return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 4;
 }
 function isArrayUniform(value) {
-  return isFloatArray(value) || isVec2Array(value) || isVec3Array(value) || isVec4Array(value);
+  return isFloatArray(value) || isVec2Array(value) || isVec3Array(value) || isVec4Array2(value);
 }
 function setUniform(gl, location, value) {
   if (location === null) {
@@ -470,7 +989,7 @@ function setUniform(gl, location, value) {
   }
   if (typeof value === "number") {
     gl.uniform1f(location, value);
-  } else if (isVec4Array(value)) {
+  } else if (isVec4Array2(value)) {
     gl.uniform4fv(location, value.flat());
   } else if (isVec3Array(value)) {
     gl.uniform3fv(location, value.flat());
@@ -478,11 +997,11 @@ function setUniform(gl, location, value) {
     gl.uniform2fv(location, value.flat());
   } else if (isFloatArray(value)) {
     gl.uniform1fv(location, value);
-  } else if (isVec4(value)) {
+  } else if (isVec42(value)) {
     gl.uniform4f(location, value[0], value[1], value[2], value[3]);
-  } else if (isVec3(value)) {
+  } else if (isVec32(value)) {
     gl.uniform3f(location, value[0], value[1], value[2]);
-  } else if (isVec2(value)) {
+  } else if (isVec22(value)) {
     gl.uniform2f(location, value[0], value[1]);
   }
 }
@@ -526,7 +1045,7 @@ function getUniformType(value) {
   if (typeof value === "number") {
     return "float";
   }
-  if (isVec4Array(value)) {
+  if (isVec4Array2(value)) {
     return `vec4[${MAX_ARRAY_LENGTH}]`;
   }
   if (isVec3Array(value)) {
@@ -538,13 +1057,13 @@ function getUniformType(value) {
   if (isFloatArray(value)) {
     return `float[${MAX_ARRAY_LENGTH}]`;
   }
-  if (isVec4(value)) {
+  if (isVec42(value)) {
     return "vec4";
   }
-  if (isVec3(value)) {
+  if (isVec32(value)) {
     return "vec3";
   }
-  if (isVec2(value)) {
+  if (isVec22(value)) {
     return "vec2";
   }
   return "float";
@@ -616,29 +1135,29 @@ function cleanupWebGL(gl, state) {
   gl.deleteProgram(state.program);
 }
 function useWebGL(options) {
-  const canvasRef = import_react2.useRef(null);
-  const stateRef = import_react2.useRef(null);
-  const animationFrameRef = import_react2.useRef(0);
-  const elapsedTimeRef = import_react2.useRef(0);
-  const lastFrameTimeRef = import_react2.useRef(0);
-  const mouseRef = import_react2.useRef([0, 0]);
-  const mouseNormalizedRef = import_react2.useRef([0, 0]);
-  const mouseLeftDownRef = import_react2.useRef(false);
-  const canvasRectRef = import_react2.useRef(null);
-  const contextLostRef = import_react2.useRef(false);
-  const uniformsRef = import_react2.useRef(options.uniforms);
-  const onErrorRef = import_react2.useRef(options.onError);
-  const onFrameRef = import_react2.useRef(options.onFrame);
-  const onClickRef = import_react2.useRef(options.onClick);
-  const onMouseDownRef = import_react2.useRef(options.onMouseDown);
-  const onMouseUpRef = import_react2.useRef(options.onMouseUp);
-  const onMouseMoveRef = import_react2.useRef(options.onMouseMove);
-  const onMouseWheelRef = import_react2.useRef(options.onMouseWheel);
-  const timeScaleRef = import_react2.useRef(options.timeScale ?? 1);
-  const vertexRef = import_react2.useRef(options.vertex);
-  const fragmentRef = import_react2.useRef(options.fragment);
-  const dprRef = import_react2.useRef(window.devicePixelRatio || 1);
-  const defaultUniformsRef = import_react2.useRef({
+  const canvasRef = import_react4.useRef(null);
+  const stateRef = import_react4.useRef(null);
+  const animationFrameRef = import_react4.useRef(0);
+  const elapsedTimeRef = import_react4.useRef(0);
+  const lastFrameTimeRef = import_react4.useRef(0);
+  const mouseRef = import_react4.useRef([0, 0]);
+  const mouseNormalizedRef = import_react4.useRef([0, 0]);
+  const mouseLeftDownRef = import_react4.useRef(false);
+  const canvasRectRef = import_react4.useRef(null);
+  const contextLostRef = import_react4.useRef(false);
+  const uniformsRef = import_react4.useRef(options.uniforms);
+  const onErrorRef = import_react4.useRef(options.onError);
+  const onFrameRef = import_react4.useRef(options.onFrame);
+  const onClickRef = import_react4.useRef(options.onClick);
+  const onMouseDownRef = import_react4.useRef(options.onMouseDown);
+  const onMouseUpRef = import_react4.useRef(options.onMouseUp);
+  const onMouseMoveRef = import_react4.useRef(options.onMouseMove);
+  const onMouseWheelRef = import_react4.useRef(options.onMouseWheel);
+  const timeScaleRef = import_react4.useRef(options.timeScale ?? 1);
+  const vertexRef = import_react4.useRef(options.vertex);
+  const fragmentRef = import_react4.useRef(options.fragment);
+  const dprRef = import_react4.useRef(window.devicePixelRatio || 1);
+  const defaultUniformsRef = import_react4.useRef({
     iTime: 0,
     iMouse: [0, 0],
     iMouseNormalized: [0, 0],
@@ -656,7 +1175,7 @@ function useWebGL(options) {
   timeScaleRef.current = options.timeScale ?? 1;
   vertexRef.current = options.vertex;
   fragmentRef.current = options.fragment;
-  const render = import_react2.useCallback((time) => {
+  const render = import_react4.useCallback((time) => {
     if (contextLostRef.current)
       return;
     const state = stateRef.current;
@@ -708,7 +1227,7 @@ function useWebGL(options) {
     }
     animationFrameRef.current = requestAnimationFrame(render);
   }, []);
-  import_react2.useEffect(() => {
+  import_react4.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
       return;
@@ -756,7 +1275,7 @@ function useWebGL(options) {
       }
     };
   }, [render]);
-  import_react2.useEffect(() => {
+  import_react4.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
       return;
@@ -856,7 +1375,7 @@ function useWebGL(options) {
 }
 
 // src/ReactShader.tsx
-var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
 var DEFAULT_VERTEX = `#version 300 es
 precision highp float;
 in vec2 a_position;
@@ -865,7 +1384,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
 `;
-var FULLSCREEN_CONTAINER_STYLE = {
+var FULLSCREEN_CONTAINER_STYLE2 = {
   position: "fixed",
   top: 0,
   left: 0,
@@ -873,12 +1392,12 @@ var FULLSCREEN_CONTAINER_STYLE = {
   height: "100vh",
   zIndex: 9000
 };
-var DEFAULT_CONTAINER_STYLE = {
+var DEFAULT_CONTAINER_STYLE2 = {
   position: "relative",
   width: "100%",
   height: "100%"
 };
-var CANVAS_STYLE = {
+var CANVAS_STYLE2 = {
   display: "block",
   width: "100%",
   height: "100%"
@@ -897,12 +1416,12 @@ function ReactShader({
   onMouseUp,
   onMouseWheel
 }) {
-  const [error, setError] = import_react3.useState(null);
-  const handleError = import_react3.useCallback((err) => {
+  const [error, setError] = import_react5.useState(null);
+  const handleError = import_react5.useCallback((err) => {
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
-  import_react3.useEffect(() => {
+  import_react5.useEffect(() => {
     setError(null);
   }, [fragment, vertex]);
   const { canvasRef } = useWebGL({
@@ -918,9 +1437,9 @@ function ReactShader({
     onMouseWheel,
     timeScale
   });
-  const containerStyle = import_react3.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
+  const containerStyle = import_react5.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE2 : DEFAULT_CONTAINER_STYLE2, [fullscreen]);
   if (error) {
-    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
       className,
       style: {
         ...containerStyle,
@@ -937,16 +1456,16 @@ function ReactShader({
         width: "100%",
         height: "100%"
       },
-      children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("pre", {
+      children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("pre", {
         style: { margin: 0, whiteSpace: "pre-wrap" },
         children: error
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("canvas", {
     ref: canvasRef,
     className,
-    style: CANVAS_STYLE
+    style: CANVAS_STYLE2
   }, undefined, false, undefined, this);
 }
 // src/shaders/color-palette.ts
@@ -962,6 +1481,19 @@ function generateColorPaletteFunction(name, paletteString) {
         }
       `;
 }
+// src/shaders/color-palette-gpu.ts
+function generateColorPaletteFunctionGpu(name, paletteString) {
+  const paletteArray = paletteString.replace("[[", "").replace("]]", "").split("] [").map((s) => s.split(" "));
+  return `
+fn ${name}(t: f32) -> vec3f {
+  let a = vec3f(${paletteArray[0].join(", ")});
+  let b = vec3f(${paletteArray[1].join(", ")});
+  let c = vec3f(${paletteArray[2].join(", ")});
+  let d = vec3f(${paletteArray[3].join(", ")});
+  return a + b * cos(6.28318 * (c * t + d));
+}
+`;
+}
 // src/shaders/distortion-ripple.ts
 function generateDistortionRippleFunction() {
   return `
@@ -985,6 +1517,29 @@ function generateDistortionRippleFunction() {
       }
     `;
 }
+// src/shaders/distortion-ripple-gpu.ts
+function generateDistortionRippleFunctionGpu() {
+  return `
+fn DistortionRipple(uv: vec2f, center: vec2f, radius: f32, intensity: f32, thickness: f32) -> vec2f {
+  // 1. Calculate vector and distance from center
+  let dir = uv - center;
+  let dist = length(dir);
+
+  // 2. Create a mask so the ripple only exists near the radius
+  // Using smoothstep creates a soft edge for the ripple
+  let mask = smoothstep(radius + thickness, radius, dist) * smoothstep(radius - thickness, radius, dist);
+
+  // 3. Calculate the displacement amount using a Sine wave
+  // We subtract dist from radius to orient the wave correctly
+  let wave = sin((dist - radius) * 20.0);
+
+  // 4. Apply intensity and mask, then offset the UV
+  let offset = normalize(dir) * wave * intensity * mask;
+
+  return offset;
+}
+`;
+}
 // src/shaders/scene-circles.ts
 function generateSceneCirclesFunction(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0.5] [1.0 1.0 1.0] [0.263 0.416 0.557]]") {
   return `
@@ -1019,6 +1574,44 @@ function generateSceneCirclesFunction(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0
         }
     `;
 }
+// src/shaders/scene-circles-gpu.ts
+function generateSceneCirclesFunctionGpu(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0.5] [1.0 1.0 1.0] [0.263 0.416 0.557]]") {
+  return `
+${generateColorPaletteFunctionGpu("circlesPalette", paletteString)}
+
+fn glsl_fract(x: vec2f) -> vec2f {
+  return x - floor(x);
+}
+
+fn SceneCircles(
+  uv0: vec2f,
+  iterations: f32,
+  fractMultiplier: f32,
+  time: f32,
+  waveLength: f32,
+  edgeBlur: f32,
+  contrast: f32
+) -> vec3f {
+  var col = vec3f(0.0);
+  var uv = uv0;
+
+  for (var i = 0.0; i < iterations; i += 1.0) {
+    uv = fract(uv * fractMultiplier) - 0.5;
+
+    var d = length(uv) * exp(-length(uv0));
+
+    let color = circlesPalette(length(uv0) + i * 0.4 + time * 0.4);
+
+    d = sin(d * waveLength + time) / waveLength;
+    d = abs(d);
+    d = pow(edgeBlur / d, contrast);
+
+    col += color * d;
+  }
+  return col;
+}
+`;
+}
 // src/shaders/simplex-noise.ts
 function generateSimplexNoiseFunction() {
   return `
@@ -1203,6 +1796,181 @@ function generateSimplexNoiseFunction() {
     }
     `;
 }
+// src/shaders/simplex-noise-gpu.ts
+function generateSimplexNoiseFunctionGpu() {
+  return `
+
+fn mod289_4(x: vec4f) -> vec4f { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+fn mod289_3(x: vec3f) -> vec3f { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+fn mod289_1(x: f32) -> f32 { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+
+fn permute_4(x: vec4f) -> vec4f { return mod289_4(((x * 34.0) + 10.0) * x); }
+
+fn permute_1(x: f32) -> f32 { return mod289_1(((x * 34.0) + 10.0) * x); }
+
+fn taylorInvSqrt_4(r: vec4f) -> vec4f { return 1.79284291400159 - 0.85373472095314 * r; }
+
+fn taylorInvSqrt_1(r: f32) -> f32 { return 1.79284291400159 - 0.85373472095314 * r; }
+
+fn grad4(j: f32, ip: vec4f) -> vec4f {
+  let ones = vec4f(1.0, 1.0, 1.0, -1.0);
+  var p: vec4f;
+  var s: vec4f;
+
+  p = vec4f(
+    floor(fract(vec3f(j) * ip.xyz) * 7.0) * ip.z - 1.0,
+    0.0
+  );
+  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+  s = select(vec4f(0.0), vec4f(1.0), p < vec4f(0.0));
+  p = vec4f(p.xyz + (s.xyz * 2.0 - 1.0) * s.www, p.w);
+
+  return p;
+}
+
+// (sqrt(5) - 1)/4 = F4
+const F4: f32 = 0.309016994374947451;
+
+fn SimplexNoise4D(v: vec4f) -> f32 {
+  let C = vec4f(
+    0.138196601125011,  // (5 - sqrt(5))/20  G4
+    0.276393202250021,  // 2 * G4
+    0.414589803375032,  // 3 * G4
+    -0.447213595499958  // -1 + 4 * G4
+  );
+
+  // First corner
+  var i = floor(v + dot(v, vec4f(F4)));
+  let x0 = v - i + dot(i, C.xxxx);
+
+  // Other corners
+  // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
+  var i0: vec4f;
+  let isX = step(x0.yzw, x0.xxx);
+  let isYZ = step(x0.zww, x0.yyz);
+  i0.x = isX.x + isX.y + isX.z;
+  i0 = vec4f(i0.x, 1.0 - isX);
+  i0.y = i0.y + isYZ.x + isYZ.y;
+  i0 = vec4f(i0.x, i0.y, i0.zw + 1.0 - isYZ.xy);
+  i0.z = i0.z + isYZ.z;
+  i0.w = i0.w + 1.0 - isYZ.z;
+
+  // i0 now contains the unique values 0,1,2,3 in each channel
+  let i3 = clamp(i0, vec4f(0.0), vec4f(1.0));
+  let i2 = clamp(i0 - 1.0, vec4f(0.0), vec4f(1.0));
+  let i1 = clamp(i0 - 2.0, vec4f(0.0), vec4f(1.0));
+
+  let x1 = x0 - i1 + C.xxxx;
+  let x2 = x0 - i2 + C.yyyy;
+  let x3 = x0 - i3 + C.zzzz;
+  let x4 = x0 + C.wwww;
+
+  // Permutations
+  i = mod289_4(i);
+  let j0 = permute_1(permute_1(permute_1(permute_1(i.w) + i.z) + i.y) + i.x);
+  let j1 = permute_4(permute_4(permute_4(permute_4(
+             i.w + vec4f(i1.w, i2.w, i3.w, 1.0))
+           + i.z + vec4f(i1.z, i2.z, i3.z, 1.0))
+           + i.y + vec4f(i1.y, i2.y, i3.y, 1.0))
+           + i.x + vec4f(i1.x, i2.x, i3.x, 1.0));
+
+  // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope
+  // 7*7*6 = 294, which is close to the ring size 17*17 = 289.
+  let ip = vec4f(1.0 / 294.0, 1.0 / 49.0, 1.0 / 7.0, 0.0);
+
+  var p0 = grad4(j0, ip);
+  var p1 = grad4(j1.x, ip);
+  var p2 = grad4(j1.y, ip);
+  var p3 = grad4(j1.z, ip);
+  var p4 = grad4(j1.w, ip);
+
+  // Normalise gradients
+  let norm = taylorInvSqrt_4(vec4f(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 = p0 * norm.x;
+  p1 = p1 * norm.y;
+  p2 = p2 * norm.z;
+  p3 = p3 * norm.w;
+  p4 = p4 * taylorInvSqrt_1(dot(p4, p4));
+
+  // Mix contributions from the five corners
+  var m0 = max(0.6 - vec3f(dot(x0, x0), dot(x1, x1), dot(x2, x2)), vec3f(0.0));
+  var m1 = max(0.6 - vec2f(dot(x3, x3), dot(x4, x4)), vec2f(0.0));
+  m0 = m0 * m0;
+  m1 = m1 * m1;
+  return 49.0 * (dot(m0 * m0, vec3f(dot(p0, x0), dot(p1, x1), dot(p2, x2)))
+               + dot(m1 * m1, vec2f(dot(p3, x3), dot(p4, x4))));
+}
+
+fn SimplexNoise3D(v: vec3f) -> f32 {
+  let C = vec2f(1.0 / 6.0, 1.0 / 3.0);
+  let D = vec4f(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+  var i = floor(v + dot(v, C.yyy));
+  let x0 = v - i + dot(i, C.xxx);
+
+  // Other corners
+  let g = step(x0.yzx, x0.xyz);
+  let l = 1.0 - g;
+  let i1 = min(g.xyz, l.zxy);
+  let i2 = max(g.xyz, l.zxy);
+
+  let x1 = x0 - i1 + C.xxx;
+  let x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  let x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+  // Permutations
+  i = mod289_3(i);
+  let p = permute_4(permute_4(permute_4(
+             i.z + vec4f(0.0, i1.z, i2.z, 1.0))
+           + i.y + vec4f(0.0, i1.y, i2.y, 1.0))
+           + i.x + vec4f(0.0, i1.x, i2.x, 1.0));
+
+  // Gradients: 7x7 points over a square, mapped onto an octahedron.
+  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  let n_ = 0.142857142857; // 1.0/7.0
+  let ns = n_ * D.wyz - D.xzx;
+
+  let j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
+
+  let x_ = floor(j * ns.z);
+  let y_ = floor(j - 7.0 * x_); // mod(j,N)
+
+  let x = x_ * ns.x + ns.yyyy;
+  let y = y_ * ns.x + ns.yyyy;
+  let h = 1.0 - abs(x) - abs(y);
+
+  let b0 = vec4f(x.xy, y.xy);
+  let b1 = vec4f(x.zw, y.zw);
+
+  let s0 = floor(b0) * 2.0 + 1.0;
+  let s1 = floor(b1) * 2.0 + 1.0;
+  let sh = -step(h, vec4f(0.0));
+
+  let a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  let a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  var p0 = vec3f(a0.xy, h.x);
+  var p1 = vec3f(a0.zw, h.y);
+  var p2 = vec3f(a1.xy, h.z);
+  var p3 = vec3f(a1.zw, h.w);
+
+  // Normalise gradients
+  let norm = taylorInvSqrt_4(vec4f(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 = p0 * norm.x;
+  p1 = p1 * norm.y;
+  p2 = p2 * norm.z;
+  p3 = p3 * norm.w;
+
+  // Mix final noise value
+  var m = max(0.5 - vec4f(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), vec4f(0.0));
+  m = m * m;
+  return 105.0 * dot(m * m, vec4f(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+`;
+}
 // src/shaders/utils.ts
 function generateUtilsFunction() {
   return `