fancy-ui-react 0.2.0

package/dist/components/line-hover-link/LineHoverLink.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                    */
+function LineHoverLink({
+  variant = "slide",
+  href = "#",
+  target,
+  rel,
+  className = "",
+  children,
+  sound = false,
+  onClick,
+  ...restProps
+}) {
+  const needsSpan = ["strike", "bounce", "arc", "scribble"].includes(variant);
+  const relValue = target === "_blank" ? rel ?? "noopener noreferrer" : rel;
+  const playCue = useSoundCue(sound);
+  function handleClick(event) {
+    playCue("press");
+    onClick?.(event);
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...restProps,
+      href,
+      target,
+      rel: relValue,
+      className: cn("link-hover", `link-hover--${variant}`, className),
+      onClick: handleClick,
+      children: [
+        needsSpan ? /* @__PURE__ */ jsx("span", { children }) : children,
+        variant === "arc" && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "link-hover__graphic link-hover__graphic--stroke link-hover__graphic--arc",
+            width: "100%",
+            height: "18",
+            viewBox: "0 0 59 18",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M.945.149C12.3 16.142 43.573 22.572 58.785 10.842", pathLength: 1 })
+          }
+        ),
+        variant === "scribble" && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "link-hover__graphic link-hover__graphic--stroke link-hover__graphic--scribble",
+            width: "100%",
+            height: "9",
+            viewBox: "0 0 101 9",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M.426 1.973C4.144 1.567 17.77-.514 21.443 1.48 24.296 3.026 24.844 4.627 27.5 7c3.075 2.748 6.642-4.141 10.066-4.688 7.517-1.2 13.237 5.425 17.59 2.745C58.5 3 60.464-1.786 66 2c1.996 1.365 3.174 3.737 5.286 4.41 5.423 1.727 25.34-7.981 29.14-1.294",
+                pathLength: 1
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LineHoverLink
+};

package/dist/components/line-hover-link/index.d.ts

@@ -0,0 +1,2 @@
+export { LineHoverLink } from "./LineHoverLink.js";
+export type { LineHoverLinkProps, LineHoverVariant } from "./LineHoverLink.js";

package/dist/components/line-reveal/LineReveal.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Props for LineReveal
+ *
+ * Reveals text line by line with a staggered slide-up animation.
+ * Line breaks are computed with @chenglou/pretext (canvas text
+ * measurement), so no DOM splitting or reflow measurement is needed.
+ */
+export interface LineRevealProps {
+    /** Text to reveal */
+    text: string;
+    /**
+     * CSS font shorthand used for both measurement and rendering
+     * (canvas `ctx.font` format, e.g. "600 32px Inter, sans-serif").
+     * Prefer named families: `system-ui` can resolve differently between
+     * canvas measurement and DOM rendering.
+     */
+    font?: string;
+    /** Line height in pixels (defaults to 1.2 × font size) */
+    lineHeight?: number;
+    /** Delay between lines in seconds */
+    stagger?: number;
+    /** Animation duration per line in seconds */
+    duration?: number;
+    /** Initial delay before the first line in seconds */
+    delay?: number;
+    /** Animate only the first time the component enters the viewport */
+    once?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function LineReveal({ text, font, lineHeight, stagger, duration, delay, once, className, }: LineRevealProps): import("react").JSX.Element;

package/dist/components/line-reveal/LineReveal.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { prepareWithSegments, layoutWithLines } from "@chenglou/pretext";
+import { cn } from "../../utils.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+/* empty css                */
+const FONT_SIZE_PX = /(\d+(?:\.\d+)?)px(?:\s*\/\s*[^\s,]+)?/;
+function LineReveal({
+  text,
+  // Named families only: canvas and CSS can resolve `system-ui` to
+  // different fonts (notably on macOS), which skews measured widths.
+  font = '600 32px "Helvetica Neue", Helvetica, Arial, sans-serif',
+  lineHeight,
+  stagger = 0.08,
+  duration = 0.7,
+  delay = 0,
+  once = true,
+  className
+}) {
+  const fontSize = Number(FONT_SIZE_PX.exec(font)?.[1] ?? 32);
+  const resolvedLineHeight = lineHeight ?? Math.round(fontSize * 1.2);
+  const foldable = FONT_SIZE_PX.test(font);
+  const fontWithLineHeight = foldable ? font.replace(FONT_SIZE_PX, (_match, size) => `${size}px/${resolvedLineHeight}px`) : font;
+  const [container, containerRef] = useElementRef();
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [revealed, setRevealed] = useState(false);
+  const [prepared, setPrepared] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    Promise.resolve(document.fonts?.load(font)).catch(() => {
+    }).then(() => {
+      if (cancelled) return;
+      try {
+        setPrepared(prepareWithSegments(text, font));
+      } catch {
+        setPrepared(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [text, font]);
+  useEffect(() => {
+    if (!container) return;
+    const measure = () => setContainerWidth(container.clientWidth);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [container]);
+  const layoutResult = useMemo(
+    () => prepared && containerWidth > 0 ? layoutWithLines(prepared, containerWidth, resolvedLineHeight) : null,
+    [prepared, containerWidth, resolvedLineHeight]
+  );
+  const onceRef = useLiveRef(once);
+  useEffect(() => {
+    if (!container) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setRevealed(true);
+            if (onceRef.current) observer.disconnect();
+          } else if (!onceRef.current) {
+            setRevealed(false);
+          }
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [container, onceRef]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("line-reveal", "relative w-full", className),
+      style: {
+        font: fontWithLineHeight,
+        ...foldable ? null : { lineHeight: `${resolvedLineHeight}px` },
+        height: layoutResult ? `${layoutResult.height}px` : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }),
+        layoutResult ? layoutResult.lines.map((line, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "line-mask",
+            style: { height: `${resolvedLineHeight}px` },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("line", revealed && "revealed"),
+                style: {
+                  transitionDuration: `${duration}s`,
+                  transitionDelay: `${delay + i * stagger}s`
+                },
+                children: line.text
+              }
+            )
+          },
+          i
+        )) : (
+          // SSR / pre-measure fallback: keeps text in the HTML and reserves space
+          /* @__PURE__ */ jsx("div", { style: { visibility: "hidden" }, "aria-hidden": "true", children: text })
+        )
+      ]
+    }
+  );
+}
+export {
+  LineReveal
+};

package/dist/components/line-reveal/index.d.ts

@@ -0,0 +1,2 @@
+export { LineReveal } from "./LineReveal.js";
+export type { LineRevealProps } from "./LineReveal.js";

package/dist/components/line-shadow-text/LineShadowText.d.ts

@@ -0,0 +1,18 @@
+/**
+ * LineShadowText - Text with a diagonal-hatched drop shadow duplicate
+ *
+ * Renders the given text once, plus a `::after` duplicate offset slightly
+ * below and to the right, clipped to a diagonal line pattern and slowly
+ * panned to suggest a shifting shadow.
+ */
+export interface LineShadowTextProps {
+    /** Text to display (and to duplicate into the shadow layer) */
+    text: string;
+    /** Color of the shadow's diagonal lines */
+    shadowColor?: string;
+    /** Element type to render */
+    as?: "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function LineShadowText({ text, shadowColor, as, className, }: LineShadowTextProps): import("react").JSX.Element;

package/dist/components/line-shadow-text/LineShadowText.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../utils.js";
+/* empty css                     */
+function LineShadowText({
+  text,
+  shadowColor = "black",
+  as = "span",
+  className
+}) {
+  const Element = as;
+  const style = { "--shadow-color": shadowColor };
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: cn("line-shadow-text relative z-0 inline-block", className),
+      style,
+      "data-text": text,
+      children: text
+    }
+  );
+}
+export {
+  LineShadowText
+};

package/dist/components/line-shadow-text/index.d.ts

@@ -0,0 +1,2 @@
+export { LineShadowText } from "./LineShadowText.js";
+export type { LineShadowTextProps } from "./LineShadowText.js";

package/dist/components/link/Link.d.ts

@@ -0,0 +1,30 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className"> {
+    /** Destination URL */
+    href: string;
+    /** Visual weight: `default` reads as inline copy, `muted` recedes into supporting text */
+    variant?: "default" | "muted";
+    /** Marks the destination as off-site: appends an arrow glyph and defaults `target`
+     * to `_blank`, which in turn brings the safe `rel` and the "opens in a new tab"
+     * announcement. Override `target` with `_self`, `_parent` or `_top` and both drop
+     * away — the resolved target decides those, not this flag */
+    external?: boolean;
+    /** When the underline shows: only on hover/focus (`hover`, the default), always, or never */
+    underline?: "hover" | "always" | "none";
+    /** Anchor `target`. `external` fills this in as `_blank` when left unset */
+    target?: string;
+    /** Anchor `rel`. Merged with, never replaced by, the `noopener noreferrer` tokens
+     * required whenever `target` opens a new browsing context — any value other than
+     * `_self`, `_parent`, or `_top` (case-insensitively), not just `_blank` */
+    rel?: string;
+    /** Link content */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off
+     * by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/link/Link.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css         */
+const SAME_TAB_TARGETS = /* @__PURE__ */ new Set(["_self", "_parent", "_top"]);
+const Link = forwardRef(function Link2({
+  href,
+  variant = "default",
+  external = false,
+  underline = "hover",
+  target,
+  rel,
+  children,
+  className,
+  sound = false,
+  onClick,
+  ...rest
+}, ref) {
+  const playCue = useSoundCue(sound);
+  function handleClick(event) {
+    playCue("press");
+    onClick?.(event);
+  }
+  const computedTarget = external ? target ?? "_blank" : target;
+  const opensNewContext = !!computedTarget && !SAME_TAB_TARGETS.has(computedTarget.toLowerCase());
+  let computedRel = rel;
+  if (opensNewContext) {
+    const tokens = new Set(rel?.split(/\s+/).filter(Boolean));
+    tokens.add("noopener");
+    tokens.add("noreferrer");
+    computedRel = [...tokens].join(" ");
+  }
+  const classes = cn(
+    "ft-link inline-flex w-fit items-center gap-1 no-underline transition-colors focus-visible:outline-none",
+    variant === "default" ? "ft-link--default text-sm" : "text-muted-foreground text-[13px]",
+    underline === "always" && "underline underline-offset-[3px]",
+    underline === "hover" && "hover:underline focus-visible:underline hover:underline-offset-[3px] focus-visible:underline-offset-[3px]",
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      href,
+      target: computedTarget,
+      rel: computedRel,
+      className: classes,
+      onClick: handleClick,
+      ...rest,
+      children: [
+        children,
+        external && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: "0.7em",
+              height: "0.7em",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "ft-link-icon shrink-0",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
+                /* @__PURE__ */ jsx("path", { d: "M8 7h9v9" })
+              ]
+            }
+          ),
+          opensNewContext && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  Link
+};

package/dist/components/link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from "./Link.js";
+export type { LinkProps } from "./Link.js";

package/dist/components/liquid-glass/LiquidGlass.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+/**
+ * LiquidGlass - glass-like refraction built on an SVG displacement filter
+ *
+ * The element measures itself with a ResizeObserver, paints a displacement map
+ * as an inline SVG data URI at that exact size, and points `backdrop-filter` at
+ * a filter that displaces the red, green and blue channels by slightly
+ * different amounts, which is what produces the chromatic edge.
+ */
+export interface LiquidGlassProps {
+    /** Border radius in px */
+    radius?: number;
+    /** Border thickness factor */
+    border?: number;
+    /** HSL lightness of fill */
+    lightness?: number;
+    /** Gaussian blur std deviation */
+    displace?: number;
+    /** SVG blend mode */
+    blend?: string;
+    /** X displacement channel */
+    xChannel?: "R" | "G" | "B";
+    /** Y displacement channel */
+    yChannel?: "R" | "G" | "B";
+    /** Fill opacity */
+    alpha?: number;
+    /** Inner blur */
+    blur?: number;
+    /** Red channel offset */
+    rOffset?: number;
+    /** Green channel offset */
+    gOffset?: number;
+    /** Blue channel offset */
+    bOffset?: number;
+    /** Displacement scale */
+    scale?: number;
+    /** Frosted overlay opacity */
+    frost?: number;
+    /** Backdrop blur in pixels for the Safari fallback */
+    fallbackBlur?: number;
+    /** Backdrop saturation percentage for the Safari fallback */
+    fallbackSaturation?: number;
+    /** CSS classes for the inner container */
+    className?: string;
+    /** CSS classes for the outer container */
+    containerClass?: string;
+    children?: ReactNode;
+}
+export declare function LiquidGlass({ radius, border: borderProp, lightness, displace, blend, xChannel, yChannel, alpha, blur, rOffset, gOffset, bOffset, scale, frost, fallbackBlur, fallbackSaturation, className, containerClass, children, }: LiquidGlassProps): import("react").JSX.Element;

package/dist/components/liquid-glass/LiquidGlass.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { uid } from "../../internals/use-id.js";
+/* empty css                 */
+function LiquidGlass({
+  radius = 16,
+  border: borderProp = 0.07,
+  lightness = 50,
+  displace,
+  blend = "difference",
+  xChannel = "R",
+  yChannel = "B",
+  alpha = 0.93,
+  blur = 11,
+  rOffset = 0,
+  gOffset = 10,
+  bOffset = 20,
+  scale = -180,
+  frost = 0.05,
+  fallbackBlur = 20,
+  fallbackSaturation = 180,
+  className = "",
+  containerClass = "",
+  children
+}) {
+  const liquidGlassRoot = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [filterId, setFilterId] = useState("");
+  const displacementDataUri = useMemo(() => {
+    if (!filterId) return "";
+    const brd = Math.min(dimensions.width, dimensions.height) * (borderProp * 0.5);
+    const displacementImage = `<svg viewBox="0 0 ${dimensions.width} ${dimensions.height}" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="red-${filterId}" x1="100%" y1="0%" x2="0%" y2="0%"><stop offset="0%" stop-color="#0000"/><stop offset="100%" stop-color="red"/></linearGradient><linearGradient id="blue-${filterId}" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#0000"/><stop offset="100%" stop-color="blue"/></linearGradient></defs><rect x="0" y="0" width="${dimensions.width}" height="${dimensions.height}" fill="black"/><rect x="0" y="0" width="${dimensions.width}" height="${dimensions.height}" rx="${radius}" fill="url(#red-${filterId})"/><rect x="0" y="0" width="${dimensions.width}" height="${dimensions.height}" rx="${radius}" fill="url(#blue-${filterId})" style="mix-blend-mode:${blend}"/><rect x="${brd}" y="${brd}" width="${dimensions.width - brd * 2}" height="${dimensions.height - brd * 2}" rx="${radius}" fill="hsl(0 0% ${lightness}% / ${alpha})" style="filter:blur(${blur}px)"/></svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(displacementImage)}`;
+  }, [
+    dimensions.width,
+    dimensions.height,
+    borderProp,
+    radius,
+    blend,
+    lightness,
+    alpha,
+    blur,
+    filterId
+  ]);
+  const backdropStyle = {
+    "--frost": frost,
+    borderRadius: `${radius}px`,
+    ...filterId ? { backdropFilter: `url(#displacementFilter-${filterId})` } : null,
+    "--lg-fallback-blur": `${fallbackBlur}px`,
+    "--lg-fallback-saturation": `${fallbackSaturation}%`
+  };
+  useEffect(() => {
+    setFilterId(uid("lg"));
+    const node = liquidGlassRoot.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      let width = 0;
+      let height = 0;
+      if (entry.borderBoxSize && entry.borderBoxSize.length) {
+        width = entry.borderBoxSize[0].inlineSize;
+        height = entry.borderBoxSize[0].blockSize;
+      } else if (entry.contentRect) {
+        width = entry.contentRect.width;
+        height = entry.contentRect.height;
+      }
+      setDimensions({ width, height });
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: liquidGlassRoot,
+      className: cn("liquid-glass-effect", containerClass),
+      style: backdropStyle,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("liquid-glass-slot", className), children }),
+        filterId ? /* @__PURE__ */ jsx("svg", { className: "liquid-glass-filter", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: `displacementFilter-${filterId}`, colorInterpolationFilters: "sRGB", children: [
+          /* @__PURE__ */ jsx(
+            "feImage",
+            {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              href: displacementDataUri,
+              result: "map"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "feDisplacementMap",
+            {
+              in: "SourceGraphic",
+              in2: "map",
+              xChannelSelector: xChannel,
+              yChannelSelector: yChannel,
+              scale: scale + rOffset,
+              result: "dispRed"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "feColorMatrix",
+            {
+              in: "dispRed",
+              type: "matrix",
+              values: "1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0",
+              result: "red"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "feDisplacementMap",
+            {
+              in: "SourceGraphic",
+              in2: "map",
+              xChannelSelector: xChannel,
+              yChannelSelector: yChannel,
+              scale: scale + gOffset,
+              result: "dispGreen"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "feColorMatrix",
+            {
+              in: "dispGreen",
+              type: "matrix",
+              values: "0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0",
+              result: "green"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "feDisplacementMap",
+            {
+              in: "SourceGraphic",
+              in2: "map",
+              xChannelSelector: xChannel,
+              yChannelSelector: yChannel,
+              scale: scale + bOffset,
+              result: "dispBlue"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "feColorMatrix",
+            {
+              in: "dispBlue",
+              type: "matrix",
+              values: "0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0",
+              result: "blue"
+            }
+          ),
+          /* @__PURE__ */ jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }),
+          /* @__PURE__ */ jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }),
+          displace !== void 0 ? /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: displace }) : null
+        ] }) }) }) : null
+      ]
+    }
+  );
+}
+export {
+  LiquidGlass
+};

package/dist/components/liquid-glass/index.d.ts

@@ -0,0 +1,2 @@
+export { LiquidGlass } from "./LiquidGlass.js";
+export type { LiquidGlassProps } from "./LiquidGlass.js";

package/dist/components/liquid-text/LiquidText.d.ts

@@ -0,0 +1,35 @@
+export interface LiquidTextProps {
+    /** Text rendered into the fluid texture (or as static fallback text). */
+    text?: string;
+    /** CSS font-family. Empty string resolves to getComputedStyle(host).fontFamily. */
+    font?: string;
+    /** Font size in px. 0 auto-fits the text to the container's width. */
+    fontSize?: number;
+    /** CSS font-weight for the rasterized/fallback text. */
+    fontWeight?: number | string;
+    /** Text color used in light mode. */
+    lightColor?: string;
+    /** Text color used in dark mode. */
+    darkColor?: string;
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
+    /** Geometric UV warp gain — how far the fluid velocity displaces the text's UVs. */
+    strength?: number;
+    /** Splat radius in screen pixels around the pointer. */
+    radius?: number;
+    /** Multiplier from mouse-delta-per-frame to splat force. */
+    forceGain?: number;
+    /** Per-frame velocity decay factor (relax-back rate for the smear). */
+    dissipation?: number;
+    /** Viscous diffusion strength (Jacobi iteration, 8 iters). */
+    viscosity?: number;
+    /** Chromatic offset = warp amount x this ratio. */
+    chromaticRatio?: number;
+    /** If window.innerWidth <= staticBelow at mount, render static DOM text instead. */
+    staticBelow?: number;
+    /** Whether the fluid sim reacts to pointer movement. */
+    interactive?: boolean;
+    /** Pause the render loop via visibilitychange when the tab/page is hidden. */
+    pauseWhenHidden?: boolean;
+}
+export declare function LiquidText({ text, font, fontSize, fontWeight, lightColor, darkColor, className, strength, radius, forceGain, dissipation, viscosity, chromaticRatio, staticBelow, interactive, pauseWhenHidden, }: LiquidTextProps): import("react").JSX.Element;