fancy-ui-react 0.2.0

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

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

package/dist/components/logo-cloud/AnimatedLogoCloud.d.ts

@@ -0,0 +1,13 @@
+export interface Logo {
+    name: string;
+    path: string;
+}
+export interface AnimatedLogoCloudProps {
+    /** Additional CSS classes for the scrolling container */
+    className?: string;
+    /** Optional title displayed above the logos */
+    title?: string;
+    /** Array of logos with name and image path */
+    logos?: Logo[];
+}
+export declare function AnimatedLogoCloud({ className, title, logos }: AnimatedLogoCloudProps): import("react").JSX.Element;

package/dist/components/logo-cloud/AnimatedLogoCloud.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css               */
+function AnimatedLogoCloud({ className, title, logos = [] }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full px-4 md:px-8", children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-center font-medium", children: title }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "logo-cloud-mask group relative mt-6 flex gap-6 overflow-hidden p-2",
+          className
+        ),
+        children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "logo-cloud-scroll flex shrink-0 flex-row justify-around gap-6",
+            "aria-hidden": i > 0 ? "true" : void 0,
+            children: logos.map((logo, j) => /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: logo.path,
+                alt: i === 0 ? logo.name : "",
+                className: "h-10 w-28 px-2 brightness-0 dark:invert"
+              },
+              j
+            ))
+          },
+          i
+        ))
+      }
+    )
+  ] }) });
+}
+export {
+  AnimatedLogoCloud
+};

package/dist/components/logo-cloud/IconLogoCloud.d.ts

@@ -0,0 +1,10 @@
+import type { Logo } from "./AnimatedLogoCloud.js";
+export interface IconLogoCloudProps {
+    /** Additional CSS classes for the grid container */
+    className?: string;
+    /** Optional title displayed above the logos */
+    title?: string;
+    /** Array of logos with name and image path */
+    logos?: Logo[];
+}
+export declare function IconLogoCloud({ className, title, logos }: IconLogoCloudProps): import("react").JSX.Element;

package/dist/components/logo-cloud/IconLogoCloud.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function IconLogoCloud({ className, title, logos = [] }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full py-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-6 px-4 md:px-8", children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground font-medium", children: title }) : null,
+    /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 md:grid-cols-8 lg:grid-cols-8", className), children: logos.map((logo, i) => /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logo.path,
+        alt: logo.name,
+        className: "h-7 w-12 px-2 brightness-0 dark:invert"
+      },
+      i
+    )) })
+  ] }) });
+}
+export {
+  IconLogoCloud
+};

package/dist/components/logo-cloud/StaticLogoCloud.d.ts

@@ -0,0 +1,28 @@
+import type { Logo } from "./AnimatedLogoCloud.js";
+export interface Wordmark {
+    /** The brand/wordmark text */
+    name: string;
+    /** Font size in pixels */
+    size: number;
+    /** Font weight */
+    weight: 400 | 700 | 900;
+    /** Letter-spacing in pixels */
+    tracking?: number;
+    /** Render in italic */
+    italic?: boolean;
+    /** Use a serif font stack instead of the default */
+    serif?: boolean;
+    /** CSS text-transform */
+    transform?: "uppercase" | "lowercase";
+}
+export interface StaticLogoCloudProps {
+    /** Additional CSS classes for the grid container */
+    className?: string;
+    /** Optional title displayed above the logos */
+    title?: string;
+    /** Array of logos with name and image path */
+    logos?: Logo[];
+    /** When provided, renders a static typographic row of wordmarks instead of image logos */
+    wordmarks?: Wordmark[];
+}
+export declare function StaticLogoCloud({ className, title, logos, wordmarks, }: StaticLogoCloudProps): import("react").JSX.Element;

package/dist/components/logo-cloud/StaticLogoCloud.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function StaticLogoCloud({
+  className,
+  title,
+  logos = [],
+  wordmarks
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full py-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-4 px-4 md:px-8", children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground font-medium uppercase", children: title }) : null,
+    wordmarks ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-wrap items-center justify-around gap-x-9 gap-y-5",
+          className
+        ),
+        children: wordmarks.map((mark, i) => {
+          const style = {
+            fontSize: `${mark.size}px`,
+            fontWeight: mark.weight,
+            letterSpacing: mark.tracking !== void 0 ? `${mark.tracking}px` : void 0,
+            fontStyle: mark.italic ? "italic" : void 0,
+            fontFamily: mark.serif ? 'Georgia, "Times New Roman", serif' : void 0,
+            textTransform: mark.transform,
+            opacity: 0.85
+          };
+          return /* @__PURE__ */ jsx("span", { style, children: mark.name }, i);
+        })
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-x-4 md:grid-cols-5 lg:grid-cols-8", className), children: logos.map((logo, i) => /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logo.path,
+        alt: logo.name,
+        className: "h-10 w-28 px-2 brightness-0 dark:invert"
+      },
+      i
+    )) })
+  ] }) });
+}
+export {
+  StaticLogoCloud
+};

package/dist/components/logo-cloud/index.d.ts

@@ -0,0 +1,6 @@
+export { AnimatedLogoCloud } from "./AnimatedLogoCloud.js";
+export type { AnimatedLogoCloudProps, Logo } from "./AnimatedLogoCloud.js";
+export { StaticLogoCloud } from "./StaticLogoCloud.js";
+export type { StaticLogoCloudProps, Wordmark } from "./StaticLogoCloud.js";
+export { IconLogoCloud } from "./IconLogoCloud.js";
+export type { IconLogoCloudProps } from "./IconLogoCloud.js";

package/dist/components/magnetic/Magnetic.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Props for Magnetic — a generic single-child wrapper that translates its
+ * child toward the pointer while the pointer sits inside an activation
+ * field larger than the child's own box, and springs back to rest once
+ * the pointer leaves. The field is the child's bounding rect inflated by
+ * `radius` on every side (not a circular distance-from-center test) so a
+ * wide button and a small icon feel equally "magnetic" at their edges.
+ *
+ * There is deliberately no keyboard/focus equivalent: unlike Reveal
+ * (which reveals on `focusin`), Magnetic never *reacts* to focus —
+ * `focusin` triggers nothing, and Tab never starts, stops, or changes a
+ * pull. That is not the same claim as "focus always finds it at rest":
+ * if a fine pointer happens to be resting inside the field when focus
+ * arrives, the child is already displaced by that pointer, and Tab lands
+ * on it there — the resting position is the pointer's, not the layout's.
+ * Pointer attraction is a fine-pointer affordance, not a state to
+ * replicate for every input method. See `README.md` for the full
+ * reasoning.
+ */
+export interface MagneticProps extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes, merged onto the static outer wrapper. */
+    className?: string;
+    /** Pull multiplier applied to the pointer's offset from the child's center. Higher = a more aggressive follow. */
+    strength?: number;
+    /** Pixels the activation field extends beyond the outer element's own box, on every side. Also sizes the (transparent by default) `::before` halo. */
+    radius?: number;
+    /** Per-axis clamp (px) on the translated offset — a hard travel cap independent of element geometry, `radius`, or `strength`. */
+    max?: number;
+    /** Disables the pull: no listeners are attached at all, and both translation vars are pinned at `0px`. Never touches the wrapped child's own `disabled` state. */
+    disabled?: boolean;
+    /** The single wrapped element — a button, icon link, or card. */
+    children: ReactNode;
+}
+export declare const Magnetic: import("react").ForwardRefExoticComponent<MagneticProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/magnetic/Magnetic.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { observeInView } from "../../internals/motion/in-view.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { rafThrottle } from "../../internals/motion/raf.js";
+/* empty css             */
+const DEFAULT_STRENGTH = 0.35;
+const DEFAULT_RADIUS = 40;
+const DEFAULT_MAX = 24;
+function clamp(value, bound) {
+  return Math.min(bound, Math.max(-bound, value));
+}
+const Magnetic = forwardRef(function Magnetic2({
+  className,
+  strength = DEFAULT_STRENGTH,
+  radius = DEFAULT_RADIUS,
+  max = DEFAULT_MAX,
+  disabled = false,
+  children,
+  style,
+  ...restProps
+}, forwardedRef) {
+  const [outer, outerRefCallback] = useElementRef();
+  const [inner, innerRefCallback] = useElementRef();
+  const composedOuterRef = useComposedRefs(forwardedRef, outerRefCallback);
+  const [magnetState, setMagnetState] = useState("idle");
+  const needsRelease = useRef(true);
+  const reduced = useReducedMotion();
+  const strengthRef = useLiveRef(strength);
+  const maxRef = useLiveRef(max);
+  useEffect(() => {
+    if (!outer || !inner) return;
+    function release() {
+      setMagnetState("idle");
+      inner?.style.setProperty("--ft-magnetic-x", "0px");
+      inner?.style.setProperty("--ft-magnetic-y", "0px");
+      needsRelease.current = false;
+    }
+    if (disabled || reduced) {
+      release();
+      return;
+    }
+    const handlePointerMove = rafThrottle((event) => {
+      if (event.pointerType === "touch" || !event.isPrimary) return;
+      const rect = outer.getBoundingClientRect();
+      const { clientX: px, clientY: py } = event;
+      const inField = px >= rect.left - radius && px <= rect.right + radius && py >= rect.top - radius && py <= rect.bottom + radius;
+      if (!inField) {
+        if (needsRelease.current) release();
+        return;
+      }
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const pullX = clamp((px - centerX) * strengthRef.current, maxRef.current);
+      const pullY = clamp((py - centerY) * strengthRef.current, maxRef.current);
+      setMagnetState("active");
+      needsRelease.current = true;
+      inner.style.setProperty("--ft-magnetic-x", `${pullX}px`);
+      inner.style.setProperty("--ft-magnetic-y", `${pullY}px`);
+    });
+    let windowListenerAttached = false;
+    function attach() {
+      if (windowListenerAttached) return;
+      windowListenerAttached = true;
+      window.addEventListener("pointermove", handlePointerMove, { passive: true });
+    }
+    function detach() {
+      if (!windowListenerAttached) return;
+      windowListenerAttached = false;
+      window.removeEventListener("pointermove", handlePointerMove);
+      release();
+    }
+    const ioHandle = observeInView(outer, {
+      once: false,
+      threshold: 0,
+      rootMargin: `${radius}px`,
+      onChange: (intersecting) => {
+        if (intersecting) attach();
+        else detach();
+      }
+    });
+    document.addEventListener("pointerleave", release, { passive: true });
+    window.addEventListener("blur", release, { passive: true });
+    return () => {
+      ioHandle.destroy();
+      detach();
+      document.removeEventListener("pointerleave", release);
+      window.removeEventListener("blur", release);
+      handlePointerMove.cancel();
+    };
+  }, [outer, inner, disabled, reduced, radius, strengthRef, maxRef]);
+  const mergedStyle = radius === DEFAULT_RADIUS ? style : { ...style, "--ft-magnetic-radius": `${radius}px` };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: composedOuterRef,
+      className: cn("ft-magnetic", className),
+      ...restProps,
+      style: mergedStyle,
+      "data-state": magnetState,
+      "data-disabled": disabled ? "true" : void 0,
+      children: /* @__PURE__ */ jsx("div", { ref: innerRefCallback, className: "ft-magnetic-inner", children })
+    }
+  );
+});
+export {
+  Magnetic
+};

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

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

package/dist/components/marquee/Marquee.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface MarqueeProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Reverse the scroll direction */
+    reverse?: boolean;
+    /** Pause the animation on hover */
+    pauseOnHover?: boolean;
+    /** Scroll vertically instead of horizontally */
+    vertical?: boolean;
+    /** Number of times to repeat the children track */
+    repeat?: number;
+    /** Content to repeat and scroll */
+    children?: ReactNode;
+}
+export declare function Marquee({ className, reverse, pauseOnHover, vertical, repeat, children, }: MarqueeProps): import("react").JSX.Element;

package/dist/components/marquee/Marquee.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css            */
+function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  vertical = false,
+  repeat = 4,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fancy-marquee group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        vertical ? "flex-col" : "flex-row",
+        className
+      ),
+      children: Array.from({ length: repeat }, (_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 justify-around [gap:var(--gap)]",
+            vertical ? "animate-marquee-vertical flex-col" : "animate-marquee flex-row",
+            pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""
+          ),
+          style: { animationDirection: reverse ? "reverse" : "normal" },
+          children
+        },
+        index
+      ))
+    }
+  );
+}
+export {
+  Marquee
+};

package/dist/components/marquee/ReviewCard.d.ts

@@ -0,0 +1,8 @@
+export interface ReviewCardProps {
+    img: string;
+    name: string;
+    username: string;
+    body: string;
+}
+/** A ready-made card for testimonial-style marquees. */
+export declare function ReviewCard({ img, name, username, body }: ReviewCardProps): import("react").JSX.Element;

package/dist/components/marquee/ReviewCard.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+function ReviewCard({ img, name, username, body }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "relative w-64 cursor-pointer overflow-hidden rounded-xl border border-gray-950/[.1] bg-gray-950/[.01] p-4 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+      /* @__PURE__ */ jsx("img", { src: img, className: "rounded-full", width: "32", height: "32", alt: "" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium dark:text-white", children: name }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium dark:text-white/40", children: username })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("blockquote", { className: "mt-2 text-sm", children: body })
+  ] });
+}
+export {
+  ReviewCard
+};

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

@@ -0,0 +1,4 @@
+export { Marquee } from "./Marquee.js";
+export type { MarqueeProps } from "./Marquee.js";
+export { ReviewCard } from "./ReviewCard.js";
+export type { ReviewCardProps } from "./ReviewCard.js";

package/dist/components/matrix-rain/MatrixRain.d.ts

@@ -0,0 +1,35 @@
+/**
+ * MatrixRain - Canvas2D "digital rain" background
+ *
+ * Columns of falling glyphs with a bright leading character and a dimmer
+ * trailing one. The trail comes from repeatedly painting a low-opacity black
+ * rectangle over the previous frame instead of clearing it, so `fadeOpacity`
+ * controls trail length. The canvas fills its parent (`h-full w-full`) and
+ * paints its own black background, so size it via a wrapping element.
+ *
+ * The frame loop pauses while the canvas is scrolled out of view and resumes
+ * from the column state it left off at.
+ */
+export interface MatrixRainProps {
+    /** Glyph color */
+    color?: string;
+    /** Fall speed multiplier (`< 1` slower, `> 1` faster) */
+    speed?: number;
+    /** Column density multiplier (higher = more, narrower columns) */
+    density?: number;
+    /** Font size of each glyph in pixels */
+    glyphSize?: number;
+    /** Opacity of the black overlay painted each frame — controls trail length */
+    fadeOpacity?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the glyph and column-position stream. The same seed always
+     * produces the same rain, which is what makes the effect reproducible in a
+     * test and identical across two mounts of the same instance. Change it to
+     * give two rains on one page different streams — the default is shared, so
+     * two `<MatrixRain />` with no seed start out alike.
+     */
+    seed?: number;
+}
+export declare function MatrixRain({ color, speed, density, glyphSize, fadeOpacity, className, seed, }: MatrixRainProps): import("react").JSX.Element;

package/dist/components/matrix-rain/MatrixRain.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, 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";
+import { observeInView } from "../../internals/motion/in-view.js";
+const GLYPHS = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&";
+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 MatrixRain({
+  color = "#00ff41",
+  speed = 1,
+  density = 1,
+  glyphSize = 16,
+  fadeOpacity = 0.05,
+  className,
+  seed = 1
+}) {
+  const [canvas, canvasRef] = useElementRef();
+  const colorRef = useLiveRef(color);
+  const speedRef = useLiveRef(speed);
+  const fadeOpacityRef = useLiveRef(fadeOpacity);
+  const frameCountRef = useRef(0);
+  useEffect(() => {
+    if (!canvas) return;
+    const context = canvas.getContext("2d");
+    if (!context) return;
+    const ctx = context;
+    const random = mulberry32(seed);
+    const safeGlyphSize = Math.max(1, glyphSize);
+    const safeDensity = Math.max(0.1, density);
+    const columnPitch = safeGlyphSize / safeDensity;
+    let columns = [];
+    let canvasW = 0;
+    let canvasH = 0;
+    let rafId = 0;
+    function randomGlyph() {
+      return GLYPHS.charAt(Math.floor(random() * GLYPHS.length));
+    }
+    function init(w, h) {
+      const colCount = Math.max(1, Math.floor(w / columnPitch));
+      columns = Array.from({ length: colCount }, () => Math.floor(random() * (h / safeGlyphSize)));
+    }
+    function draw() {
+      const w = canvasW;
+      const h = canvasH;
+      const currentColor = colorRef.current;
+      const currentSpeed = speedRef.current;
+      const currentFadeOpacity = fadeOpacityRef.current;
+      ctx.fillStyle = `rgba(0, 0, 0, ${currentFadeOpacity})`;
+      ctx.fillRect(0, 0, w, h);
+      ctx.font = `${glyphSize}px monospace`;
+      ctx.shadowBlur = 8;
+      ctx.shadowColor = currentColor;
+      const rowsPerFrame = Math.max(1, currentSpeed);
+      frameCountRef.current++;
+      const shouldAdvance = currentSpeed >= 1 || frameCountRef.current % Math.round(1 / currentSpeed) === 0;
+      if (shouldAdvance) {
+        for (let i = 0; i < columns.length; i++) {
+          const row = columns[i];
+          const x = i * columnPitch;
+          const y = row * glyphSize;
+          ctx.fillStyle = "#ffffff";
+          ctx.fillText(randomGlyph(), x, y);
+          if (row > 1) {
+            ctx.fillStyle = currentColor;
+            ctx.fillText(randomGlyph(), x, y - glyphSize);
+          }
+          if (y > h && random() > 0.975) {
+            columns[i] = 0;
+          } else {
+            columns[i] = row + rowsPerFrame;
+          }
+        }
+      }
+      ctx.shadowBlur = 0;
+      rafId = requestAnimationFrame(draw);
+    }
+    function start() {
+      if (rafId !== 0) return;
+      rafId = requestAnimationFrame(draw);
+    }
+    function stop() {
+      if (rafId === 0) return;
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      canvasW = canvas.clientWidth;
+      canvasH = canvas.clientHeight;
+      canvas.width = Math.floor(canvasW * dpr);
+      canvas.height = Math.floor(canvasH * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = "black";
+      ctx.fillRect(0, 0, canvasW, canvasH);
+      init(canvasW, canvasH);
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(canvas);
+    start();
+    const inViewHandle = observeInView(canvas, {
+      once: false,
+      threshold: 0,
+      onChange: (intersecting) => {
+        if (intersecting) start();
+        else stop();
+      }
+    });
+    return () => {
+      stop();
+      inViewHandle.destroy();
+      observer.disconnect();
+    };
+  }, [canvas, glyphSize, density, seed, colorRef, speedRef, fadeOpacityRef]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: cn("block h-full w-full bg-black", className) });
+}
+export {
+  MatrixRain
+};

package/dist/components/matrix-rain/index.d.ts

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

package/dist/components/meteors/Meteors.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Meteors - Animated meteor shower effect
+ *
+ * Generates N span elements with randomized positions, delays, and durations
+ * that animate diagonally across the container.
+ */
+export interface MeteorsProps {
+    /** Number of meteors to render */
+    count?: number;
+    /** Additional CSS classes applied to each meteor */
+    className?: string;
+    /**
+     * Seed for the meteor layout. The same seed always produces the same
+     * shower, which is what keeps a server render and its hydration
+     * identical. Change it to give two showers on one page different
+     * layouts — the default is shared, so two `<Meteors />` with no seed
+     * fall the same way.
+     */
+    seed?: number;
+}
+export declare function Meteors({ count, className, seed }: MeteorsProps): import("react").JSX.Element;

package/dist/components/meteors/Meteors.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../utils.js";
+/* empty css            */
+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 createMeteors(count, seed) {
+  const random = mulberry32(seed);
+  return Array.from({ length: count }, () => ({
+    left: `${Math.floor(random() * 800 - 400)}px`,
+    animationDelay: `${(random() * 0.6 + 0.2).toFixed(2)}s`,
+    animationDuration: `${Math.floor(random() * 8 + 2)}s`
+  }));
+}
+function Meteors({ count = 20, className, seed = 1 }) {
+  const meteors = useMemo(() => createMeteors(count, seed), [count, seed]);
+  return /* @__PURE__ */ jsx(Fragment, { children: meteors.map((meteor, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "meteor pointer-events-none absolute top-0 h-0.5 w-0.5 rounded-full bg-slate-500 opacity-0 shadow-[0_0_0_1px_#ffffff10]",
+        "before:absolute before:top-1/2 before:h-px before:w-[50px] before:-translate-y-1/2 before:bg-gradient-to-r before:from-slate-500 before:to-transparent before:content-['']",
+        className
+      ),
+      style: {
+        left: meteor.left,
+        animationDelay: meteor.animationDelay,
+        animationDuration: meteor.animationDuration
+      }
+    },
+    i
+  )) });
+}
+export {
+  Meteors
+};

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

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