@fjandin/react-shader 0.0.8 → 0.0.10

package/README.md

@@ -48,8 +48,7 @@ function App() {
 | `fragment` | `string` | Yes | - | GLSL fragment shader source code |
 | `vertex` | `string` | No | Default quad shader | GLSL vertex shader source code |
 | `uniforms` | `Record<string, UniformValue>` | No | `{}` | Custom uniform values |
-| `className` | `string` | No | - | CSS class name for the container |
-| `debug` | `boolean` | No | `false` | Show debug overlay with resolution and mouse info |
+| `className` | `string` | No | - | CSS class name for the canvas |
 | `fullscreen` | `boolean` | No | `false` | Render as fixed fullscreen overlay |
 | `timeScale` | `number` | No | `1` | Scale factor for elapsed time |
 | `onFrame` | `(info: FrameInfo) => void` | No | - | Callback invoked on each frame |
@@ -175,6 +174,7 @@ The `FrameInfo` object contains:
 - `time` - Total elapsed time in seconds
 - `resolution` - Canvas resolution as `[width, height]`
 - `mouse` - Mouse position as `[x, y]`
+- `mouseNormalized` - Aspect-corrected mouse position as `[x, y]`
 - `mouseLeftDown` - Whether left mouse button is pressed
 
 ## TypeScript
@@ -215,11 +215,12 @@ const declarations = generateUniformDeclarations({
 ## Features
 
 - WebGL2 with WebGL1 fallback
-- High-DPI display support via `devicePixelRatio`
+- High-DPI display support with automatic DPR change detection
 - Automatic canvas resizing
 - Shader compilation error display
 - Context loss/restoration handling
 - Mouse tracking with WebGL coordinate convention
+- Optimized render loop with minimal per-frame allocations
 
 ## Requirements
 

package/dist/ReactShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAU1D,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,GACZ,EAAE,gBAAgB,2CA0ElB"}
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAgC/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,GACZ,EAAE,gBAAgB,2CAuDlB"}

package/dist/example/shader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QA4FnB,CAAA"}
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,QAwCnB,CAAA"}

package/dist/hooks/useWebGL.d.ts

@@ -7,7 +7,6 @@ interface UseWebGLOptions {
     onFrame?: (info: FrameInfo) => void;
     onClick?: (info: FrameInfo) => void;
     onMouseMove?: (info: FrameInfo) => void;
-    running?: boolean;
     timeScale?: number;
 }
 export declare function useWebGL(options: UseWebGLOptions): {

package/dist/hooks/useWebGL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvD,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EA+PhD"}
+{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvD,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EAmQhD"}

package/dist/index.cjs

@@ -29,7 +29,10 @@ var __export = (target, all) => {
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
+  generateUtilsFunction: () => generateUtilsFunction,
   generateSimplexNoiseFunction: () => generateSimplexNoiseFunction,
+  generateSceneCirclesFunction: () => generateSceneCirclesFunction,
+  generateDistortionRippleFunction: () => generateDistortionRippleFunction,
   generateColorPaletteFunction: () => generateColorPaletteFunction,
   ReactShader: () => ReactShader
 });
@@ -270,6 +273,14 @@ function useWebGL(options) {
   const timeScaleRef = import_react.useRef(options.timeScale ?? 1);
   const vertexRef = import_react.useRef(options.vertex);
   const fragmentRef = import_react.useRef(options.fragment);
+  const dprRef = import_react.useRef(window.devicePixelRatio || 1);
+  const defaultUniformsRef = import_react.useRef({
+    iTime: 0,
+    iMouse: [0, 0],
+    iMouseNormalized: [0, 0],
+    iMouseLeftDown: 0,
+    iResolution: [0, 0]
+  });
   uniformsRef.current = options.uniforms;
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
@@ -287,10 +298,9 @@ function useWebGL(options) {
       return;
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
     const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
     const elapsedTime = elapsedTimeRef.current;
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
     const displayHeight = canvas.clientHeight;
     if (displayWidth === 0 || displayHeight === 0) {
@@ -310,22 +320,13 @@ function useWebGL(options) {
     gl.enableVertexAttribArray(positionAttributeLocation);
     gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
     gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-    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 defaultUniforms = {
-      iTime: elapsedTime,
-      iMouse: mouseRef.current,
-      iMouseNormalized: mouseNormalizedRef.current,
-      iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
-      iResolution: [canvas.width, canvas.height]
-    };
-    setUniforms(gl, program, defaultUniforms, uniformLocationCache);
-    if (uniformsRef.current) {
-      setUniforms(gl, program, uniformsRef.current, uniformLocationCache);
-    }
+    const defaultUniforms = defaultUniformsRef.current;
+    defaultUniforms.iTime = elapsedTime;
+    defaultUniforms.iMouse = mouseRef.current;
+    defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
+    defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
+    defaultUniforms.iResolution = [canvas.width, canvas.height];
+    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     if (onFrameRef.current) {
       onFrameRef.current({
@@ -368,10 +369,16 @@ function useWebGL(options) {
     const handleContextRestored = () => {
       initialize();
     };
+    const dprMediaQuery = window.matchMedia(`(resolution: ${dprRef.current}dppx)`);
+    const handleDprChange = () => {
+      dprRef.current = window.devicePixelRatio || 1;
+    };
+    dprMediaQuery.addEventListener("change", handleDprChange);
     canvas.addEventListener("webglcontextlost", handleContextLost);
     canvas.addEventListener("webglcontextrestored", handleContextRestored);
     initialize();
     return () => {
+      dprMediaQuery.removeEventListener("change", handleDprChange);
       canvas.removeEventListener("webglcontextlost", handleContextLost);
       canvas.removeEventListener("webglcontextrestored", handleContextRestored);
       cancelAnimationFrame(animationFrameRef.current);
@@ -396,7 +403,7 @@ function useWebGL(options) {
       const rect = canvasRectRef.current;
       if (!rect)
         return;
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = dprRef.current;
       const x = (event.clientX - rect.left) * dpr;
       const y = (rect.height - (event.clientY - rect.top)) * dpr;
       mouseRef.current = [x, y];
@@ -461,6 +468,24 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
 `;
+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 ReactShader({
   className,
   fragment,
@@ -477,11 +502,6 @@ function ReactShader({
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
-  const handleFrame = import_react2.useCallback((info) => {
-    if (onFrame) {
-      onFrame(info);
-    }
-  }, [onFrame]);
   import_react2.useEffect(() => {
     setError(null);
   }, [fragment, vertex]);
@@ -490,23 +510,12 @@ function ReactShader({
     vertex,
     uniforms,
     onError: handleError,
-    onFrame: handleFrame,
+    onFrame,
     onClick,
     onMouseMove,
     timeScale
   });
-  const containerStyle = fullscreen ? {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    zIndex: 9000
-  } : {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  };
+  const containerStyle = import_react2.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {
     return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
       className,
@@ -534,7 +543,7 @@ function ReactShader({
   return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
     ref: canvasRef,
     className,
-    style: { display: "block", width: "100%", height: "100%" }
+    style: CANVAS_STYLE
   }, undefined, false, undefined, this);
 }
 // src/shaders/color-palette.ts
@@ -550,6 +559,63 @@ function generateColorPaletteFunction(name, paletteString) {
         }
       `;
 }
+// src/shaders/distortion-ripple.ts
+function generateDistortionRippleFunction() {
+  return `
+      vec2 DistortionRipple(vec2 uv, vec2 center, float radius, float intensity, float thickness) {
+        // 1. Calculate vector and distance from center
+        vec2 dir = uv - center;
+        float dist = length(dir);
+        
+        // 2. Create a mask so the ripple only exists near the radius Z
+        // Using smoothstep creates a soft edge for the ripple
+        float 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
+        float wave = sin((dist - radius) * 20.0); 
+        
+        // 4. Apply intensity and mask, then offset the UV
+        vec2 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 `
+        ${generateColorPaletteFunction("circlesPalette", paletteString)}
+
+        vec3 SceneCircles(
+            vec2 uv0,
+            float iterations,
+            float fractMultiplier,
+            float time,
+            float waveLength,
+            float edgeBlur,
+            float contrast
+        ) {
+            vec3 col = vec3(0.0);
+            vec2 uv = uv0;
+        
+            for (float i = 0.0; i < iterations; i++) {
+                uv = fract(uv * fractMultiplier) - 0.5;
+            
+                float d = length(uv) * exp(-length(uv0));
+            
+                vec3 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 `
@@ -734,3 +800,15 @@ function generateSimplexNoiseFunction() {
     }
     `;
 }
+// src/shaders/utils.ts
+function generateUtilsFunction() {
+  return `
+    vec2 GetUv(vec2 fragCoord, vec2 resolution) {
+      return (fragCoord - 0.5 * resolution) / resolution.y;
+    }
+
+    vec2 GetMouse(vec2 mouse, vec2 resolution) {
+      return (mouse - 0.5 * resolution) / resolution.y;
+    }
+  `;
+}

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 export { ReactShader } from "./ReactShader";
 export { generateColorPaletteFunction } from "./shaders/color-palette";
+export { generateDistortionRippleFunction } from "./shaders/distortion-ripple";
+export { generateSceneCirclesFunction } from "./shaders/scene-circles";
 export { generateSimplexNoiseFunction } from "./shaders/simplex-noise";
+export { generateUtilsFunction } from "./shaders/utils";
 export type { DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, UniformValue, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/ReactShader.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState } from "react";
 
 // src/hooks/useWebGL.ts
 import { useCallback, useEffect, useRef } from "react";
@@ -233,6 +233,14 @@ function useWebGL(options) {
   const timeScaleRef = useRef(options.timeScale ?? 1);
   const vertexRef = useRef(options.vertex);
   const fragmentRef = useRef(options.fragment);
+  const dprRef = useRef(window.devicePixelRatio || 1);
+  const defaultUniformsRef = useRef({
+    iTime: 0,
+    iMouse: [0, 0],
+    iMouseNormalized: [0, 0],
+    iMouseLeftDown: 0,
+    iResolution: [0, 0]
+  });
   uniformsRef.current = options.uniforms;
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
@@ -250,10 +258,9 @@ function useWebGL(options) {
       return;
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
     const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
     const elapsedTime = elapsedTimeRef.current;
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
     const displayHeight = canvas.clientHeight;
     if (displayWidth === 0 || displayHeight === 0) {
@@ -273,22 +280,13 @@ function useWebGL(options) {
     gl.enableVertexAttribArray(positionAttributeLocation);
     gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
     gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-    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 defaultUniforms = {
-      iTime: elapsedTime,
-      iMouse: mouseRef.current,
-      iMouseNormalized: mouseNormalizedRef.current,
-      iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
-      iResolution: [canvas.width, canvas.height]
-    };
-    setUniforms(gl, program, defaultUniforms, uniformLocationCache);
-    if (uniformsRef.current) {
-      setUniforms(gl, program, uniformsRef.current, uniformLocationCache);
-    }
+    const defaultUniforms = defaultUniformsRef.current;
+    defaultUniforms.iTime = elapsedTime;
+    defaultUniforms.iMouse = mouseRef.current;
+    defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
+    defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
+    defaultUniforms.iResolution = [canvas.width, canvas.height];
+    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     if (onFrameRef.current) {
       onFrameRef.current({
@@ -331,10 +329,16 @@ function useWebGL(options) {
     const handleContextRestored = () => {
       initialize();
     };
+    const dprMediaQuery = window.matchMedia(`(resolution: ${dprRef.current}dppx)`);
+    const handleDprChange = () => {
+      dprRef.current = window.devicePixelRatio || 1;
+    };
+    dprMediaQuery.addEventListener("change", handleDprChange);
     canvas.addEventListener("webglcontextlost", handleContextLost);
     canvas.addEventListener("webglcontextrestored", handleContextRestored);
     initialize();
     return () => {
+      dprMediaQuery.removeEventListener("change", handleDprChange);
       canvas.removeEventListener("webglcontextlost", handleContextLost);
       canvas.removeEventListener("webglcontextrestored", handleContextRestored);
       cancelAnimationFrame(animationFrameRef.current);
@@ -359,7 +363,7 @@ function useWebGL(options) {
       const rect = canvasRectRef.current;
       if (!rect)
         return;
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = dprRef.current;
       const x = (event.clientX - rect.left) * dpr;
       const y = (rect.height - (event.clientY - rect.top)) * dpr;
       mouseRef.current = [x, y];
@@ -424,6 +428,24 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
 `;
+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 ReactShader({
   className,
   fragment,
@@ -440,11 +462,6 @@ function ReactShader({
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
-  const handleFrame = useCallback2((info) => {
-    if (onFrame) {
-      onFrame(info);
-    }
-  }, [onFrame]);
   useEffect2(() => {
     setError(null);
   }, [fragment, vertex]);
@@ -453,23 +470,12 @@ function ReactShader({
     vertex,
     uniforms,
     onError: handleError,
-    onFrame: handleFrame,
+    onFrame,
     onClick,
     onMouseMove,
     timeScale
   });
-  const containerStyle = fullscreen ? {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    zIndex: 9000
-  } : {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  };
+  const containerStyle = useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {
     return /* @__PURE__ */ jsxDEV("div", {
       className,
@@ -497,7 +503,7 @@ function ReactShader({
   return /* @__PURE__ */ jsxDEV("canvas", {
     ref: canvasRef,
     className,
-    style: { display: "block", width: "100%", height: "100%" }
+    style: CANVAS_STYLE
   }, undefined, false, undefined, this);
 }
 // src/shaders/color-palette.ts
@@ -513,6 +519,63 @@ function generateColorPaletteFunction(name, paletteString) {
         }
       `;
 }
+// src/shaders/distortion-ripple.ts
+function generateDistortionRippleFunction() {
+  return `
+      vec2 DistortionRipple(vec2 uv, vec2 center, float radius, float intensity, float thickness) {
+        // 1. Calculate vector and distance from center
+        vec2 dir = uv - center;
+        float dist = length(dir);
+        
+        // 2. Create a mask so the ripple only exists near the radius Z
+        // Using smoothstep creates a soft edge for the ripple
+        float 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
+        float wave = sin((dist - radius) * 20.0); 
+        
+        // 4. Apply intensity and mask, then offset the UV
+        vec2 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 `
+        ${generateColorPaletteFunction("circlesPalette", paletteString)}
+
+        vec3 SceneCircles(
+            vec2 uv0,
+            float iterations,
+            float fractMultiplier,
+            float time,
+            float waveLength,
+            float edgeBlur,
+            float contrast
+        ) {
+            vec3 col = vec3(0.0);
+            vec2 uv = uv0;
+        
+            for (float i = 0.0; i < iterations; i++) {
+                uv = fract(uv * fractMultiplier) - 0.5;
+            
+                float d = length(uv) * exp(-length(uv0));
+            
+                vec3 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 `
@@ -697,8 +760,23 @@ function generateSimplexNoiseFunction() {
     }
     `;
 }
+// src/shaders/utils.ts
+function generateUtilsFunction() {
+  return `
+    vec2 GetUv(vec2 fragCoord, vec2 resolution) {
+      return (fragCoord - 0.5 * resolution) / resolution.y;
+    }
+
+    vec2 GetMouse(vec2 mouse, vec2 resolution) {
+      return (mouse - 0.5 * resolution) / resolution.y;
+    }
+  `;
+}
 export {
+  generateUtilsFunction,
   generateSimplexNoiseFunction,
+  generateSceneCirclesFunction,
+  generateDistortionRippleFunction,
   generateColorPaletteFunction,
   ReactShader
 };

package/dist/shaders/distortion-ripple.d.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * @returns glsl function for distortion ripple
+ *
+ * vec2 uv: uv coordinates
+ *
+ * vec2 center: center of the ripple
+ *
+ * float radius: radius of the ripple
+ *
+ * float intensity: intensity of the ripple
+ *
+ * float thickness: thickness of the ripple
+ */
+export declare function generateDistortionRippleFunction(): string;
+//# sourceMappingURL=distortion-ripple.d.ts.map

package/dist/shaders/distortion-ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distortion-ripple.d.ts","sourceRoot":"","sources":["../../src/shaders/distortion-ripple.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gCAAgC,WAqB/C"}

package/dist/shaders/scene-circles.d.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ * @param paletteString
+ * @returns glsl function for rendering circles
+ *
+ * vec2 uv0: uv coordinates
+ *
+ * float iterations: number of iterations
+ *
+ * float fractMultiplier: fract multiplier
+ *
+ * float time: time
+ *
+ * float waveLength: wave length
+ *
+ * float edgeBlur: edge blur
+ *
+ * float contrast: contrast
+ */
+export declare function generateSceneCirclesFunction(paletteString?: string): string;
+//# sourceMappingURL=scene-circles.d.ts.map

package/dist/shaders/scene-circles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene-circles.d.ts","sourceRoot":"","sources":["../../src/shaders/scene-circles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,4BAA4B,CAC1C,aAAa,SAAoE,UAiClF"}

package/dist/shaders/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function generateUtilsFunction(): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/shaders/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/shaders/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,WAUpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjandin/react-shader",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "React component for rendering WebGL shaders",
   "type": "module",
   "main": "./dist/index.cjs",