fancy-ui-react 0.2.0

package/dist/components/flickering-grid/FlickeringGrid.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hexToRgba(hex) {
+  const clean = hex.replace(/^#/, "");
+  const bigint = Number.parseInt(clean, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b},`;
+}
+function FlickeringGrid({
+  squareSize = 4,
+  gridGap = 6,
+  flickerChance = 0.3,
+  color = "#000000",
+  maxOpacity = 0.3,
+  width,
+  height,
+  className,
+  seed = 1
+}) {
+  const [container, containerRef] = useElementRef();
+  const [canvas, canvasRef] = useElementRef();
+  const squareSizeRef = useLiveRef(squareSize);
+  const gridGapRef = useLiveRef(gridGap);
+  const flickerChanceRef = useLiveRef(flickerChance);
+  const colorRef = useLiveRef(color);
+  const maxOpacityRef = useLiveRef(maxOpacity);
+  const widthRef = useLiveRef(width);
+  const heightRef = useLiveRef(height);
+  useEffect(() => {
+    if (!container || !canvas) return;
+    const context = canvas.getContext("2d");
+    if (!context) return;
+    const ctx = context;
+    const containerEl = container;
+    const canvasEl = canvas;
+    const random = mulberry32(seed);
+    let isInView = false;
+    let animationFrameId;
+    let lastTime = 0;
+    let cols = 0;
+    let rows = 0;
+    let squares = new Float32Array(0);
+    let dpr = 1;
+    function setupCanvas(w, h) {
+      const squareSize2 = squareSizeRef.current;
+      const gridGap2 = gridGapRef.current;
+      const maxOpacity2 = maxOpacityRef.current;
+      dpr = window.devicePixelRatio || 1;
+      canvasEl.width = w * dpr;
+      canvasEl.height = h * dpr;
+      canvasEl.style.width = `${w}px`;
+      canvasEl.style.height = `${h}px`;
+      cols = Math.floor(w / (squareSize2 + gridGap2));
+      rows = Math.floor(h / (squareSize2 + gridGap2));
+      squares = new Float32Array(cols * rows);
+      for (let i = 0; i < squares.length; i++) {
+        squares[i] = random() * maxOpacity2;
+      }
+    }
+    function updateSquares(deltaTime) {
+      const flickerChance2 = flickerChanceRef.current;
+      const maxOpacity2 = maxOpacityRef.current;
+      for (let i = 0; i < squares.length; i++) {
+        if (random() < flickerChance2 * deltaTime) {
+          squares[i] = random() * maxOpacity2;
+        }
+      }
+    }
+    function drawGrid() {
+      const squareSize2 = squareSizeRef.current;
+      const gridGap2 = gridGapRef.current;
+      const colorPrefix = hexToRgba(colorRef.current);
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const opacity = squares[i * rows + j];
+          ctx.fillStyle = `${colorPrefix}${opacity})`;
+          ctx.fillRect(
+            i * (squareSize2 + gridGap2) * dpr,
+            j * (squareSize2 + gridGap2) * dpr,
+            squareSize2 * dpr,
+            squareSize2 * dpr
+          );
+        }
+      }
+    }
+    function updateCanvasSize() {
+      const w = widthRef.current ?? containerEl.clientWidth;
+      const h = heightRef.current ?? containerEl.clientHeight;
+      setupCanvas(w, h);
+    }
+    function animate(time) {
+      if (!isInView) return;
+      const deltaTime = (time - lastTime) / 1e3;
+      lastTime = time;
+      updateSquares(deltaTime);
+      drawGrid();
+      animationFrameId = requestAnimationFrame(animate);
+    }
+    updateCanvasSize();
+    const resizeObserver = new ResizeObserver(() => {
+      updateCanvasSize();
+    });
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        isInView = entry.isIntersecting;
+        if (isInView) {
+          animationFrameId = requestAnimationFrame(animate);
+        }
+      },
+      { threshold: 0 }
+    );
+    resizeObserver.observe(containerEl);
+    intersectionObserver.observe(canvasEl);
+    return () => {
+      if (animationFrameId) cancelAnimationFrame(animationFrameId);
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+    };
+  }, [
+    container,
+    canvas,
+    seed,
+    squareSizeRef,
+    gridGapRef,
+    flickerChanceRef,
+    colorRef,
+    maxOpacityRef,
+    widthRef,
+    heightRef
+  ]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("h-full w-full", className), children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "pointer-events-none" }) });
+}
+export {
+  FlickeringGrid
+};

package/dist/components/flickering-grid/index.d.ts

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

package/dist/components/flip-card/FlipCard.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface FlipCardProps {
+    rotate?: "x" | "y";
+    className?: string;
+    children?: ReactNode;
+    back?: ReactNode;
+}
+export declare function FlipCard({ rotate, className, children, back }: FlipCardProps): import("react").JSX.Element;

package/dist/components/flip-card/FlipCard.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+const rotationClass = {
+  x: ["group-hover:[transform:rotateX(180deg)]", "[transform:rotateX(180deg)]"],
+  y: ["group-hover:[transform:rotateY(180deg)]", "[transform:rotateY(180deg)]"]
+};
+function FlipCard({ rotate = "y", className = "", children, back }) {
+  const rotation = rotationClass[rotate];
+  return /* @__PURE__ */ jsx("div", { className: cn("group h-72 w-56 [perspective:1000px]", className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative h-full rounded-2xl transition-all duration-500 [transform-style:preserve-3d]",
+        rotation[0]
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute size-full overflow-hidden rounded-2xl border [backface-visibility:hidden]", children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute h-full w-full overflow-hidden rounded-2xl border bg-black/80 p-4 text-slate-200 [backface-visibility:hidden]",
+              rotation[1]
+            ),
+            children: back
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  FlipCard
+};

package/dist/components/flip-card/index.d.ts

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

package/dist/components/flip-words/FlipWords.d.ts

@@ -0,0 +1,16 @@
+/**
+ * FlipWords - Cycling word animation
+ *
+ * Cycles through an array of words with per-letter fade-in animation.
+ * Each word fades in letter-by-letter, stays visible for `duration` ms,
+ * then scales/blurs out before the next word appears.
+ */
+export interface FlipWordsProps {
+    /** Array of words to cycle through */
+    words: string[];
+    /** Time each word stays visible (ms) */
+    duration?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function FlipWords({ words, duration, className }: FlipWordsProps): import("react").JSX.Element;

package/dist/components/flip-words/FlipWords.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+/* empty css               */
+const EXIT_MS = 600;
+function FlipWords({ words, duration = 3e3, className }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isExiting, setIsExiting] = useState(false);
+  const timeoutRef = useRef(null);
+  const exitTimeoutRef = useRef(null);
+  const currentWord = words[currentIndex] ?? "";
+  const splitWords = currentWord.split(" ").map((word) => ({
+    word,
+    letters: word.split("")
+  }));
+  const wordsRef = useLiveRef(words);
+  const wordCount = words.length;
+  useEffect(() => {
+    if (isExiting) return;
+    if (wordCount < 2) return;
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      if (wordsRef.current.length < 2) return;
+      setIsExiting(true);
+      if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current);
+      exitTimeoutRef.current = setTimeout(() => {
+        setIsExiting(false);
+        const length = wordsRef.current.length;
+        setCurrentIndex((index) => length === 0 ? 0 : (index + 1) % length);
+      }, EXIT_MS);
+    }, duration);
+  }, [currentIndex, duration, isExiting, wordCount, wordsRef]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "flip-words relative inline-block px-2", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative z-10 inline-block text-left text-neutral-900 dark:text-neutral-100",
+        isExiting ? "flip-words-exit" : "flip-words-enter",
+        className
+      ),
+      children: splitWords.map((wordObj, wordIndex) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "flip-words-word inline-block whitespace-nowrap opacity-0",
+          style: {
+            animation: "flipFadeInWord 0.3s ease forwards",
+            animationDelay: `${wordIndex * 0.3}s`
+          },
+          children: [
+            wordObj.letters.map((letter, letterIndex) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-block opacity-0",
+                style: {
+                  animation: "flipFadeInLetter 0.2s ease forwards",
+                  animationDelay: `${wordIndex * 0.3 + letterIndex * 0.05}s`
+                },
+                children: letter
+              },
+              wordObj.word + letterIndex
+            )),
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: " " })
+          ]
+        },
+        wordObj.word + wordIndex
+      ))
+    },
+    currentIndex
+  ) });
+}
+export {
+  FlipWords
+};

package/dist/components/flip-words/index.d.ts

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

package/dist/components/fluid-cursor/FluidCursor.d.ts

@@ -0,0 +1,61 @@
+import { type ColorRGB, type FluidCursorHandle } from "./fluid-shared.js";
+export interface FluidCursorProps {
+    simResolution?: number;
+    dyeResolution?: number;
+    captureResolution?: number;
+    densityDissipation?: number;
+    velocityDissipation?: number;
+    pressure?: number;
+    pressureIterations?: number;
+    curl?: number;
+    splatRadius?: number;
+    splatForce?: number;
+    shading?: boolean;
+    colorUpdateSpeed?: number;
+    backColor?: ColorRGB | string;
+    transparent?: boolean;
+    fluidColor?: string;
+    fluidColors?: string[];
+    colorIntensity?: number;
+    className?: string;
+    autoSplat?: boolean;
+    autoSplatInterval?: number;
+    interactive?: boolean;
+    pauseWhenHidden?: boolean;
+    splatOnMount?: boolean;
+    allowMultiple?: boolean;
+    contained?: boolean;
+    hdr?: boolean;
+    hdrBoost?: number;
+    /**
+     * Experimental: render the fluid as a retro ordered-dither bitmap.
+     * The dye is snapped to a chunky pixel grid and each color channel is
+     * quantized against a procedural 4x4 Bayer matrix, so dot density
+     * encodes brightness while hues are preserved. Forces the WebGL
+     * renderer (`hdr` is ignored while set). Applied at mount, like the
+     * other simulation props.
+     */
+    dither?: boolean;
+    /** Size of one dithered pixel in CSS pixels (minimum 1). */
+    ditherPixelSize?: number;
+    /** Color levels per channel in dither mode, clamped to [2, 16]. */
+    ditherLevels?: number;
+    /**
+     * Called once the fluid engine is live, with an imperative handle to
+     * drive the simulation programmatically (trace a path via
+     * `moveTo`/`penUp`, fire a one-off `burst`) and read back the actual
+     * `renderLevel`. Pair with `interactive={false}` to drive it entirely
+     * without a real cursor.
+     */
+    onReady?: (handle: FluidCursorHandle) => void;
+}
+export declare function FluidCursor({ simResolution, dyeResolution, captureResolution, densityDissipation, velocityDissipation, pressure, pressureIterations, curl, splatRadius, splatForce, shading, colorUpdateSpeed, backColor, transparent, fluidColor, fluidColors, colorIntensity, className, autoSplat, autoSplatInterval, interactive, pauseWhenHidden, splatOnMount, allowMultiple, contained, hdr, hdrBoost, dither, ditherPixelSize, ditherLevels, onReady, }: FluidCursorProps): import("react").JSX.Element;
+/**
+ * @deprecated Use `FluidCursor` instead. `FluidCursorAdvanced` has been merged into `FluidCursor`.
+ */
+export declare const FluidCursorAdvanced: typeof FluidCursor;
+/**
+ * @deprecated Use `FluidCursorProps` instead. `FluidCursorAdvanced` has been merged into `FluidCursor`.
+ */
+export interface FluidCursorAdvancedProps extends FluidCursorProps {
+}