fancy-ui-react 0.2.0

package/dist/components/liquid-text/LiquidText.js

@@ -0,0 +1,882 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+/* empty css                */
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error("LiquidText: unable to create shader");
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader) ?? "unknown error";
+    gl.deleteShader(shader);
+    throw new Error(`LiquidText: shader compile failed: ${info}`);
+  }
+  return shader;
+}
+function linkProgram(gl, vertexShader, fragmentShader) {
+  const program = gl.createProgram();
+  if (!program) throw new Error("LiquidText: unable to create program");
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const info = gl.getProgramInfoLog(program) ?? "unknown error";
+    gl.deleteProgram(program);
+    throw new Error(`LiquidText: program link failed: ${info}`);
+  }
+  return program;
+}
+function uniformLocations(gl, program) {
+  const map = /* @__PURE__ */ new Map();
+  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+  for (let i = 0; i < count; i++) {
+    const info = gl.getActiveUniform(program, i);
+    if (!info) continue;
+    const loc = gl.getUniformLocation(program, info.name);
+    if (loc) map.set(info.name, loc);
+  }
+  return map;
+}
+class GlProgram {
+  program;
+  uniforms;
+  gl;
+  constructor(gl, vertexShader, fragmentSource) {
+    this.gl = gl;
+    const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    this.program = linkProgram(gl, vertexShader, fragmentShader);
+    gl.deleteShader(fragmentShader);
+    this.uniforms = uniformLocations(gl, this.program);
+  }
+  use() {
+    this.gl.useProgram(this.program);
+  }
+  set1f(name, value) {
+    const loc = this.uniforms.get(name);
+    if (loc) this.gl.uniform1f(loc, value);
+  }
+  set2f(name, x, y) {
+    const loc = this.uniforms.get(name);
+    if (loc) this.gl.uniform2f(loc, x, y);
+  }
+  set1i(name, value) {
+    const loc = this.uniforms.get(name);
+    if (loc) this.gl.uniform1i(loc, value);
+  }
+  dispose() {
+    this.gl.deleteProgram(this.program);
+  }
+}
+function createFbo(gl, width, height, fmt, type, filter) {
+  gl.activeTexture(gl.TEXTURE0);
+  const texture = gl.createTexture();
+  if (!texture) throw new Error("LiquidText: unable to allocate texture");
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+  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, fmt.internalFormat, width, height, 0, fmt.format, type, null);
+  const framebuffer = gl.createFramebuffer();
+  if (!framebuffer) throw new Error("LiquidText: unable to allocate framebuffer");
+  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  gl.viewport(0, 0, width, height);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return {
+    texture,
+    framebuffer,
+    width,
+    height,
+    texelSizeX: 1 / width,
+    texelSizeY: 1 / height,
+    attach: (unit) => {
+      gl.activeTexture(gl.TEXTURE0 + unit);
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      return unit;
+    }
+  };
+}
+function deleteFbo(gl, fbo) {
+  if (!fbo) return;
+  gl.deleteTexture(fbo.texture);
+  gl.deleteFramebuffer(fbo.framebuffer);
+}
+function createDoubleFbo(gl, width, height, fmt, type, filter) {
+  let read = createFbo(gl, width, height, fmt, type, filter);
+  let write = createFbo(gl, width, height, fmt, type, filter);
+  return {
+    width,
+    height,
+    texelSizeX: read.texelSizeX,
+    texelSizeY: read.texelSizeY,
+    get read() {
+      return read;
+    },
+    get write() {
+      return write;
+    },
+    swap() {
+      const tmp = read;
+      read = write;
+      write = tmp;
+    }
+  };
+}
+function deleteDoubleFbo(gl, dfbo) {
+  if (!dfbo) return;
+  deleteFbo(gl, dfbo.read);
+  deleteFbo(gl, dfbo.write);
+}
+function textureRenderable(gl, internalFormat, format, type) {
+  const texture = gl.createTexture();
+  if (!texture) return false;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  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, 4, 4, 0, format, type, null);
+  const framebuffer = gl.createFramebuffer();
+  let ok = false;
+  if (framebuffer) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    ok = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+    gl.deleteFramebuffer(framebuffer);
+  }
+  gl.deleteTexture(texture);
+  return ok;
+}
+function resolveFormat(gl, isWebGL2, kind, type) {
+  if (!isWebGL2) {
+    return textureRenderable(gl, gl.RGBA, gl.RGBA, type) ? { internalFormat: gl.RGBA, format: gl.RGBA } : null;
+  }
+  const gl2 = gl;
+  const candidates = kind === "velocity" ? [
+    { internalFormat: gl2.RG16F, format: gl2.RG },
+    { internalFormat: gl2.RGBA16F, format: gl2.RGBA }
+  ] : [
+    { internalFormat: gl2.R16F, format: gl2.RED },
+    { internalFormat: gl2.RG16F, format: gl2.RG },
+    { internalFormat: gl2.RGBA16F, format: gl2.RGBA }
+  ];
+  for (const candidate of candidates) {
+    if (textureRenderable(gl, candidate.internalFormat, candidate.format, type)) return candidate;
+  }
+  return null;
+}
+function acquireGL(canvas) {
+  const attrs = {
+    alpha: true,
+    depth: false,
+    stencil: false,
+    antialias: false,
+    preserveDrawingBuffer: false
+  };
+  let gl = canvas.getContext("webgl2", attrs);
+  let isWebGL2 = !!gl;
+  if (!gl) {
+    gl = canvas.getContext("webgl", attrs) ?? canvas.getContext("experimental-webgl", attrs);
+    isWebGL2 = false;
+  }
+  if (!gl) return null;
+  let halfFloatTexType;
+  let supportLinearFiltering;
+  if (isWebGL2) {
+    const gl2 = gl;
+    gl2.getExtension("EXT_color_buffer_float");
+    supportLinearFiltering = true;
+    halfFloatTexType = gl2.HALF_FLOAT;
+  } else {
+    gl.getExtension("EXT_color_buffer_half_float");
+    const halfFloat = gl.getExtension("OES_texture_half_float");
+    supportLinearFiltering = !!gl.getExtension("OES_texture_half_float_linear");
+    halfFloatTexType = halfFloat ? halfFloat.HALF_FLOAT_OES : 0;
+  }
+  const velocityFormat = resolveFormat(gl, isWebGL2, "velocity", halfFloatTexType);
+  const scalarFormat = resolveFormat(gl, isWebGL2, "scalar", halfFloatTexType);
+  if (!velocityFormat || !scalarFormat) return null;
+  return {
+    gl,
+    ext: { isWebGL2, halfFloatTexType, supportLinearFiltering, velocityFormat, scalarFormat }
+  };
+}
+function createBlit(gl) {
+  const vertexBuffer = gl.createBuffer();
+  const indexBuffer = gl.createBuffer();
+  if (!vertexBuffer || !indexBuffer)
+    throw new Error("LiquidText: unable to allocate geometry buffers");
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+  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);
+  function blit(target) {
+    if (target) {
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
+      gl.viewport(0, 0, target.width, target.height);
+    } else {
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+  }
+  function dispose() {
+    gl.deleteBuffer(vertexBuffer);
+    gl.deleteBuffer(indexBuffer);
+  }
+  return { blit, dispose };
+}
+const VERTEX_SHADER = `
+	precision highp float;
+	attribute vec2 aPos;
+	varying vec2 vUv;
+	varying vec2 vL;
+	varying vec2 vR;
+	varying vec2 vT;
+	varying vec2 vB;
+	uniform vec2 texelSize;
+
+	void main () {
+		vUv = aPos * 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(aPos, 0.0, 1.0);
+	}
+`;
+const COPY_SHADER = `
+	precision mediump float;
+	precision mediump sampler2D;
+	varying vec2 vUv;
+	uniform sampler2D uTexture;
+	void main () {
+		gl_FragColor = texture2D(uTexture, vUv);
+	}
+`;
+const ADVECTION_SHADER = `
+	precision highp float;
+	precision highp sampler2D;
+	varying vec2 vUv;
+	uniform sampler2D uVelocity;
+	uniform float dt;
+	uniform float dissipation;
+
+	void main () {
+		vec2 back = vUv - dt * texture2D(uVelocity, vUv).xy;
+		vec2 advected = texture2D(uVelocity, back).xy;
+		gl_FragColor = vec4(clamp(advected * dissipation, -4.0, 4.0), 0.0, 1.0);
+	}
+`;
+const SPLAT_SHADER = `
+	precision highp float;
+	precision highp sampler2D;
+	varying vec2 vUv;
+	uniform sampler2D uVelocity;
+	uniform vec2 point;
+	uniform vec2 resolution;
+	uniform float radius;
+	uniform vec2 force;
+
+	void main () {
+		vec2 diffPx = (vUv - point) * resolution;
+		float dist = length(diffPx);
+		float t = clamp(1.0 - dist / max(radius, 1.0), 0.0, 1.0);
+		float falloff = t * t * 1.5;
+		vec2 base = texture2D(uVelocity, vUv).xy;
+		gl_FragColor = vec4(clamp(base + force * falloff, -4.0, 4.0), 0.0, 1.0);
+	}
+`;
+const DIFFUSE_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 uSource;
+	uniform float alpha;
+
+	void main () {
+		vec2 xL = texture2D(uVelocity, vL).xy;
+		vec2 xR = texture2D(uVelocity, vR).xy;
+		vec2 xT = texture2D(uVelocity, vT).xy;
+		vec2 xB = texture2D(uVelocity, vB).xy;
+		vec2 x0 = texture2D(uSource, vUv).xy;
+		float beta = 1.0 + 4.0 * alpha;
+		vec2 result = (x0 + alpha * (xL + xR + xT + xB)) / beta;
+		gl_FragColor = vec4(clamp(result, -4.0, 4.0), 0.0, 1.0);
+	}
+`;
+const DIVERGENCE_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;
+
+	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 PRESSURE_SHADER = `
+	precision highp float;
+	precision highp sampler2D;
+	varying vec2 vUv;
+	varying vec2 vL;
+	varying vec2 vR;
+	varying vec2 vT;
+	varying 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 div = texture2D(uDivergence, vUv).x;
+		float p = (L + R + T + B - div) * 0.25;
+		gl_FragColor = vec4(p, 0.0, 0.0, 1.0);
+	}
+`;
+const GRADIENT_SUBTRACT_SHADER = `
+	precision highp float;
+	precision highp sampler2D;
+	varying vec2 vUv;
+	varying vec2 vL;
+	varying vec2 vR;
+	varying vec2 vT;
+	varying 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 vel = texture2D(uVelocity, vUv).xy;
+		vel -= 0.5 * vec2(R - L, T - B);
+		gl_FragColor = vec4(clamp(vel, -4.0, 4.0), 0.0, 1.0);
+	}
+`;
+const DISPLAY_SHADER = `
+	precision highp float;
+	precision highp sampler2D;
+	varying vec2 vUv;
+	uniform sampler2D uText;
+	uniform sampler2D uVelocity;
+	uniform float strength;
+	uniform float chromaticRatio;
+
+	void main () {
+		vec2 vel = texture2D(uVelocity, vUv).xy;
+		vec2 warp = vel * strength;
+		vec2 chroma = warp * chromaticRatio;
+		vec2 base = vUv - warp;
+		vec4 rTap = texture2D(uText, base - chroma);
+		vec4 gTap = texture2D(uText, base);
+		vec4 bTap = texture2D(uText, base + chroma);
+		vec3 color = vec3(rTap.r, gTap.g, bTap.b);
+		float a = max(rTap.a, max(gTap.a, bTap.a));
+		gl_FragColor = vec4(color, a);
+	}
+`;
+const FIXED_DT = 0.016;
+const DIFFUSE_ITERATIONS = 8;
+const PRESSURE_ITERATIONS = 16;
+const SIM_SCALE = 0.25;
+function LiquidText({
+  text = "Liquid",
+  font = "",
+  fontSize = 0,
+  fontWeight = 700,
+  lightColor = "#000000",
+  darkColor = "#ffffff",
+  className = "",
+  strength = 0.5,
+  radius = 160,
+  forceGain = 17,
+  dissipation = 0.98,
+  viscosity = 4,
+  chromaticRatio = 0.2,
+  staticBelow = 1024,
+  interactive = true,
+  pauseWhenHidden = true
+}) {
+  const rootRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [mode, setMode] = useState("static");
+  const [themeColor, setThemeColor] = useState(lightColor);
+  const [resolvedFont, setResolvedFont] = useState(font);
+  const [displayFontSize, setDisplayFontSize] = useState(fontSize > 0 ? fontSize : 64);
+  const themeColorRef = useRef(themeColor);
+  const resolvedFontRef = useRef(resolvedFont);
+  const displayFontSizeRef = useRef(displayFontSize);
+  const rasterizeRef = useRef(null);
+  const live = useLiveRef({
+    text,
+    font,
+    fontSize,
+    fontWeight,
+    lightColor,
+    darkColor,
+    strength,
+    radius,
+    forceGain,
+    dissipation,
+    viscosity,
+    chromaticRatio,
+    interactive,
+    pauseWhenHidden
+  });
+  const rootHeight = `${Math.round(displayFontSize * 1.2)}px`;
+  const activeThemeColor = useCallback(() => {
+    return typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? live.current.darkColor : live.current.lightColor;
+  }, [live]);
+  const applyThemeColor = useCallback((next) => {
+    themeColorRef.current = next;
+    setThemeColor(next);
+  }, []);
+  const fitFontSize = useCallback(() => {
+    const rootEl = rootRef.current;
+    if (!rootEl) return;
+    const { font: font2, fontSize: fontSize2, fontWeight: fontWeight2, text: text2 } = live.current;
+    const family = font2 || getComputedStyle(rootEl).fontFamily || "sans-serif";
+    resolvedFontRef.current = family;
+    setResolvedFont(family);
+    if (fontSize2 > 0) {
+      displayFontSizeRef.current = fontSize2;
+      setDisplayFontSize(fontSize2);
+      return;
+    }
+    const containerWidth = rootEl.clientWidth || 1;
+    const probe = document.createElement("canvas").getContext("2d");
+    if (!probe) return;
+    const reference = 100;
+    probe.font = `${fontWeight2} ${reference}px ${family}`;
+    const measured = probe.measureText(text2).width || 1;
+    const fitted = reference * (containerWidth / measured);
+    const next = Math.min(Math.max(fitted, 8), 2e3);
+    displayFontSizeRef.current = next;
+    setDisplayFontSize(next);
+  }, [live]);
+  useIsomorphicLayoutEffect(() => {
+    if (!rootRef.current) return;
+    applyThemeColor(activeThemeColor());
+    fitFontSize();
+    rasterizeRef.current?.();
+  }, [
+    text,
+    font,
+    fontSize,
+    fontWeight,
+    lightColor,
+    darkColor,
+    activeThemeColor,
+    applyThemeColor,
+    fitFontSize
+  ]);
+  useIsomorphicLayoutEffect(() => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    if (!root || !canvas) return;
+    applyThemeColor(activeThemeColor());
+    const themeObserver = new MutationObserver(() => {
+      const next = activeThemeColor();
+      if (next !== themeColorRef.current) {
+        applyThemeColor(next);
+        rasterizeRef.current?.();
+      }
+    });
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    fitFontSize();
+    const reduceMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const tooSmall = window.innerWidth <= staticBelow;
+    let cleanupCanvasSim = null;
+    let fallbackResizeObserver = null;
+    function startFallbackResize() {
+      if (!root || fallbackResizeObserver) return;
+      fallbackResizeObserver = new ResizeObserver(() => fitFontSize());
+      fallbackResizeObserver.observe(root);
+    }
+    function setupCanvasSim(canvas2, root2, startFallbackResize2) {
+      const acquired = acquireGL(canvas2);
+      if (!acquired) return null;
+      const { gl, ext } = acquired;
+      let velocity = null;
+      let divergenceFbo = null;
+      let pressure = null;
+      let diffuseSource = null;
+      let textTexture = null;
+      let textCanvas = null;
+      function destroySimBuffers() {
+        deleteDoubleFbo(gl, velocity);
+        deleteFbo(gl, divergenceFbo);
+        deleteDoubleFbo(gl, pressure);
+        deleteFbo(gl, diffuseSource);
+        velocity = null;
+        divergenceFbo = null;
+        pressure = null;
+        diffuseSource = null;
+      }
+      const disposeOnFailure = [];
+      try {
+        let makeProgram = function(fragmentSource) {
+          const program = new GlProgram(gl, vertexShader, fragmentSource);
+          disposeOnFailure.push(() => program.dispose());
+          return program;
+        }, createSimBuffers = function(simW, simH) {
+          velocity = createDoubleFbo(
+            gl,
+            simW,
+            simH,
+            ext.velocityFormat,
+            ext.halfFloatTexType,
+            filter
+          );
+          divergenceFbo = createFbo(
+            gl,
+            simW,
+            simH,
+            ext.scalarFormat,
+            ext.halfFloatTexType,
+            gl.NEAREST
+          );
+          pressure = createDoubleFbo(
+            gl,
+            simW,
+            simH,
+            ext.scalarFormat,
+            ext.halfFloatTexType,
+            gl.NEAREST
+          );
+          diffuseSource = createFbo(
+            gl,
+            simW,
+            simH,
+            ext.velocityFormat,
+            ext.halfFloatTexType,
+            filter
+          );
+        }, rasterizeText = function() {
+          const dpr = window.devicePixelRatio || 1;
+          const w = Math.max(1, Math.round(cssWidth * dpr));
+          const h = Math.max(1, Math.round(cssHeight * dpr));
+          if (!textCanvas) textCanvas = document.createElement("canvas");
+          textCanvas.width = w;
+          textCanvas.height = h;
+          const ctx = textCanvas.getContext("2d");
+          if (!ctx) return;
+          ctx.clearRect(0, 0, w, h);
+          ctx.font = `${live.current.fontWeight} ${displayFontSizeRef.current * dpr}px ${resolvedFontRef.current}`;
+          ctx.fillStyle = themeColorRef.current;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "middle";
+          ctx.fillText(live.current.text, 0, h / 2);
+          if (!textTexture) textTexture = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, textTexture);
+          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          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, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textCanvas);
+          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        }, resizeAll = function() {
+          fitFontSize();
+          const dpr = window.devicePixelRatio || 1;
+          cssWidth = root2.clientWidth || 1;
+          cssHeight = Math.round(displayFontSizeRef.current * 1.2) || 1;
+          const pxW = Math.max(1, Math.round(cssWidth * dpr));
+          const pxH = Math.max(1, Math.round(cssHeight * dpr));
+          if (canvas2.width !== pxW || canvas2.height !== pxH) {
+            canvas2.width = pxW;
+            canvas2.height = pxH;
+          }
+          const simW = Math.max(1, Math.round(pxW * SIM_SCALE));
+          const simH = Math.max(1, Math.round(pxH * SIM_SCALE));
+          if (!velocity || velocity.width !== simW || velocity.height !== simH) {
+            destroySimBuffers();
+            createSimBuffers(simW, simH);
+          }
+          rasterizeText();
+        }, onPointerMove = function(e) {
+          if (!live.current.interactive) return;
+          const rect = root2.getBoundingClientRect();
+          if (rect.width <= 0 || rect.height <= 0) return;
+          const x = (e.clientX - rect.left) / rect.width;
+          const y = 1 - (e.clientY - rect.top) / rect.height;
+          if (pointerHasPrev) {
+            pointerForce.x = (x - pointerPrevUV.x) * live.current.forceGain;
+            pointerForce.y = (y - pointerPrevUV.y) * live.current.forceGain;
+            pointerMoved = true;
+          }
+          pointerPrevUV.x = x;
+          pointerPrevUV.y = y;
+          pointerUV.x = x;
+          pointerUV.y = y;
+          pointerHasPrev = true;
+        }, onVisibilityChange = function() {
+          hidden = document.hidden;
+        }, applySplat = function() {
+          if (!pointerMoved || !velocity) return;
+          pointerMoved = false;
+          splatProgram.use();
+          splatProgram.set2f("point", pointerUV.x, pointerUV.y);
+          splatProgram.set2f("resolution", cssWidth, cssHeight);
+          splatProgram.set1f("radius", live.current.radius);
+          splatProgram.set2f("force", pointerForce.x, pointerForce.y);
+          splatProgram.set1i("uVelocity", velocity.read.attach(0));
+          blit(velocity.write);
+          velocity.swap();
+        }, diffuseVelocity = function(dt) {
+          if (!velocity || !diffuseSource) return;
+          copyProgram.use();
+          copyProgram.set1i("uTexture", velocity.read.attach(0));
+          blit(diffuseSource);
+          const alpha = live.current.viscosity * dt;
+          for (let i = 0; i < DIFFUSE_ITERATIONS; i++) {
+            diffuseProgram.use();
+            diffuseProgram.set2f("texelSize", velocity.texelSizeX, velocity.texelSizeY);
+            diffuseProgram.set1i("uVelocity", velocity.read.attach(0));
+            diffuseProgram.set1i("uSource", diffuseSource.attach(1));
+            diffuseProgram.set1f("alpha", alpha);
+            blit(velocity.write);
+            velocity.swap();
+          }
+        }, clearFbo = function(fbo) {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.framebuffer);
+          gl.viewport(0, 0, fbo.width, fbo.height);
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+        }, step = function(dt) {
+          if (!velocity || !divergenceFbo || !pressure) return;
+          gl.disable(gl.BLEND);
+          advectionProgram.use();
+          advectionProgram.set2f("texelSize", velocity.texelSizeX, velocity.texelSizeY);
+          advectionProgram.set1i("uVelocity", velocity.read.attach(0));
+          advectionProgram.set1f("dt", dt);
+          advectionProgram.set1f("dissipation", live.current.dissipation);
+          blit(velocity.write);
+          velocity.swap();
+          applySplat();
+          diffuseVelocity(dt);
+          divergenceProgram.use();
+          divergenceProgram.set2f("texelSize", velocity.texelSizeX, velocity.texelSizeY);
+          divergenceProgram.set1i("uVelocity", velocity.read.attach(0));
+          blit(divergenceFbo);
+          clearFbo(pressure.write);
+          pressure.swap();
+          for (let i = 0; i < PRESSURE_ITERATIONS; i++) {
+            pressureProgram.use();
+            pressureProgram.set2f("texelSize", velocity.texelSizeX, velocity.texelSizeY);
+            pressureProgram.set1i("uPressure", pressure.read.attach(0));
+            pressureProgram.set1i("uDivergence", divergenceFbo.attach(1));
+            blit(pressure.write);
+            pressure.swap();
+          }
+          gradientSubtractProgram.use();
+          gradientSubtractProgram.set2f("texelSize", velocity.texelSizeX, velocity.texelSizeY);
+          gradientSubtractProgram.set1i("uPressure", pressure.read.attach(0));
+          gradientSubtractProgram.set1i("uVelocity", velocity.read.attach(1));
+          blit(velocity.write);
+          velocity.swap();
+        }, draw = function() {
+          if (!velocity || !textTexture) return;
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+          gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.enable(gl.BLEND);
+          gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+          displayProgram.use();
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, textTexture);
+          displayProgram.set1i("uText", 0);
+          displayProgram.set1i("uVelocity", velocity.read.attach(1));
+          displayProgram.set1f("strength", live.current.strength);
+          displayProgram.set1f("chromaticRatio", live.current.chromaticRatio);
+          blit(null);
+        }, frame = function() {
+          rafId = requestAnimationFrame(frame);
+          if (live.current.pauseWhenHidden && hidden) return;
+          step(FIXED_DT);
+          draw();
+        }, teardownSim = function() {
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+          }
+          document.removeEventListener("visibilitychange", onVisibilityChange);
+          window.removeEventListener("pointermove", onPointerMove);
+          resizeObserver.disconnect();
+          destroySimBuffers();
+          if (textTexture) {
+            gl.deleteTexture(textTexture);
+            textTexture = null;
+          }
+          for (const p of [
+            advectionProgram,
+            splatProgram,
+            diffuseProgram,
+            divergenceProgram,
+            pressureProgram,
+            gradientSubtractProgram,
+            copyProgram,
+            displayProgram
+          ]) {
+            p.dispose();
+          }
+          disposeGeometry();
+          rasterizeRef.current = null;
+        }, onContextLost = function(event) {
+          event.preventDefault();
+          teardownSim();
+          setMode("static");
+          startFallbackResize2();
+        }, onContextRestored = function() {
+        };
+        const { blit, dispose: disposeGeometry } = createBlit(gl);
+        disposeOnFailure.push(disposeGeometry);
+        const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+        disposeOnFailure.push(() => gl.deleteShader(vertexShader));
+        const advectionProgram = makeProgram(ADVECTION_SHADER);
+        const splatProgram = makeProgram(SPLAT_SHADER);
+        const diffuseProgram = makeProgram(DIFFUSE_SHADER);
+        const divergenceProgram = makeProgram(DIVERGENCE_SHADER);
+        const pressureProgram = makeProgram(PRESSURE_SHADER);
+        const gradientSubtractProgram = makeProgram(GRADIENT_SUBTRACT_SHADER);
+        const copyProgram = makeProgram(COPY_SHADER);
+        const displayProgram = makeProgram(DISPLAY_SHADER);
+        gl.deleteShader(vertexShader);
+        const filter = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
+        let cssWidth = 0;
+        let cssHeight = 0;
+        resizeAll();
+        setMode("canvas");
+        rasterizeRef.current = rasterizeText;
+        const resizeObserver = new ResizeObserver(() => resizeAll());
+        resizeObserver.observe(root2);
+        const pointerUV = { x: 0.5, y: 0.5 };
+        const pointerPrevUV = { x: 0.5, y: 0.5 };
+        const pointerForce = { x: 0, y: 0 };
+        let pointerHasPrev = false;
+        let pointerMoved = false;
+        window.addEventListener("pointermove", onPointerMove, { passive: true });
+        let hidden = document.hidden;
+        document.addEventListener("visibilitychange", onVisibilityChange);
+        let rafId = requestAnimationFrame(frame);
+        canvas2.addEventListener("webglcontextlost", onContextLost, false);
+        canvas2.addEventListener("webglcontextrestored", onContextRestored, false);
+        disposeOnFailure.length = 0;
+        return () => {
+          canvas2.removeEventListener("webglcontextlost", onContextLost);
+          canvas2.removeEventListener("webglcontextrestored", onContextRestored);
+          teardownSim();
+        };
+      } catch {
+        for (const dispose of disposeOnFailure) {
+          try {
+            dispose();
+          } catch {
+          }
+        }
+        destroySimBuffers();
+        if (textTexture) gl.deleteTexture(textTexture);
+        gl.getExtension("WEBGL_lose_context")?.loseContext();
+        setMode("static");
+        return null;
+      }
+    }
+    if (!reduceMotionQuery.matches && !tooSmall) {
+      cleanupCanvasSim = setupCanvasSim(canvas, root, startFallbackResize);
+    }
+    if (!cleanupCanvasSim) {
+      setMode("static");
+      startFallbackResize();
+    }
+    function onReduceMotionChange(e) {
+      if (e.matches && cleanupCanvasSim) {
+        cleanupCanvasSim();
+        cleanupCanvasSim = null;
+        setMode("static");
+        startFallbackResize();
+      }
+    }
+    reduceMotionQuery.addEventListener("change", onReduceMotionChange);
+    return () => {
+      themeObserver.disconnect();
+      reduceMotionQuery.removeEventListener("change", onReduceMotionChange);
+      fallbackResizeObserver?.disconnect();
+      cleanupCanvasSim?.();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("liquid-text relative block w-full", className),
+      style: { height: rootHeight },
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-0 block h-full w-full",
+              mode === "canvas" ? "" : "invisible"
+            )
+          }
+        ),
+        mode === "canvas" ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "liquid-text-fallback block",
+            style: {
+              color: themeColor,
+              // An empty family must not reach the style object: React 18's
+              // hydration comparator renders it as `font-family:` and reports a
+              // mismatch against the server markup that omitted it.
+              fontFamily: resolvedFont || void 0,
+              fontSize: `${displayFontSize}px`,
+              fontWeight
+            },
+            children: text
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LiquidText
+};