fancy-ui-react 0.2.0

package/dist/components/fluid-cursor/FluidCursor.js

@@ -0,0 +1,1479 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+import { hexToRgb, DEV, wrap, pointerPrototype, scaleRadiusForContainer, HSVtoRGB } from "./fluid-shared.js";
+import { startWebGpuFluid } from "./webgpu-engine.js";
+function FluidCursor({
+  simResolution = 128,
+  dyeResolution = 1440,
+  captureResolution = 512,
+  densityDissipation = 3.5,
+  velocityDissipation = 2,
+  pressure = 0.1,
+  pressureIterations = 20,
+  curl = 3,
+  splatRadius = 0.2,
+  splatForce = 6e3,
+  shading = true,
+  colorUpdateSpeed = 10,
+  backColor = { r: 0.5, g: 0, b: 0 },
+  transparent = true,
+  fluidColor,
+  fluidColors,
+  colorIntensity = 0.15,
+  className = "",
+  autoSplat = false,
+  autoSplatInterval = 1500,
+  interactive = true,
+  pauseWhenHidden = true,
+  splatOnMount = false,
+  allowMultiple = false,
+  contained = true,
+  hdr = false,
+  hdrBoost = 1.5,
+  dither = false,
+  ditherPixelSize = 3,
+  ditherLevels = 4,
+  onReady
+}) {
+  const [derived] = useState(() => ({
+    clampedColorIntensity: Math.max(0, Math.min(1, colorIntensity)),
+    clampedHdrBoost: Math.max(1, Math.min(4, hdrBoost)),
+    clampedDitherPixelSize: Math.max(1, ditherPixelSize),
+    clampedDitherLevels: Math.max(2, Math.min(16, Math.floor(ditherLevels))),
+    resolvedBackColor: typeof backColor === "string" ? hexToRgb(backColor) : backColor
+  }));
+  const canvasRef = useRef(null);
+  const activeInstanceRef = useRef(null);
+  const mountCounterRef = useRef(0);
+  const colorCacheRef = useRef({
+    colorIndex: 0,
+    cachedFluidColorHex: void 0,
+    cachedFluidColor: null,
+    cachedFluidColorsRef: void 0,
+    cachedFluidColorsScaled: []
+  });
+  const fluidColorRef = useLiveRef(fluidColor);
+  const fluidColorsRef = useLiveRef(fluidColors);
+  const containedRef = useLiveRef(contained);
+  const onReadyRef = useLiveRef(onReady);
+  function getScaledColor(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    return {
+      r: r * derived.clampedColorIntensity,
+      g: g * derived.clampedColorIntensity,
+      b: b * derived.clampedColorIntensity
+    };
+  }
+  function getCachedFluidColor(hex) {
+    const cache = colorCacheRef.current;
+    if (cache.cachedFluidColor === null || cache.cachedFluidColorHex !== hex) {
+      cache.cachedFluidColorHex = hex;
+      cache.cachedFluidColor = getScaledColor(hex);
+    }
+    return cache.cachedFluidColor;
+  }
+  function getCachedFluidColors(colors) {
+    const cache = colorCacheRef.current;
+    if (cache.cachedFluidColorsRef !== colors) {
+      cache.cachedFluidColorsRef = colors;
+      cache.cachedFluidColorsScaled = colors.map((hex) => getScaledColor(hex));
+    }
+    return cache.cachedFluidColorsScaled;
+  }
+  function generateColor() {
+    const cache = colorCacheRef.current;
+    if (fluidColorRef.current) {
+      return getCachedFluidColor(fluidColorRef.current);
+    }
+    const palette = fluidColorsRef.current;
+    if (palette && palette.length > 0) {
+      const colors = getCachedFluidColors(palette);
+      const idx = cache.colorIndex % colors.length;
+      cache.colorIndex++;
+      return colors[idx];
+    }
+    const c = HSVtoRGB(Math.random(), 1, 1);
+    c.r *= derived.clampedColorIntensity;
+    c.g *= derived.clampedColorIntensity;
+    c.b *= derived.clampedColorIntensity;
+    return c;
+  }
+  function registerInstance(cleanup) {
+    if (!allowMultiple) {
+      if (activeInstanceRef.current) {
+        if (DEV) {
+          console.warn(
+            "[FluidCursor] Destroying previous instance. Only one instance is allowed by default. Use `allowMultiple={true}` to opt out of singleton behavior."
+          );
+        }
+        activeInstanceRef.current();
+      }
+      activeInstanceRef.current = cleanup;
+      return () => {
+        cleanup();
+        if (activeInstanceRef.current === cleanup) {
+          activeInstanceRef.current = null;
+        }
+      };
+    }
+    return cleanup;
+  }
+  const noRendererHandle = {
+    moveTo() {
+    },
+    penUp() {
+    },
+    burst() {
+    },
+    renderLevel: "none"
+  };
+  function notifyReady(handle) {
+    const callback = onReadyRef.current;
+    if (!callback) return;
+    try {
+      callback(handle);
+    } catch (error) {
+      queueMicrotask(() => {
+        throw error;
+      });
+    }
+  }
+  useEffect(() => {
+    const canvasNode = canvasRef.current;
+    if (!canvasNode) return;
+    const canvas = canvasNode;
+    const mountToken = ++mountCounterRef.current;
+    const pointers = [pointerPrototype()];
+    const config = {
+      SIM_RESOLUTION: simResolution,
+      DYE_RESOLUTION: dyeResolution,
+      DENSITY_DISSIPATION: densityDissipation,
+      VELOCITY_DISSIPATION: velocityDissipation,
+      PRESSURE: pressure,
+      PRESSURE_ITERATIONS: pressureIterations,
+      CURL: curl,
+      SPLAT_RADIUS: splatRadius,
+      SPLAT_FORCE: splatForce,
+      SHADING: shading,
+      COLOR_UPDATE_SPEED: colorUpdateSpeed,
+      BACK_COLOR: derived.resolvedBackColor,
+      DITHER: dither,
+      DITHER_PIXEL_SIZE: derived.clampedDitherPixelSize,
+      DITHER_LEVELS: derived.clampedDitherLevels
+    };
+    if (hdr && !dither && typeof navigator !== "undefined" && "gpu" in navigator) {
+      let disposed = false;
+      let activeCleanup = null;
+      startWebGpuFluid(canvas, {
+        simResolution: config.SIM_RESOLUTION,
+        dyeResolution: config.DYE_RESOLUTION,
+        densityDissipation: config.DENSITY_DISSIPATION,
+        velocityDissipation: config.VELOCITY_DISSIPATION,
+        pressure: config.PRESSURE,
+        pressureIterations: config.PRESSURE_ITERATIONS,
+        curl: config.CURL,
+        splatRadius: config.SPLAT_RADIUS,
+        splatForce: config.SPLAT_FORCE,
+        shading: config.SHADING,
+        colorUpdateSpeed: config.COLOR_UPDATE_SPEED,
+        exposure: derived.clampedHdrBoost,
+        contained,
+        interactive,
+        autoSplat,
+        autoSplatInterval,
+        pauseWhenHidden,
+        splatOnMount,
+        generateColor
+      }).then((handle) => {
+        if (disposed) {
+          handle?.cleanup();
+          return;
+        }
+        if (!allowMultiple && mountToken !== mountCounterRef.current) {
+          handle?.cleanup();
+          return;
+        }
+        if (!handle) {
+          activeCleanup = startWebGl() ?? null;
+          return;
+        }
+        activeCleanup = registerInstance(handle.cleanup);
+        notifyReady(handle);
+      }).catch((error) => {
+        if (DEV) {
+          console.warn("[FluidCursor] WebGPU setup failed, falling back to WebGL:", error);
+        }
+        if (!disposed) activeCleanup = startWebGl() ?? null;
+      });
+      return () => {
+        disposed = true;
+        activeCleanup?.();
+      };
+    }
+    return startWebGl();
+    function startWebGl() {
+      const glDisposers = [];
+      let renderLevel = "webgl-sdr";
+      const autopilotPointer = onReady ? pointerPrototype() : null;
+      if (autopilotPointer) pointers.push(autopilotPointer);
+      let penWasUp = true;
+      const context = getWebGLContext(canvas);
+      if (!context.gl || !context.ext) {
+        notifyReady(noRendererHandle);
+        return;
+      }
+      const gl = context.gl;
+      const ext = context.ext;
+      if (!ext.supportLinearFiltering) {
+        config.DYE_RESOLUTION = 256;
+        config.SHADING = false;
+      }
+      function getWebGLContext(canvas2) {
+        const params = {
+          alpha: true,
+          depth: false,
+          stencil: false,
+          antialias: false,
+          preserveDrawingBuffer: false
+        };
+        let gl2 = canvas2.getContext("webgl2", params);
+        if (!gl2) {
+          gl2 = canvas2.getContext("webgl", params) || canvas2.getContext("experimental-webgl", params);
+        }
+        if (!gl2) {
+          console.error("Unable to initialize WebGL.");
+          return { gl: null, ext: null };
+        }
+        if (hdr && "drawingBufferColorSpace" in gl2) {
+          try {
+            gl2.drawingBufferColorSpace = "display-p3";
+            if (gl2.drawingBufferColorSpace === "display-p3") {
+              renderLevel = "webgl-p3";
+            }
+          } catch {
+          }
+          if (DEV) {
+            console.info(
+              renderLevel === "webgl-p3" ? "[FluidCursor] HDR level: webgl-p3 (wide gamut fallback)" : "[FluidCursor] HDR level: webgl-sdr (display-p3 drawing buffer rejected)"
+            );
+          }
+        }
+        const isWebGL2 = "drawBuffers" in gl2;
+        let supportLinearFiltering = false;
+        let halfFloat = null;
+        if (isWebGL2) {
+          gl2.getExtension("EXT_color_buffer_float");
+          supportLinearFiltering = !!gl2.getExtension(
+            "OES_texture_float_linear"
+          );
+        } else {
+          halfFloat = gl2.getExtension("OES_texture_half_float");
+          supportLinearFiltering = !!gl2.getExtension("OES_texture_half_float_linear");
+        }
+        gl2.clearColor(0, 0, 0, 1);
+        const halfFloatTexType = isWebGL2 ? gl2.HALF_FLOAT : halfFloat && halfFloat.HALF_FLOAT_OES || 0;
+        let formatRGBA;
+        let formatRG;
+        let formatR;
+        if (isWebGL2) {
+          formatRGBA = getSupportedFormat(
+            gl2,
+            gl2.RGBA16F,
+            gl2.RGBA,
+            halfFloatTexType
+          );
+          formatRG = getSupportedFormat(
+            gl2,
+            gl2.RG16F,
+            gl2.RG,
+            halfFloatTexType
+          );
+          formatR = getSupportedFormat(
+            gl2,
+            gl2.R16F,
+            gl2.RED,
+            halfFloatTexType
+          );
+        } else {
+          formatRGBA = getSupportedFormat(gl2, gl2.RGBA, gl2.RGBA, halfFloatTexType);
+          formatRG = getSupportedFormat(gl2, gl2.RGBA, gl2.RGBA, halfFloatTexType);
+          formatR = getSupportedFormat(gl2, gl2.RGBA, gl2.RGBA, halfFloatTexType);
+        }
+        return {
+          gl: gl2,
+          ext: {
+            formatRGBA,
+            formatRG,
+            formatR,
+            halfFloatTexType,
+            supportLinearFiltering
+          }
+        };
+      }
+      function getSupportedFormat(gl2, internalFormat, format, type) {
+        if (!supportRenderTextureFormat(gl2, internalFormat, format, type)) {
+          if ("drawBuffers" in gl2) {
+            const gl22 = gl2;
+            switch (internalFormat) {
+              case gl22.R16F:
+                return getSupportedFormat(gl22, gl22.RG16F, gl22.RG, type);
+              case gl22.RG16F:
+                return getSupportedFormat(gl22, gl22.RGBA16F, gl22.RGBA, type);
+              default:
+                return null;
+            }
+          }
+          return null;
+        }
+        return { internalFormat, format };
+      }
+      function supportRenderTextureFormat(gl2, internalFormat, format, type) {
+        const texture = gl2.createTexture();
+        if (!texture) return false;
+        glDisposers.push(() => gl2.deleteTexture(texture));
+        gl2.bindTexture(gl2.TEXTURE_2D, texture);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.NEAREST);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.NEAREST);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_S, gl2.CLAMP_TO_EDGE);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_T, gl2.CLAMP_TO_EDGE);
+        gl2.texImage2D(gl2.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);
+        const fbo = gl2.createFramebuffer();
+        if (!fbo) return false;
+        glDisposers.push(() => gl2.deleteFramebuffer(fbo));
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, fbo);
+        gl2.framebufferTexture2D(gl2.FRAMEBUFFER, gl2.COLOR_ATTACHMENT0, gl2.TEXTURE_2D, texture, 0);
+        const status = gl2.checkFramebufferStatus(gl2.FRAMEBUFFER);
+        return status === gl2.FRAMEBUFFER_COMPLETE;
+      }
+      function hashCode(s) {
+        if (!s.length) return 0;
+        let hash = 0;
+        for (let i = 0; i < s.length; i++) {
+          hash = (hash << 5) - hash + s.charCodeAt(i);
+          hash |= 0;
+        }
+        return hash;
+      }
+      function addKeywords(source, keywords) {
+        if (!keywords) return source;
+        let keywordsString = "";
+        for (const keyword of keywords) {
+          keywordsString += `#define ${keyword}
+`;
+        }
+        return keywordsString + source;
+      }
+      function compileShader(type, source, keywords = null) {
+        const shaderSource = addKeywords(source, keywords);
+        const shader = gl.createShader(type);
+        if (!shader) return null;
+        glDisposers.push(() => gl.deleteShader(shader));
+        gl.shaderSource(shader, shaderSource);
+        gl.compileShader(shader);
+        return shader;
+      }
+      function createProgram(vertexShader, fragmentShader) {
+        if (!vertexShader || !fragmentShader) return null;
+        const program = gl.createProgram();
+        if (!program) return null;
+        glDisposers.push(() => gl.deleteProgram(program));
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.linkProgram(program);
+        return program;
+      }
+      function getUniforms(program) {
+        const uniforms = {};
+        const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+        for (let i = 0; i < uniformCount; i++) {
+          const uniformInfo = gl.getActiveUniform(program, i);
+          if (uniformInfo) {
+            uniforms[uniformInfo.name] = gl.getUniformLocation(program, uniformInfo.name);
+          }
+        }
+        return uniforms;
+      }
+      class Program {
+        program;
+        uniforms;
+        constructor(vertexShader, fragmentShader) {
+          this.program = createProgram(vertexShader, fragmentShader);
+          this.uniforms = this.program ? getUniforms(this.program) : {};
+        }
+        bind() {
+          if (this.program) gl.useProgram(this.program);
+        }
+      }
+      class Material {
+        vertexShader;
+        fragmentShaderSource;
+        programs;
+        activeProgram;
+        uniforms;
+        constructor(vertexShader, fragmentShaderSource) {
+          this.vertexShader = vertexShader;
+          this.fragmentShaderSource = fragmentShaderSource;
+          this.programs = {};
+          this.activeProgram = null;
+          this.uniforms = {};
+        }
+        setKeywords(keywords) {
+          let hash = 0;
+          for (const kw of keywords) {
+            hash += hashCode(kw);
+          }
+          let program = this.programs[hash];
+          if (program == null) {
+            const fragmentShader = compileShader(
+              gl.FRAGMENT_SHADER,
+              this.fragmentShaderSource,
+              keywords
+            );
+            program = createProgram(this.vertexShader, fragmentShader);
+            this.programs[hash] = program;
+          }
+          if (program === this.activeProgram) return;
+          if (program) {
+            this.uniforms = getUniforms(program);
+          }
+          this.activeProgram = program;
+        }
+        bind() {
+          if (this.activeProgram) {
+            gl.useProgram(this.activeProgram);
+          }
+        }
+      }
+      const baseVertexShader = compileShader(
+        gl.VERTEX_SHADER,
+        `
+			precision highp float;
+			attribute vec2 aPosition;
+			varying vec2 vUv;
+			varying vec2 vL;
+			varying vec2 vR;
+			varying vec2 vT;
+			varying vec2 vB;
+			uniform vec2 texelSize;
+
+			void main () {
+				vUv = aPosition * 0.5 + 0.5;
+				vL = vUv - vec2(texelSize.x, 0.0);
+				vR = vUv + vec2(texelSize.x, 0.0);
+				vT = vUv + vec2(0.0, texelSize.y);
+				vB = vUv - vec2(0.0, texelSize.y);
+				gl_Position = vec4(aPosition, 0.0, 1.0);
+			}
+		`
+      );
+      const copyShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision mediump float;
+			precision mediump sampler2D;
+			varying highp vec2 vUv;
+			uniform sampler2D uTexture;
+
+			void main () {
+				gl_FragColor = texture2D(uTexture, vUv);
+			}
+		`
+      );
+      const clearShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision mediump float;
+			precision mediump sampler2D;
+			varying highp vec2 vUv;
+			uniform sampler2D uTexture;
+			uniform float value;
+
+			void main () {
+				gl_FragColor = value * texture2D(uTexture, vUv);
+			}
+		`
+      );
+      const displayShaderSource = `
+			precision highp float;
+			precision highp sampler2D;
+			varying vec2 vUv;
+			varying vec2 vL;
+			varying vec2 vR;
+			varying vec2 vT;
+			varying vec2 vB;
+			uniform sampler2D uTexture;
+			uniform vec2 texelSize;
+			#ifdef DITHERING
+			uniform float uDitherPixel;
+			uniform float uDitherLevels;
+			#endif
+
+			vec3 linearToGamma (vec3 color) {
+				color = max(color, vec3(0));
+				return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0));
+			}
+
+			#ifdef DITHERING
+			// Recursive ordered-dither thresholds (4x4 Bayer, 16 levels).
+			// GLSL ES 1.00-safe: floor/fract arithmetic only — no arrays,
+			// no integer ops, no dynamic indexing.
+			float bayer2 (vec2 a) {
+				a = floor(a);
+				return fract(a.x * 0.5 + a.y * a.y * 0.75);
+			}
+
+			float bayer4 (vec2 a) {
+				return bayer2(a * 0.5) * 0.25 + bayer2(a);
+			}
+			#endif
+
+			void main () {
+			#ifdef DITHERING
+				// One cell = one chunky pixel: every fragment in the cell samples
+				// the dye at the cell center and shares one Bayer threshold, so
+				// the cell renders as a solid square dot.
+				vec2 cell = floor(gl_FragCoord.xy / uDitherPixel);
+				vec2 uv = (cell + 0.5) * uDitherPixel * texelSize;
+				vec3 c = clamp(texture2D(uTexture, uv).rgb, 0.0, 1.0);
+
+				float steps = uDitherLevels - 1.0;
+				c = floor(c * steps + bayer4(cell)) / steps;
+
+				// Alpha from the quantized color: cells that quantize to black
+				// stay fully transparent, so dot density encodes brightness
+				// with no grey haze over the background.
+				float a = max(c.r, max(c.g, c.b));
+				gl_FragColor = vec4(c, a);
+			#else
+				vec3 c = texture2D(uTexture, vUv).rgb;
+				#ifdef SHADING
+					vec3 lc = texture2D(uTexture, vL).rgb;
+					vec3 rc = texture2D(uTexture, vR).rgb;
+					vec3 tc = texture2D(uTexture, vT).rgb;
+					vec3 bc = texture2D(uTexture, vB).rgb;
+
+					float dx = length(rc) - length(lc);
+					float dy = length(tc) - length(bc);
+
+					vec3 n = normalize(vec3(dx, dy, length(texelSize)));
+					vec3 l = vec3(0.0, 0.0, 1.0);
+
+					float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
+					c *= diffuse;
+				#endif
+
+				float a = max(c.r, max(c.g, c.b));
+				gl_FragColor = vec4(c, a);
+			#endif
+			}
+		`;
+      const splatShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision highp float;
+			precision highp sampler2D;
+			varying vec2 vUv;
+			uniform sampler2D uTarget;
+			uniform float aspectRatio;
+			uniform vec3 color;
+			uniform vec2 point;
+			uniform float radius;
+
+			void main () {
+				vec2 p = vUv - point.xy;
+				p.x *= aspectRatio;
+				vec3 splat = exp(-dot(p, p) / radius) * color;
+				vec3 base = texture2D(uTarget, vUv).xyz;
+				gl_FragColor = vec4(base + splat, 1.0);
+			}
+		`
+      );
+      const advectionShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision highp float;
+			precision highp sampler2D;
+			varying vec2 vUv;
+			uniform sampler2D uVelocity;
+			uniform sampler2D uSource;
+			uniform vec2 texelSize;
+			uniform vec2 dyeTexelSize;
+			uniform float dt;
+			uniform float dissipation;
+
+			vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
+				vec2 st = uv / tsize - 0.5;
+				vec2 iuv = floor(st);
+				vec2 fuv = fract(st);
+
+				vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
+				vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
+				vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
+				vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
+
+				return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
+			}
+
+			void main () {
+				#ifdef MANUAL_FILTERING
+					vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
+					vec4 result = bilerp(uSource, coord, dyeTexelSize);
+				#else
+					vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+					vec4 result = texture2D(uSource, coord);
+				#endif
+				float decay = 1.0 + dissipation * dt;
+				gl_FragColor = result / decay;
+			}
+		`,
+        ext.supportLinearFiltering ? null : ["MANUAL_FILTERING"]
+      );
+      const divergenceShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision mediump float;
+			precision mediump sampler2D;
+			varying highp vec2 vUv;
+			varying highp vec2 vL;
+			varying highp vec2 vR;
+			varying highp vec2 vT;
+			varying highp vec2 vB;
+			uniform sampler2D uVelocity;
+
+			void main () {
+				float L = texture2D(uVelocity, vL).x;
+				float R = texture2D(uVelocity, vR).x;
+				float T = texture2D(uVelocity, vT).y;
+				float B = texture2D(uVelocity, vB).y;
+
+				vec2 C = texture2D(uVelocity, vUv).xy;
+				if (vL.x < 0.0) { L = -C.x; }
+				if (vR.x > 1.0) { R = -C.x; }
+				if (vT.y > 1.0) { T = -C.y; }
+				if (vB.y < 0.0) { B = -C.y; }
+
+				float div = 0.5 * (R - L + T - B);
+				gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+			}
+		`
+      );
+      const curlShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision mediump float;
+			precision mediump sampler2D;
+			varying highp vec2 vUv;
+			varying highp vec2 vL;
+			varying highp vec2 vR;
+			varying highp vec2 vT;
+			varying highp vec2 vB;
+			uniform sampler2D uVelocity;
+
+			void main () {
+				float L = texture2D(uVelocity, vL).y;
+				float R = texture2D(uVelocity, vR).y;
+				float T = texture2D(uVelocity, vT).x;
+				float B = texture2D(uVelocity, vB).x;
+				float vorticity = R - L - T + B;
+				gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
+			}
+		`
+      );
+      const vorticityShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision highp float;
+			precision highp sampler2D;
+			varying vec2 vUv;
+			varying vec2 vL;
+			varying vec2 vR;
+			varying vec2 vT;
+			varying vec2 vB;
+			uniform sampler2D uVelocity;
+			uniform sampler2D uCurl;
+			uniform float curl;
+			uniform float dt;
+
+			void main () {
+				float L = texture2D(uCurl, vL).x;
+				float R = texture2D(uCurl, vR).x;
+				float T = texture2D(uCurl, vT).x;
+				float B = texture2D(uCurl, vB).x;
+				float C = texture2D(uCurl, vUv).x;
+
+				vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
+				force /= length(force) + 0.0001;
+				force *= curl * C;
+				force.y *= -1.0;
+
+				vec2 velocity = texture2D(uVelocity, vUv).xy;
+				velocity += force * dt;
+				velocity = min(max(velocity, -1000.0), 1000.0);
+				gl_FragColor = vec4(velocity, 0.0, 1.0);
+			}
+		`
+      );
+      const pressureShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision mediump float;
+			precision mediump sampler2D;
+			varying highp vec2 vUv;
+			varying highp vec2 vL;
+			varying highp vec2 vR;
+			varying highp vec2 vT;
+			varying highp vec2 vB;
+			uniform sampler2D uPressure;
+			uniform sampler2D uDivergence;
+
+			void main () {
+				float L = texture2D(uPressure, vL).x;
+				float R = texture2D(uPressure, vR).x;
+				float T = texture2D(uPressure, vT).x;
+				float B = texture2D(uPressure, vB).x;
+				float C = texture2D(uPressure, vUv).x;
+				float divergence = texture2D(uDivergence, vUv).x;
+				float pressure = (L + R + B + T - divergence) * 0.25;
+				gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+			}
+		`
+      );
+      const gradientSubtractShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+			precision mediump float;
+			precision mediump sampler2D;
+			varying highp vec2 vUv;
+			varying highp vec2 vL;
+			varying highp vec2 vR;
+			varying highp vec2 vT;
+			varying highp vec2 vB;
+			uniform sampler2D uPressure;
+			uniform sampler2D uVelocity;
+
+			void main () {
+				float L = texture2D(uPressure, vL).x;
+				float R = texture2D(uPressure, vR).x;
+				float T = texture2D(uPressure, vT).x;
+				float B = texture2D(uPressure, vB).x;
+				vec2 velocity = texture2D(uVelocity, vUv).xy;
+				velocity.xy -= vec2(R - L, T - B);
+				gl_FragColor = vec4(velocity, 0.0, 1.0);
+			}
+		`
+      );
+      const blit = (() => {
+        const buffer = gl.createBuffer();
+        glDisposers.push(() => gl.deleteBuffer(buffer));
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]),
+          gl.STATIC_DRAW
+        );
+        const elemBuffer = gl.createBuffer();
+        glDisposers.push(() => gl.deleteBuffer(elemBuffer));
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elemBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(0);
+        return (target, doClear = false) => {
+          if (!gl) return;
+          if (!target) {
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+          } else {
+            gl.viewport(0, 0, target.width, target.height);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+          }
+          if (doClear) {
+            gl.clearColor(0, 0, 0, 1);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+          }
+          gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+        };
+      })();
+      let dye;
+      let velocity;
+      let divergenceFBO;
+      let curlFBO;
+      let pressureFBO;
+      const copyProgram = new Program(baseVertexShader, copyShader);
+      const clearProgram = new Program(baseVertexShader, clearShader);
+      const splatProgram = new Program(baseVertexShader, splatShader);
+      const advectionProgram = new Program(baseVertexShader, advectionShader);
+      const divergenceProgram = new Program(baseVertexShader, divergenceShader);
+      const curlProgram = new Program(baseVertexShader, curlShader);
+      const vorticityProgram = new Program(baseVertexShader, vorticityShader);
+      const pressureProgram = new Program(baseVertexShader, pressureShader);
+      const gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader);
+      const displayMaterial = new Material(baseVertexShader, displayShaderSource);
+      function createFBO(w, h, internalFormat, format, type, param) {
+        gl.activeTexture(gl.TEXTURE0);
+        const texture = gl.createTexture();
+        glDisposers.push(() => gl.deleteTexture(texture));
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);
+        const fbo = gl.createFramebuffer();
+        glDisposers.push(() => gl.deleteFramebuffer(fbo));
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        gl.viewport(0, 0, w, h);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        const texelSizeX = 1 / w;
+        const texelSizeY = 1 / h;
+        return {
+          texture,
+          fbo,
+          width: w,
+          height: h,
+          texelSizeX,
+          texelSizeY,
+          attach(id) {
+            gl.activeTexture(gl.TEXTURE0 + id);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            return id;
+          }
+        };
+      }
+      function createDoubleFBO(w, h, internalFormat, format, type, param) {
+        const fbo1 = createFBO(w, h, internalFormat, format, type, param);
+        const fbo2 = createFBO(w, h, internalFormat, format, type, param);
+        return {
+          width: w,
+          height: h,
+          texelSizeX: fbo1.texelSizeX,
+          texelSizeY: fbo1.texelSizeY,
+          read: fbo1,
+          write: fbo2,
+          swap() {
+            const tmp = this.read;
+            this.read = this.write;
+            this.write = tmp;
+          }
+        };
+      }
+      function resizeFBO(target, w, h, internalFormat, format, type, param) {
+        const newFBO = createFBO(w, h, internalFormat, format, type, param);
+        copyProgram.bind();
+        if (copyProgram.uniforms.uTexture)
+          gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0));
+        blit(newFBO, false);
+        return newFBO;
+      }
+      function resizeDoubleFBO(target, w, h, internalFormat, format, type, param) {
+        if (target.width === w && target.height === h) return target;
+        target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param);
+        target.write = createFBO(w, h, internalFormat, format, type, param);
+        target.width = w;
+        target.height = h;
+        target.texelSizeX = 1 / w;
+        target.texelSizeY = 1 / h;
+        return target;
+      }
+      function initFramebuffers() {
+        const simRes = getResolution(config.SIM_RESOLUTION);
+        const dyeRes = getResolution(config.DYE_RESOLUTION);
+        const texType = ext.halfFloatTexType;
+        const rgba = ext.formatRGBA;
+        const rg = ext.formatRG;
+        const r = ext.formatR;
+        const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
+        gl.disable(gl.BLEND);
+        if (!dye) {
+          dye = createDoubleFBO(
+            dyeRes.width,
+            dyeRes.height,
+            rgba.internalFormat,
+            rgba.format,
+            texType,
+            filtering
+          );
+        } else {
+          dye = resizeDoubleFBO(
+            dye,
+            dyeRes.width,
+            dyeRes.height,
+            rgba.internalFormat,
+            rgba.format,
+            texType,
+            filtering
+          );
+        }
+        if (!velocity) {
+          velocity = createDoubleFBO(
+            simRes.width,
+            simRes.height,
+            rg.internalFormat,
+            rg.format,
+            texType,
+            filtering
+          );
+        } else {
+          velocity = resizeDoubleFBO(
+            velocity,
+            simRes.width,
+            simRes.height,
+            rg.internalFormat,
+            rg.format,
+            texType,
+            filtering
+          );
+        }
+        divergenceFBO = createFBO(
+          simRes.width,
+          simRes.height,
+          r.internalFormat,
+          r.format,
+          texType,
+          gl.NEAREST
+        );
+        curlFBO = createFBO(
+          simRes.width,
+          simRes.height,
+          r.internalFormat,
+          r.format,
+          texType,
+          gl.NEAREST
+        );
+        pressureFBO = createDoubleFBO(
+          simRes.width,
+          simRes.height,
+          r.internalFormat,
+          r.format,
+          texType,
+          gl.NEAREST
+        );
+      }
+      function updateKeywords() {
+        const displayKeywords = [];
+        if (config.SHADING) displayKeywords.push("SHADING");
+        if (config.DITHER) displayKeywords.push("DITHERING");
+        displayMaterial.setKeywords(displayKeywords);
+      }
+      function getResolution(resolution) {
+        const w = gl.drawingBufferWidth;
+        const h = gl.drawingBufferHeight;
+        const aspectRatio = w / h;
+        const aspect = aspectRatio < 1 ? 1 / aspectRatio : aspectRatio;
+        const min = Math.round(resolution);
+        const max = Math.round(resolution * aspect);
+        if (w > h) {
+          return { width: max, height: min };
+        }
+        return { width: min, height: max };
+      }
+      function scaleByPixelRatio(input) {
+        const pixelRatio = window.devicePixelRatio || 1;
+        return Math.floor(input * pixelRatio);
+      }
+      let canvasRectCache = null;
+      function updateCanvasRectCache() {
+        if (containedRef.current && canvas) canvasRectCache = canvas.getBoundingClientRect();
+      }
+      if (contained) {
+        window.addEventListener("resize", updateCanvasRectCache, { passive: true });
+        window.addEventListener("scroll", updateCanvasRectCache, { passive: true });
+        updateCanvasRectCache();
+      }
+      function getCanvasPos(clientX, clientY) {
+        if (containedRef.current) {
+          if (!canvasRectCache) updateCanvasRectCache();
+          const rect = canvasRectCache;
+          return {
+            x: scaleByPixelRatio(clientX - rect.left),
+            y: scaleByPixelRatio(clientY - rect.top)
+          };
+        }
+        return { x: scaleByPixelRatio(clientX), y: scaleByPixelRatio(clientY) };
+      }
+      updateKeywords();
+      initFramebuffers();
+      let lastUpdateTime = Date.now();
+      let colorUpdateTimer = 0;
+      let animationFrameId;
+      let isVisible = true;
+      function updateFrame() {
+        if (!isVisible) return;
+        const dt = calcDeltaTime();
+        if (resizeCanvas()) initFramebuffers();
+        updateColors(dt);
+        applyInputs();
+        step(dt);
+        render(null);
+        animationFrameId = requestAnimationFrame(updateFrame);
+      }
+      function calcDeltaTime() {
+        const now = Date.now();
+        let dt = (now - lastUpdateTime) / 1e3;
+        dt = Math.min(dt, 0.016666);
+        lastUpdateTime = now;
+        return dt;
+      }
+      function resizeCanvas() {
+        const width = scaleByPixelRatio(canvas.clientWidth);
+        const height = scaleByPixelRatio(canvas.clientHeight);
+        if (canvas.width !== width || canvas.height !== height) {
+          canvas.width = width;
+          canvas.height = height;
+          return true;
+        }
+        return false;
+      }
+      function updateColors(dt) {
+        colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED;
+        if (colorUpdateTimer >= 1) {
+          colorUpdateTimer = wrap(colorUpdateTimer, 0, 1);
+          pointers.forEach((p) => {
+            if (p === autopilotPointer) return;
+            p.color = generateColor();
+          });
+        }
+      }
+      function applyInputs() {
+        for (const p of pointers) {
+          if (p.moved) {
+            p.moved = false;
+            splatPointer(p);
+          }
+        }
+      }
+      function step(dt) {
+        gl.disable(gl.BLEND);
+        curlProgram.bind();
+        if (curlProgram.uniforms.texelSize) {
+          gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+        }
+        if (curlProgram.uniforms.uVelocity) {
+          gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
+        }
+        blit(curlFBO);
+        vorticityProgram.bind();
+        if (vorticityProgram.uniforms.texelSize) {
+          gl.uniform2f(
+            vorticityProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          );
+        }
+        if (vorticityProgram.uniforms.uVelocity) {
+          gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0));
+        }
+        if (vorticityProgram.uniforms.uCurl) {
+          gl.uniform1i(vorticityProgram.uniforms.uCurl, curlFBO.attach(1));
+        }
+        if (vorticityProgram.uniforms.curl) {
+          gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
+        }
+        if (vorticityProgram.uniforms.dt) {
+          gl.uniform1f(vorticityProgram.uniforms.dt, dt);
+        }
+        blit(velocity.write);
+        velocity.swap();
+        divergenceProgram.bind();
+        if (divergenceProgram.uniforms.texelSize) {
+          gl.uniform2f(
+            divergenceProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          );
+        }
+        if (divergenceProgram.uniforms.uVelocity) {
+          gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0));
+        }
+        blit(divergenceFBO);
+        clearProgram.bind();
+        if (clearProgram.uniforms.uTexture) {
+          gl.uniform1i(clearProgram.uniforms.uTexture, pressureFBO.read.attach(0));
+        }
+        if (clearProgram.uniforms.value) {
+          gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE);
+        }
+        blit(pressureFBO.write);
+        pressureFBO.swap();
+        pressureProgram.bind();
+        if (pressureProgram.uniforms.texelSize) {
+          gl.uniform2f(
+            pressureProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          );
+        }
+        if (pressureProgram.uniforms.uDivergence) {
+          gl.uniform1i(pressureProgram.uniforms.uDivergence, divergenceFBO.attach(0));
+        }
+        for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
+          if (pressureProgram.uniforms.uPressure) {
+            gl.uniform1i(pressureProgram.uniforms.uPressure, pressureFBO.read.attach(1));
+          }
+          blit(pressureFBO.write);
+          pressureFBO.swap();
+        }
+        gradienSubtractProgram.bind();
+        if (gradienSubtractProgram.uniforms.texelSize) {
+          gl.uniform2f(
+            gradienSubtractProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          );
+        }
+        if (gradienSubtractProgram.uniforms.uPressure) {
+          gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressureFBO.read.attach(0));
+        }
+        if (gradienSubtractProgram.uniforms.uVelocity) {
+          gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1));
+        }
+        blit(velocity.write);
+        velocity.swap();
+        advectionProgram.bind();
+        if (advectionProgram.uniforms.texelSize) {
+          gl.uniform2f(
+            advectionProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          );
+        }
+        if (!ext.supportLinearFiltering && advectionProgram.uniforms.dyeTexelSize) {
+          gl.uniform2f(
+            advectionProgram.uniforms.dyeTexelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          );
+        }
+        const velocityId = velocity.read.attach(0);
+        if (advectionProgram.uniforms.uVelocity) {
+          gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
+        }
+        if (advectionProgram.uniforms.uSource) {
+          gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
+        }
+        if (advectionProgram.uniforms.dt) {
+          gl.uniform1f(advectionProgram.uniforms.dt, dt);
+        }
+        if (advectionProgram.uniforms.dissipation) {
+          gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
+        }
+        blit(velocity.write);
+        velocity.swap();
+        if (!ext.supportLinearFiltering && advectionProgram.uniforms.dyeTexelSize) {
+          gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY);
+        }
+        if (advectionProgram.uniforms.uVelocity) {
+          gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0));
+        }
+        if (advectionProgram.uniforms.uSource) {
+          gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1));
+        }
+        if (advectionProgram.uniforms.dissipation) {
+          gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
+        }
+        blit(dye.write);
+        dye.swap();
+      }
+      function render(target) {
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enable(gl.BLEND);
+        drawDisplay(target);
+      }
+      function drawDisplay(target) {
+        const width = gl.drawingBufferWidth;
+        const height = gl.drawingBufferHeight;
+        displayMaterial.bind();
+        if ((config.SHADING || config.DITHER) && displayMaterial.uniforms.texelSize) {
+          gl.uniform2f(displayMaterial.uniforms.texelSize, 1 / width, 1 / height);
+        }
+        if (displayMaterial.uniforms.uTexture) {
+          gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0));
+        }
+        if (config.DITHER) {
+          if (displayMaterial.uniforms.uDitherPixel) {
+            gl.uniform1f(
+              displayMaterial.uniforms.uDitherPixel,
+              config.DITHER_PIXEL_SIZE * (window.devicePixelRatio || 1)
+            );
+          }
+          if (displayMaterial.uniforms.uDitherLevels) {
+            gl.uniform1f(displayMaterial.uniforms.uDitherLevels, config.DITHER_LEVELS);
+          }
+        }
+        blit(target, false);
+      }
+      function splatPointer(pointer) {
+        const dx = pointer.deltaX * config.SPLAT_FORCE;
+        const dy = pointer.deltaY * config.SPLAT_FORCE;
+        splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
+      }
+      function clickSplat(pointer) {
+        const color = generateColor();
+        color.r *= 10;
+        color.g *= 10;
+        color.b *= 10;
+        const dx = 10 * (Math.random() - 0.5);
+        const dy = 30 * (Math.random() - 0.5);
+        splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
+      }
+      function splat(x, y, dx, dy, color) {
+        splatProgram.bind();
+        if (splatProgram.uniforms.uTarget) {
+          gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
+        }
+        if (splatProgram.uniforms.aspectRatio) {
+          gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
+        }
+        if (splatProgram.uniforms.point) {
+          gl.uniform2f(splatProgram.uniforms.point, x, y);
+        }
+        if (splatProgram.uniforms.color) {
+          gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0);
+        }
+        if (splatProgram.uniforms.radius) {
+          let radius = correctRadius(config.SPLAT_RADIUS / 100);
+          if (containedRef.current) {
+            radius = scaleRadiusForContainer(radius, canvas.clientHeight, window.innerHeight);
+          }
+          gl.uniform1f(splatProgram.uniforms.radius, radius);
+        }
+        blit(velocity.write);
+        velocity.swap();
+        if (splatProgram.uniforms.uTarget) {
+          gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0));
+        }
+        if (splatProgram.uniforms.color) {
+          gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
+        }
+        blit(dye.write);
+        dye.swap();
+      }
+      let splatFrameId = 0;
+      function multipleSplats(steps) {
+        const angle = Math.random() * Math.PI * 2;
+        const cx = 0.25 + Math.random() * 0.5;
+        const cy = 0.25 + Math.random() * 0.5;
+        const arcSpan = Math.PI * (0.8 + Math.random() * 0.8);
+        let i = 0;
+        function step2() {
+          if (i >= steps) return;
+          const t = i / Math.max(1, steps - 1);
+          const a = angle + t * arcSpan;
+          const r = 0.15 + 0.05 * Math.sin(t * Math.PI);
+          const x = cx + Math.cos(a) * r;
+          const y = cy + Math.sin(a) * r;
+          const color = generateColor();
+          splat(
+            x,
+            y,
+            -Math.sin(a) * config.SPLAT_FORCE * 0.5,
+            Math.cos(a) * config.SPLAT_FORCE * 0.5,
+            color
+          );
+          i++;
+          if (i < steps) splatFrameId = requestAnimationFrame(step2);
+        }
+        splatFrameId = requestAnimationFrame(step2);
+      }
+      function correctRadius(radius) {
+        const aspectRatio = canvas.width / canvas.height;
+        if (aspectRatio > 1) radius *= aspectRatio;
+        return radius;
+      }
+      function updatePointerDownData(pointer, id, posX, posY) {
+        pointer.id = id;
+        pointer.down = true;
+        pointer.moved = false;
+        pointer.texcoordX = posX / canvas.width;
+        pointer.texcoordY = 1 - posY / canvas.height;
+        pointer.prevTexcoordX = pointer.texcoordX;
+        pointer.prevTexcoordY = pointer.texcoordY;
+        pointer.deltaX = 0;
+        pointer.deltaY = 0;
+        pointer.color = generateColor();
+      }
+      function updatePointerMoveData(pointer, posX, posY, color) {
+        pointer.prevTexcoordX = pointer.texcoordX;
+        pointer.prevTexcoordY = pointer.texcoordY;
+        pointer.texcoordX = posX / canvas.width;
+        pointer.texcoordY = 1 - posY / canvas.height;
+        pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
+        pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
+        pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
+        pointer.color = color;
+      }
+      function correctDeltaX(delta) {
+        const aspectRatio = canvas.width / canvas.height;
+        if (aspectRatio < 1) delta *= aspectRatio;
+        return delta;
+      }
+      function correctDeltaY(delta) {
+        const aspectRatio = canvas.width / canvas.height;
+        if (aspectRatio > 1) delta /= aspectRatio;
+        return delta;
+      }
+      function autopilotMoveTo(x, y, color) {
+        if (!autopilotPointer) return;
+        const posX = x * canvas.width;
+        const posY = y * canvas.height;
+        if (penWasUp) {
+          penWasUp = false;
+          autopilotPointer.down = true;
+          autopilotPointer.moved = false;
+          autopilotPointer.texcoordX = posX / canvas.width;
+          autopilotPointer.texcoordY = 1 - posY / canvas.height;
+          autopilotPointer.prevTexcoordX = autopilotPointer.texcoordX;
+          autopilotPointer.prevTexcoordY = autopilotPointer.texcoordY;
+          autopilotPointer.deltaX = 0;
+          autopilotPointer.deltaY = 0;
+          autopilotPointer.color = color ?? generateColor();
+          return;
+        }
+        updatePointerMoveData(autopilotPointer, posX, posY, color ?? autopilotPointer.color);
+      }
+      function autopilotPenUp() {
+        penWasUp = true;
+        if (autopilotPointer) autopilotPointer.down = false;
+      }
+      function autopilotBurst(x, y, dx, dy, color) {
+        splat(x, 1 - y, dx, -dy, color);
+      }
+      function handleMouseDown(e) {
+        const pointer = pointers[0];
+        const { x: posX, y: posY } = getCanvasPos(e.clientX, e.clientY);
+        updatePointerDownData(pointer, -1, posX, posY);
+        clickSplat(pointer);
+      }
+      function handleFirstMouseMove(e) {
+        const pointer = pointers[0];
+        const { x: posX, y: posY } = getCanvasPos(e.clientX, e.clientY);
+        const color = generateColor();
+        updatePointerMoveData(pointer, posX, posY, color);
+        document.body.removeEventListener("mousemove", handleFirstMouseMove);
+      }
+      function handleMouseMove(e) {
+        const pointer = pointers[0];
+        const { x: posX, y: posY } = getCanvasPos(e.clientX, e.clientY);
+        updatePointerMoveData(pointer, posX, posY, pointer.color);
+      }
+      function handleFirstTouchStart(e) {
+        const touches = e.targetTouches;
+        const pointer = pointers[0];
+        for (let i = 0; i < touches.length; i++) {
+          const touch = touches[i];
+          const { x: posX, y: posY } = getCanvasPos(touch.clientX, touch.clientY);
+          updatePointerDownData(pointer, touch.identifier, posX, posY);
+        }
+        document.body.removeEventListener("touchstart", handleFirstTouchStart);
+      }
+      function handleTouchStart(e) {
+        const touches = e.targetTouches;
+        const pointer = pointers[0];
+        for (let i = 0; i < touches.length; i++) {
+          const touch = touches[i];
+          const { x: posX, y: posY } = getCanvasPos(touch.clientX, touch.clientY);
+          updatePointerDownData(pointer, touch.identifier, posX, posY);
+        }
+      }
+      function handleTouchMove(e) {
+        const touches = e.targetTouches;
+        const pointer = pointers[0];
+        for (let i = 0; i < touches.length; i++) {
+          const touch = touches[i];
+          const { x: posX, y: posY } = getCanvasPos(touch.clientX, touch.clientY);
+          updatePointerMoveData(pointer, posX, posY, pointer.color);
+        }
+      }
+      if (interactive) {
+        window.addEventListener("mousedown", handleMouseDown);
+        document.body.addEventListener("mousemove", handleFirstMouseMove);
+        window.addEventListener("mousemove", handleMouseMove);
+        document.body.addEventListener("touchstart", handleFirstTouchStart);
+        window.addEventListener("touchstart", handleTouchStart, false);
+        window.addEventListener("touchmove", handleTouchMove, false);
+      }
+      let observer = null;
+      if (pauseWhenHidden) {
+        observer = new IntersectionObserver(
+          ([entry]) => {
+            const wasVisible = isVisible;
+            isVisible = entry.isIntersecting;
+            if (isVisible && !wasVisible) {
+              lastUpdateTime = Date.now();
+              animationFrameId = requestAnimationFrame(updateFrame);
+            }
+          },
+          { threshold: 0 }
+        );
+        observer.observe(canvas);
+      }
+      updateFrame();
+      if (splatOnMount) multipleSplats(Math.floor(Math.random() * 6) + 10);
+      let autoSplatTimer = null;
+      if (autoSplat) {
+        autoSplatTimer = setInterval(() => {
+          const color = generateColor();
+          splat(
+            Math.random(),
+            Math.random(),
+            (Math.random() - 0.5) * 200,
+            (Math.random() - 0.5) * 200,
+            color
+          );
+        }, autoSplatInterval);
+      }
+      function cleanup() {
+        cancelAnimationFrame(animationFrameId);
+        cancelAnimationFrame(splatFrameId);
+        if (observer) observer.disconnect();
+        if (autoSplatTimer) clearInterval(autoSplatTimer);
+        if (interactive) {
+          window.removeEventListener("mousedown", handleMouseDown);
+          document.body.removeEventListener("mousemove", handleFirstMouseMove);
+          window.removeEventListener("mousemove", handleMouseMove);
+          document.body.removeEventListener("touchstart", handleFirstTouchStart);
+          window.removeEventListener("touchstart", handleTouchStart);
+          window.removeEventListener("touchmove", handleTouchMove);
+        }
+        if (contained) {
+          window.removeEventListener("resize", updateCanvasRectCache);
+          window.removeEventListener("scroll", updateCanvasRectCache);
+        }
+        for (const dispose2 of glDisposers) dispose2();
+        glDisposers.length = 0;
+      }
+      const dispose = registerInstance(cleanup);
+      notifyReady({
+        moveTo: autopilotMoveTo,
+        penUp: autopilotPenUp,
+        burst: autopilotBurst,
+        renderLevel
+      });
+      return dispose;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        contained ? "pointer-events-none absolute inset-0 h-full w-full" : "pointer-events-none fixed top-0 left-0 z-50 size-full",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: contained ? "block h-full w-full" : "block h-screen w-screen"
+        }
+      )
+    }
+  );
+}
+const FluidCursorAdvanced = FluidCursor;
+export {
+  FluidCursor,
+  FluidCursorAdvanced
+};