fancy-ui-react 0.2.0

package/dist/components/dialog/DialogSurface.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useFocusTrap } from "../../internals/focus-trap.js";
+import { useScrollLock } from "../../internals/scroll-lock.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { anchored } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { usePresence } from "../../internals/motion/presence.js";
+/* empty css                   */
+const DialogSurface = forwardRef(function DialogSurface2({
+  open,
+  role,
+  titleId,
+  descriptionId,
+  escape,
+  outsideClick,
+  onDismiss,
+  initialFocus = null,
+  fallbackFocus,
+  exclude,
+  panelClass,
+  children
+}, forwardedRef) {
+  const [panel, setPanelNode] = useElementRef();
+  const trap = useFocusTrap(panel, { initialFocus, fallbackFocus });
+  const presence = usePresence(open, {
+    // The two halves of the focus handshake, at the two moments the source
+    // puts them: `onintrostart` → rearm, `onoutrostart` → returnFocusNow.
+    //
+    // `returnFocusNow` at the dismiss instant is the whole point: waiting
+    // for the trap's own `destroy()` would leave a keyboard user on
+    // `<body>` for the length of the fade, because the panel is marked
+    // `inert` the instant the exit starts.
+    //
+    // `rearm` is the other half. A dialog reopened DURING its exit
+    // reverses instead of remounting, so the trap is never re-created:
+    // without this the panel would come back `aria-modal` and interactive
+    // with focus left on the trigger behind it, Tab walking the page
+    // rather than the panel, and the eager return already spent for the
+    // life of the instance.
+    onEnterStart: () => trap.rearm(),
+    onExitStart: () => trap.returnFocusNow()
+  });
+  useScrollLock(presence.mounted);
+  useDismissable(panel, { onDismiss, escape, outsideClick, exclude, active: open });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    forwardedRef,
+    presence.register("panel", anchored, (entering) => ({
+      entering,
+      duration: DURATIONS.base,
+      exitDuration: DURATIONS.exit
+    }))
+  );
+  const scrimRef = presence.register("scrim", anchored, (entering) => ({
+    entering,
+    scale: false,
+    duration: DURATIONS.base,
+    exitDuration: DURATIONS.exit
+  }));
+  return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrimRef,
+        className: "ft-dialog-scrim fixed inset-0 z-50 bg-black/60",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        role,
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        tabIndex: -1,
+        "data-state": presence.surfaceState,
+        className: cn(
+          "ft-dialog-panel border-border bg-popover text-popover-foreground fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-3 overflow-y-auto rounded-xl border p-5 shadow-2xl",
+          "focus-visible:outline-none",
+          panelClass
+        ),
+        children
+      }
+    )
+  ] }) : null });
+});
+DialogSurface.displayName = "DialogSurface";
+export {
+  DialogSurface
+};

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

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

package/dist/components/dialog/types.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+/**
+ * The contract for `DialogSurface`, the modal-surface primitive `Dialog`
+ * and `AlertDialog` both render through: portal, backdrop scrim, scroll
+ * lock, focus trap, and Escape/outside-click dismissal.
+ *
+ * This is a "compound" in the sense that two public components share one
+ * internal implementation, not in the `RadioGroup`/`RadioGroupItem` sense
+ * of a root publishing context to children a caller composes by hand.
+ * `Dialog` and `AlertDialog` diverge enough in public API — a free-form
+ * footer versus a fixed confirm/cancel pair, `dismissible` versus a
+ * role-appropriate fixed default, `role="dialog"` versus `"alertdialog"` —
+ * that neither should be built as a thin variant of the other. What they
+ * actually share is this plumbing, so that is what is factored out, as
+ * plain props passed straight from each root component to `DialogSurface`.
+ * There is no arbitrary caller-authored markup in between for a context to
+ * reach across — both call sites are this folder's own root components — so
+ * passing props directly says the same thing a context would, with one less
+ * indirection.
+ *
+ * Not exported from `index.ts`: `DialogSurface` is an implementation
+ * detail, not part of the package's public surface.
+ *
+ * One field of the source interface is deliberately absent: `ref`. A
+ * bindable element reference is spelled `forwardRef` here (PORTING.md
+ * §"API contract"), so the panel element arrives through the component's
+ * ref channel rather than through a prop.
+ */
+export interface DialogSurfaceProps {
+    /** Whether the surface is mounted and interactive. */
+    open: boolean;
+    /** Forwarded verbatim to the panel's `role`. */
+    role: "dialog" | "alertdialog";
+    /** Id of the element that labels the surface, or undefined when there is none to point at. */
+    titleId?: string;
+    /** Id of the element that describes the surface, or undefined when there is none to point at. */
+    descriptionId?: string;
+    /** Whether Escape dismisses. Required, not defaulted — every caller must make this call explicitly. */
+    escape: boolean;
+    /** Whether an outside pointerdown dismisses. Required for the same reason as `escape`. */
+    outsideClick: boolean;
+    /** Called for every dismiss trigger this surface owns (Escape, outside click). */
+    onDismiss: () => void;
+    /** Element to focus once the trap activates. Defaults to the first focusable descendant when omitted. */
+    initialFocus?: HTMLElement | null;
+    /**
+     * Where to send focus back on close if the element that had it before
+     * the surface opened is no longer in the document by then (removed by a
+     * re-render, a list row disappearing, a trigger inside a reordering
+     * list). Forwarded to `useFocusTrap`'s `fallbackFocus` — see that file's
+     * doc comment for the full fallback chain. Both `Dialog` and
+     * `AlertDialog` pass their own trigger wrapper here.
+     */
+    fallbackFocus?: () => HTMLElement | null | undefined;
+    /** Elements an outside pointerdown must ignore — typically the trigger that opened this surface. */
+    exclude?: () => (HTMLElement | null)[];
+    /** Extra classes merged onto the panel element. */
+    panelClass?: string;
+    /** The panel's content. */
+    children?: ReactNode;
+}

package/dist/components/dim-siblings/DimSiblings.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Props for DimSiblings.
+ *
+ * DimSiblings is the one component in this collection with zero JavaScript
+ * behaviour: it renders a wrapper and three CSS custom properties, and a
+ * pure `:has()` stylesheet does the rest (hover/focus one direct child,
+ * dim or blur every other one). There is no pointer tracking to clean up
+ * and nothing to gate behind SSR, because there is nothing here that only
+ * runs in the browser.
+ */
+export interface DimSiblingsProps extends Omit<HTMLAttributes<HTMLElement>, "className"> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Which visual property the non-active siblings lose. */
+    effect?: "dim" | "blur" | "both";
+    /** Opacity the non-active siblings settle to. A floor, not zero — full
+     * transparency reads as "the card vanished", not "the card is quiet". */
+    opacity?: number;
+    /** Blur radius, in px, applied only when `effect` includes blur. */
+    blur?: number;
+    /** Transition duration, in ms, for both the opacity and (if active) the blur. */
+    duration?: number;
+    /** The rendered root element — `"ul"`/`"ol"` for a list of cards whose
+     * CSS list semantics need to survive the wrapper. */
+    as?: keyof HTMLElementTagNameMap;
+    /** The sibling group. Every direct child participates. */
+    children: ReactNode;
+}
+export declare const DimSiblings: import("react").ForwardRefExoticComponent<DimSiblingsProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/dim-siblings/DimSiblings.js

@@ -0,0 +1,47 @@
+"use client";
+import { forwardRef, createElement } from "react";
+import { cn } from "../../utils.js";
+/* empty css                 */
+const DEFAULT_OPACITY = 0.4;
+const DEFAULT_DURATION = 150;
+const DimSiblings = forwardRef(function DimSiblings2({
+  effect = "dim",
+  opacity = DEFAULT_OPACITY,
+  blur = 2,
+  duration = DEFAULT_DURATION,
+  as = "div",
+  children,
+  className,
+  style,
+  ...restProps
+}, ref) {
+  const blurPx = effect === "dim" ? 0 : blur;
+  const mergedStyle = {
+    ...style,
+    ["--ft-dimsiblings-opacity"]: opacity === DEFAULT_OPACITY ? void 0 : opacity,
+    ["--ft-dimsiblings-blur"]: `${blurPx}px`,
+    ["--ft-dimsiblings-duration"]: duration === DEFAULT_DURATION ? void 0 : `${duration}ms`
+  };
+  return createElement(
+    as,
+    {
+      // Attribute order mirrors the Svelte source: `class` first (rest
+      // props can never carry it — it is destructured out), then the
+      // spread, then the component's own `data-effect` and style vars
+      // LAST so they win. A forwarded `data-effect` must not slip past
+      // and silently select a different branch of the stylesheet.
+      className: cn("ft-dimsiblings", className),
+      ...restProps,
+      "data-effect": effect,
+      style: mergedStyle,
+      // After the spread for the same reason `bind:this` is a directive
+      // on the Svelte side: nothing a caller forwards can drop the ref.
+      ref
+    },
+    children
+  );
+});
+DimSiblings.displayName = "DimSiblings";
+export {
+  DimSiblings
+};

package/dist/components/dim-siblings/index.d.ts

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

package/dist/components/direction-aware-hover/DirectionAwareHover.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface DirectionAwareHoverProps {
+    imageUrl: string;
+    imageAlt?: string;
+    childrenClass?: string;
+    imageClass?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DirectionAwareHover({ imageUrl, imageAlt, childrenClass: childrenClassProp, imageClass: imageClassProp, className, children, }: DirectionAwareHoverProps): import("react").JSX.Element;

package/dist/components/direction-aware-hover/DirectionAwareHover.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { linear } from "../../internals/motion/easing.js";
+import { usePresence } from "../../internals/motion/presence.js";
+/* empty css                          */
+function fade300(node) {
+  const o = +getComputedStyle(node).opacity;
+  return {
+    delay: 0,
+    duration: 300,
+    easing: linear,
+    css: (t) => `opacity: ${t * o}`
+  };
+}
+function getDirection(ev, obj) {
+  const { width: w, height: h, left, top } = obj.getBoundingClientRect();
+  const x = ev.clientX - left - w / 2 * (w > h ? h / w : 1);
+  const y = ev.clientY - top - h / 2 * (h > w ? w / h : 1);
+  const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
+  return d;
+}
+function mapDirection(d) {
+  switch (d) {
+    case 0:
+      return "top";
+    case 1:
+      return "right";
+    case 2:
+      return "bottom";
+    case 3:
+      return "left";
+    default:
+      return "left";
+  }
+}
+function DirectionAwareHover({
+  imageUrl,
+  imageAlt = "image",
+  childrenClass: childrenClassProp = "",
+  imageClass: imageClassProp = "",
+  className = "",
+  children
+}) {
+  const divRef = useRef(null);
+  const [direction, setDirection] = useState(null);
+  const [isTouched, setIsTouched] = useState(false);
+  const isMobileRef = useRef(false);
+  const touchTimerRef = useRef(null);
+  const lastDirectionRef = useRef(null);
+  if (direction !== null) lastDirectionRef.current = direction;
+  const overlayDirection = direction ?? lastDirectionRef.current;
+  const overlayPresence = usePresence(direction !== null);
+  const overlayRef = overlayPresence.register(fade300);
+  const contentPresence = usePresence(direction !== null || isTouched);
+  const contentRef = contentPresence.register(fade300);
+  useEffect(() => {
+    const detectMobile = () => {
+      isMobileRef.current = window.matchMedia("(max-width: 768px)").matches || "ontouchstart" in window;
+    };
+    detectMobile();
+    window.addEventListener("resize", detectMobile);
+    return () => {
+      window.removeEventListener("resize", detectMobile);
+      if (touchTimerRef.current) {
+        clearTimeout(touchTimerRef.current);
+      }
+    };
+  }, []);
+  function handleMouseEnter(event) {
+    if (isMobileRef.current) return;
+    if (!divRef.current) return;
+    const fetchedDirection = getDirection(event, divRef.current);
+    setDirection(mapDirection(fetchedDirection));
+  }
+  function handleMouseLeave() {
+    if (isMobileRef.current) return;
+    setDirection(null);
+  }
+  function handleTouchEnd() {
+    if (touchTimerRef.current) {
+      clearTimeout(touchTimerRef.current);
+      touchTimerRef.current = null;
+    }
+    setTimeout(() => {
+      setDirection(null);
+      setIsTouched(false);
+    }, 300);
+  }
+  function handleTouchStart(event) {
+    if (!isMobileRef.current) return;
+    setIsTouched(true);
+    if (!divRef.current) return;
+    const touch = event.touches[0];
+    const fetchedDirection = getDirection(
+      { clientX: touch.clientX, clientY: touch.clientY },
+      divRef.current
+    );
+    setDirection(mapDirection(fetchedDirection));
+    if (touchTimerRef.current) clearTimeout(touchTimerRef.current);
+    touchTimerRef.current = setTimeout(() => {
+      handleTouchEnd();
+    }, 3e3);
+  }
+  const containerClass = cn(
+    // Port-added anchor for the colocated CSS — see direction-aware-hover.css.
+    "direction-aware-hover",
+    "group/card relative overflow-hidden rounded-lg bg-transparent transition-all duration-300",
+    "h-48 w-48",
+    "sm:h-64 sm:w-64",
+    "md:h-80 md:w-80",
+    "lg:h-96 lg:w-96",
+    "xl:h-[28rem] xl:w-[28rem]",
+    "touch-manipulation",
+    "active:scale-[0.98]",
+    "md:active:scale-100",
+    className
+  );
+  const imageClass = cn(
+    "h-full w-full object-cover transition-transform duration-300",
+    "scale-125",
+    "sm:scale-[1.35]",
+    "md:scale-150",
+    imageClassProp
+  );
+  const childrenClass = cn(
+    "absolute z-40 text-white transition-opacity duration-300",
+    "bottom-2 left-2 text-sm",
+    "sm:bottom-3 sm:left-3 sm:text-base",
+    "md:bottom-4 md:left-4 md:text-lg",
+    childrenClassProp
+  );
+  const overlayClass = (() => {
+    const baseClasses = "absolute inset-0 z-10 transition-all duration-300";
+    const backgroundClasses = "bg-black/40 dark:bg-black/60";
+    let transformClasses = "";
+    switch (overlayDirection) {
+      case "top":
+        transformClasses = "-translate-y-full group-hover/card:translate-y-0";
+        break;
+      case "bottom":
+        transformClasses = "translate-y-full group-hover/card:translate-y-0";
+        break;
+      case "left":
+        transformClasses = "-translate-x-full group-hover/card:translate-x-0";
+        break;
+      case "right":
+        transformClasses = "translate-x-full group-hover/card:translate-x-0";
+        break;
+      default:
+        transformClasses = "";
+    }
+    return cn(baseClasses, backgroundClasses, transformClasses);
+  })();
+  const imageContainerClass = cn(
+    "relative size-full bg-gray-50 transition-transform duration-300 dark:bg-black",
+    {
+      "translate-y-2 md:translate-y-5": direction === "top",
+      "-translate-y-2 md:-translate-y-5": direction === "bottom",
+      "translate-x-2 md:translate-x-5": direction === "left",
+      "-translate-x-2 md:-translate-x-5": direction === "right"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: divRef,
+      className: containerClass,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      role: "figure",
+      children: /* @__PURE__ */ jsxs("div", { className: "relative size-full overflow-hidden", children: [
+        overlayPresence.mounted && /* @__PURE__ */ jsx("div", { ref: overlayRef, className: overlayClass }),
+        /* @__PURE__ */ jsx("div", { className: imageContainerClass, children: /* @__PURE__ */ jsx("img", { src: imageUrl, alt: imageAlt, className: imageClass, width: "1000", height: "1000" }) }),
+        contentPresence.mounted && /* @__PURE__ */ jsx("div", { ref: contentRef, className: childrenClass, children })
+      ] })
+    }
+  );
+}
+export {
+  DirectionAwareHover
+};

package/dist/components/direction-aware-hover/index.d.ts

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

package/dist/components/displacement-text/DisplacementText.d.ts

@@ -0,0 +1,26 @@
+/**
+ * DisplacementText - Large text rendered as a WebGL plane that bulges toward the
+ * viewer near the cursor.
+ *
+ * The text is rasterized to a 2048x2048 canvas and uploaded as a texture; a
+ * vertex shader offsets each vertex's `z` by its distance to a `uDisplacement`
+ * uniform, which a raycast against an invisible hit-plane updates on every
+ * `pointermove`.
+ */
+export interface DisplacementTextProps {
+    /** Text to display */
+    text?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family */
+    font?: string;
+    /** Fixed text color (overrides theme colors) */
+    color?: string;
+    /** Text color in light mode */
+    lightColor?: string;
+    /** Text color in dark mode */
+    darkColor?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function DisplacementText({ text, fontSize, font, color, lightColor, darkColor, className, }: DisplacementTextProps): import("react").JSX.Element;

package/dist/components/displacement-text/DisplacementText.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import * as THREE from "three";
+import { cn } from "../../utils.js";
+const vertexShader = `
+		varying vec2 vUv;
+		uniform vec3 uDisplacement;
+
+		float easeInOutCubic(float x) {
+			return x < 0.5 ? 4.0 * x * x * x : 1.0 - pow(-2.0 * x + 2.0, 3.0) / 2.0;
+		}
+
+		float map(float value, float min1, float max1, float min2, float max2) {
+			return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+		}
+
+		void main() {
+			vUv = uv;
+			vec3 displaced = position;
+			vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+			float dist = length(uDisplacement - worldPosition.rgb);
+			float minDistance = 3.0;
+
+			if (dist < minDistance) {
+				float mapped = map(dist, 0.0, minDistance, 1.0, 0.0);
+				displaced.z += easeInOutCubic(mapped);
+			}
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);
+		}
+	`;
+const fragmentShader = `
+		varying vec2 vUv;
+		uniform sampler2D uTexture;
+
+		void main() {
+			gl_FragColor = texture2D(uTexture, vUv);
+		}
+	`;
+function createTextTexture(t, size, f, c) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 2048;
+  canvas.height = 2048;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return new THREE.CanvasTexture(canvas);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.font = `bold ${size}px ${f}`;
+  ctx.fillStyle = c;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(t, canvas.width / 2, canvas.height / 2);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.needsUpdate = true;
+  return texture;
+}
+function DisplacementText({
+  text = "Hover Me",
+  fontSize = 200,
+  font = "Inter, sans-serif",
+  color,
+  lightColor = "#000000",
+  darkColor = "#ffffff",
+  className = ""
+}) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const width = rect.width || 1;
+    const height = rect.height || 1;
+    if (height === 0) return;
+    const scene = new THREE.Scene();
+    scene.background = null;
+    const cameraDistance = 8;
+    const aspect = width / height;
+    const camera = new THREE.OrthographicCamera(
+      -cameraDistance * aspect,
+      cameraDistance * aspect,
+      cameraDistance,
+      -cameraDistance,
+      0.01,
+      1e3
+    );
+    camera.position.set(0, -10, 5);
+    camera.lookAt(0, 0, 0);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setClearColor(0, 0);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(width, height, false);
+    renderer.domElement.style.width = "100%";
+    renderer.domElement.style.height = "100%";
+    container.appendChild(renderer.domElement);
+    const geometry = new THREE.PlaneGeometry(15, 15, 100, 100);
+    const getActiveColor = () => color || (document.documentElement.classList.contains("dark") ? darkColor : lightColor);
+    let currentColor = getActiveColor();
+    let textTexture = createTextTexture(text, fontSize, font, currentColor);
+    const shaderMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        uTexture: { value: textTexture },
+        uDisplacement: { value: new THREE.Vector3(0, 0, 0) }
+      },
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      depthWrite: false,
+      side: THREE.DoubleSide
+    });
+    const plane = new THREE.Mesh(geometry, shaderMaterial);
+    plane.rotation.z = Math.PI / 4;
+    scene.add(plane);
+    const hitGeometry = new THREE.PlaneGeometry(500, 500);
+    const hitMaterial = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 });
+    const hitPlane = new THREE.Mesh(hitGeometry, hitMaterial);
+    scene.add(hitPlane);
+    const raycaster = new THREE.Raycaster();
+    const pointer = new THREE.Vector2();
+    const onPointerMove = (e) => {
+      const bounds = container.getBoundingClientRect();
+      pointer.x = (e.clientX - bounds.left) / bounds.width * 2 - 1;
+      pointer.y = -((e.clientY - bounds.top) / bounds.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, camera);
+      const [hit] = raycaster.intersectObject(hitPlane);
+      if (hit) shaderMaterial.uniforms.uDisplacement.value.copy(hit.point);
+    };
+    container.addEventListener("pointermove", onPointerMove);
+    const handleResize = () => {
+      const r = container.getBoundingClientRect();
+      if (r.height === 0) return;
+      const a = r.width / r.height;
+      camera.left = -cameraDistance * a;
+      camera.right = cameraDistance * a;
+      camera.updateProjectionMatrix();
+      renderer.setSize(r.width, r.height, false);
+    };
+    window.addEventListener("resize", handleResize);
+    let animationId = 0;
+    const animate = () => {
+      animationId = requestAnimationFrame(animate);
+      renderer.render(scene, camera);
+    };
+    animate();
+    const observer = new MutationObserver(() => {
+      const next = getActiveColor();
+      if (next !== currentColor) {
+        const tex = createTextTexture(text, fontSize, font, next);
+        shaderMaterial.uniforms.uTexture.value = tex;
+        textTexture.dispose();
+        textTexture = tex;
+        currentColor = next;
+      }
+    });
+    if (!color)
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      container.removeEventListener("pointermove", onPointerMove);
+      cancelAnimationFrame(animationId);
+      observer.disconnect();
+      if (renderer.domElement.parentNode === container) container.removeChild(renderer.domElement);
+      renderer.dispose();
+      textTexture.dispose();
+      geometry.dispose();
+      shaderMaterial.dispose();
+      hitGeometry.dispose();
+      hitMaterial.dispose();
+    };
+  }, [text, fontSize, font, color, lightColor, darkColor]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      role: "img",
+      "aria-label": text,
+      className: cn("relative h-[400px] w-full", className)
+    }
+  );
+}
+export {
+  DisplacementText
+};

package/dist/components/displacement-text/index.d.ts

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