fancy-ui-react 0.2.0

package/dist/components/terminal-block/TerminalBlock.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Props for TerminalBlock
+ */
+export interface TerminalBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+    /** Everything the command has printed so far, not the latest chunk. Reassign as lines arrive. */
+    output: string;
+    /** The command that produced the output, shown on the first line after the prompt glyph. */
+    command?: string;
+    /** Prompt glyph in front of the command. */
+    prompt?: string;
+    /** Whether the command is still running. Shows the cursor and keeps the view pinned. */
+    running?: boolean;
+    /** Exit status. Anything other than null or undefined ends the run and shows the footer. */
+    exitCode?: number | null;
+    /** How long the run took, shown next to the exit status. */
+    durationMs?: number;
+    /** Read the SGR subset and colour the output. False renders the same text, unstyled. */
+    ansi?: boolean;
+    /** Height at which the output starts scrolling. */
+    maxHeight?: string;
+    /** Title bar above the output — window dots, a file name, a copy button. */
+    header?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const TerminalBlock: import("react").ForwardRefExoticComponent<TerminalBlockProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/terminal-block/TerminalBlock.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useAutoscroll } from "../../internals/use-autoscroll.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { parseAnsi } from "./ansi.js";
+/* empty css                   */
+const FALLBACK = {
+  "--ft-terminal-black": "oklch(0.44 0.01 260)",
+  "--ft-terminal-red": "oklch(0.7 0.18 22)",
+  "--ft-terminal-green": "oklch(0.78 0.17 150)",
+  "--ft-terminal-yellow": "oklch(0.85 0.15 90)",
+  "--ft-terminal-blue": "oklch(0.74 0.13 250)",
+  "--ft-terminal-magenta": "oklch(0.74 0.18 330)",
+  "--ft-terminal-cyan": "oklch(0.82 0.11 200)",
+  "--ft-terminal-white": "oklch(0.95 0.005 260)"
+};
+function toRows(src, styled) {
+  if (src === "") return [];
+  const normalized = src.replace(/\r\n/g, "\n").replace(/\r/g, "");
+  const lines = [[]];
+  for (const segment of parseAnsi(normalized)) {
+    const parts = segment.text.split("\n");
+    for (let i = 0; i < parts.length; i++) {
+      if (i > 0) lines.push([]);
+      const part = parts[i];
+      if (part === "") continue;
+      lines[lines.length - 1].push({
+        text: part,
+        bold: styled && segment.bold,
+        fg: styled ? segment.fg : null
+      });
+    }
+  }
+  return lines;
+}
+function colour(fg) {
+  if (fg === null) return void 0;
+  return `var(${fg}, ${FALLBACK[fg] ?? "inherit"})`;
+}
+function formatDuration(ms) {
+  if (ms === void 0 || !Number.isFinite(ms) || ms < 0) return null;
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  if (ms < 6e4) {
+    const deciseconds = Math.round(ms / 100);
+    if (deciseconds < 600) return `${(deciseconds / 10).toFixed(1)}s`;
+  }
+  const totalSeconds = Math.round(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds < 10 ? "0" : ""}${seconds}s`;
+}
+const TerminalBlock = forwardRef(function TerminalBlock2({
+  output,
+  command,
+  prompt = "$",
+  running = false,
+  exitCode = null,
+  durationMs,
+  ansi = true,
+  maxHeight = "20rem",
+  header,
+  className,
+  ...rest
+}, ref) {
+  const finished = exitCode !== null && exitCode !== void 0;
+  const ok = exitCode === 0;
+  const duration = formatDuration(durationMs);
+  const lines = toRows(output, ansi);
+  let rows;
+  if (lines.length === 0) {
+    rows = running ? [[]] : [];
+  } else {
+    const last = lines[lines.length - 1];
+    if (!running && lines.length > 1 && last.length === 0) lines.pop();
+    rows = lines;
+  }
+  const [logNode, logRef] = useElementRef();
+  useAutoscroll(logNode, { enabled: running, pinOnConnect: true });
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("ft-terminal overflow-hidden rounded-lg font-mono text-sm", className), ...rest, children: [
+    header ? /* @__PURE__ */ jsx("div", { className: "ft-rule flex items-center gap-2 border-b px-4 py-2", children: header }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: logRef,
+        role: "log",
+        className: "overflow-y-auto px-4 py-3 leading-relaxed",
+        style: { maxHeight },
+        children: [
+          command ? /* @__PURE__ */ jsxs("div", { className: "ft-line flex gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "ft-prompt shrink-0 select-none", "aria-hidden": "true", children: prompt }),
+            /* @__PURE__ */ jsx("span", { className: "ft-wrap", children: command })
+          ] }) : null,
+          rows.map((segments, row) => (
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ jsxs("div", { className: "ft-line ft-wrap", children: [
+              segments.map((segment, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                /* @__PURE__ */ jsx("span", { className: cn(segment.bold && "ft-bold"), style: { color: colour(segment.fg) }, children: segment.text }, i)
+              )),
+              running && row === rows.length - 1 ? /* @__PURE__ */ jsx("span", { className: "ft-cursor", "aria-hidden": "true", children: "▊" }) : null
+            ] }, row)
+          ))
+        ]
+      }
+    ),
+    finished ? /* @__PURE__ */ jsxs("div", { role: "status", className: cn("ft-rule ft-status flex items-center gap-2 border-t px-4 py-2 text-xs", ok && "ft-ok"), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: ok ? "✓" : "✗" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "exited ",
+        exitCode
+      ] }),
+      duration ? /* @__PURE__ */ jsx("span", { className: "ft-muted ml-auto tabular-nums", children: duration }) : null
+    ] }) : null
+  ] });
+});
+export {
+  TerminalBlock
+};

package/dist/components/terminal-block/ansi.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A deliberately small ANSI reader for terminal output surfaces.
+ *
+ * It produces an array of styled segments, never a string of HTML: the renderer
+ * walks the segments with plain markup, so escape sequences can only ever
+ * become styling or nothing at all — never markup.
+ *
+ * Supported: SGR reset (`0`), bold (`1`), and the eight foreground colours in
+ * both their normal (`30`–`37`) and bright (`90`–`97`) ranges, alone or
+ * compounded (`ESC[1;32m`). Everything else — cursor moves, erase sequences,
+ * OSC titles, background colours, 256/truecolour, unknown SGR parameters — is
+ * stripped without leaving a trace in the text.
+ *
+ * Every entry point is total: it returns a value for any input, including a
+ * half-written escape sequence at the end of a stream.
+ */
+/** A run of text sharing one set of attributes. */
+export interface AnsiSegment {
+    /** The text itself, with every escape sequence already removed. */
+    text: string;
+    /** Whether SGR bold is in effect for this run. */
+    bold: boolean;
+    /** Name of the CSS custom property holding the colour, or null for the default. */
+    fg: string | null;
+}
+/** The eight colour names the SGR foreground codes map onto. */
+export declare const ANSI_COLORS: readonly ["black", "red", "green", "yellow", "blue", "magenta", "cyan", "white"];
+export type AnsiColor = (typeof ANSI_COLORS)[number];
+/** Split a chunk of terminal output into styled runs. Never throws. */
+export declare function parseAnsi(src: string): AnsiSegment[];

package/dist/components/terminal-block/ansi.js

@@ -0,0 +1,114 @@
+"use client";
+const ANSI_COLORS = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white"
+];
+const ESC = "\x1B";
+const BEL = "\x07";
+const PARAM_MIN = 48;
+const PARAM_MAX = 63;
+const INTERMEDIATE_MIN = 32;
+const INTERMEDIATE_MAX = 47;
+function fgVar(code) {
+  if (code >= 30 && code <= 37) return `--ft-terminal-${ANSI_COLORS[code - 30]}`;
+  if (code >= 90 && code <= 97) return `--ft-terminal-${ANSI_COLORS[code - 90]}`;
+  return null;
+}
+function applySgr(params, state) {
+  const parts = params.split(";");
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    const code = part === "" ? 0 : Number(part);
+    if (!Number.isInteger(code)) continue;
+    if (code === 0) {
+      state.bold = false;
+      state.fg = null;
+      continue;
+    }
+    if (code === 1) {
+      state.bold = true;
+      continue;
+    }
+    if (code === 38 || code === 48) {
+      i += parts[i + 1] === "5" ? 2 : parts[i + 1] === "2" ? 4 : 1;
+      continue;
+    }
+    const colour = fgVar(code);
+    if (colour !== null) state.fg = colour;
+  }
+}
+function parseAnsi(src) {
+  if (typeof src !== "string" || src.length === 0) return [];
+  if (!src.includes(ESC)) return [{ text: src, bold: false, fg: null }];
+  const out = [];
+  const state = { bold: false, fg: null };
+  let buf = "";
+  let i = 0;
+  function flush() {
+    if (buf === "") return;
+    const last = out[out.length - 1];
+    if (last !== void 0 && last.bold === state.bold && last.fg === state.fg) {
+      last.text += buf;
+    } else {
+      out.push({ text: buf, bold: state.bold, fg: state.fg });
+    }
+    buf = "";
+  }
+  while (i < src.length) {
+    if (src[i] !== ESC) {
+      buf += src[i];
+      i += 1;
+      continue;
+    }
+    flush();
+    const next = src[i + 1];
+    if (next === "[") {
+      let j2 = i + 2;
+      while (j2 < src.length && src.charCodeAt(j2) >= PARAM_MIN && src.charCodeAt(j2) <= PARAM_MAX) {
+        j2 += 1;
+      }
+      const params = src.slice(i + 2, j2);
+      while (j2 < src.length && src.charCodeAt(j2) >= INTERMEDIATE_MIN && src.charCodeAt(j2) <= INTERMEDIATE_MAX) {
+        j2 += 1;
+      }
+      if (j2 >= src.length) break;
+      if (src[j2] === "m") applySgr(params, state);
+      i = j2 + 1;
+      continue;
+    }
+    if (next === "]") {
+      let j2 = i + 2;
+      while (j2 < src.length) {
+        if (src[j2] === BEL) {
+          j2 += 1;
+          break;
+        }
+        if (src[j2] === ESC && src[j2 + 1] === "\\") {
+          j2 += 2;
+          break;
+        }
+        j2 += 1;
+      }
+      i = j2;
+      continue;
+    }
+    if (next === void 0) break;
+    let j = i + 1;
+    while (j < src.length && src.charCodeAt(j) >= INTERMEDIATE_MIN && src.charCodeAt(j) <= INTERMEDIATE_MAX) {
+      j += 1;
+    }
+    i = j < src.length ? j + 1 : src.length;
+  }
+  flush();
+  return out;
+}
+export {
+  ANSI_COLORS,
+  parseAnsi
+};

package/dist/components/terminal-block/index.d.ts

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

package/dist/components/terminal-text/TerminalText.d.ts

@@ -0,0 +1,11 @@
+export interface TerminalTextProps {
+    lines: string[];
+    speed?: number;
+    delay?: number;
+    cursor?: boolean;
+    cursorChar?: string;
+    glitch?: boolean;
+    className?: string;
+    onComplete?: () => void;
+}
+export declare function TerminalText({ lines, speed, delay, cursor, cursorChar, glitch, className, onComplete, }: TerminalTextProps): import("react").JSX.Element;

package/dist/components/terminal-text/TerminalText.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+/* empty css                  */
+const GLITCH_GLYPHS = "アイウエオ@#$%&!?░▒▓█▄▀■□▪▫";
+function TerminalText({
+  lines,
+  speed = 40,
+  delay = 0,
+  cursor = true,
+  cursorChar = "█",
+  glitch = false,
+  className,
+  onComplete
+}) {
+  const [displayedLines, setDisplayedLines] = useState([]);
+  const [done, setDone] = useState(false);
+  const displayedLinesRef = useRef(displayedLines);
+  displayedLinesRef.current = displayedLines;
+  const glitchRef = useRef(glitch);
+  glitchRef.current = glitch;
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const linesRef = useLiveRef(lines);
+  const linesKey = useMemo(() => JSON.stringify(lines), [lines]);
+  const glitchStateRef = useRef(
+    null
+  );
+  const timeoutsRef = useRef([]);
+  function scheduleTimeout(fn, ms) {
+    const id = setTimeout(fn, ms);
+    timeoutsRef.current.push(id);
+    return id;
+  }
+  function clearAllTimeouts() {
+    timeoutsRef.current.forEach(clearTimeout);
+    timeoutsRef.current = [];
+  }
+  function glitchOnce() {
+    const displayed = displayedLinesRef.current;
+    if (displayed.length === 0) return;
+    const linesWithContent = displayed.map((l2, i2) => ({ l: l2, i: i2 })).filter(({ l: l2 }) => l2.length > 0);
+    if (linesWithContent.length === 0) return;
+    const { l, i } = linesWithContent[Math.floor(Math.random() * linesWithContent.length)];
+    const charIdx = Math.floor(Math.random() * l.length);
+    const original = l[charIdx];
+    const fakeGlyph = GLITCH_GLYPHS[Math.floor(Math.random() * GLITCH_GLYPHS.length)];
+    glitchStateRef.current = { lineIdx: i, charIdx, original };
+    setDisplayedLines(
+      (prev) => prev.map((line, idx) => {
+        if (idx !== i) return line;
+        return line.slice(0, charIdx) + fakeGlyph + line.slice(charIdx + 1);
+      })
+    );
+    scheduleTimeout(() => {
+      const glitchState = glitchStateRef.current;
+      if (glitchState && glitchState.lineIdx === i && glitchState.charIdx === charIdx) {
+        setDisplayedLines(
+          (prev) => prev.map((line, idx) => {
+            if (idx !== i) return line;
+            return line.slice(0, charIdx) + original + line.slice(charIdx + 1);
+          })
+        );
+        glitchStateRef.current = null;
+      }
+    }, 100);
+  }
+  function startGlitchLoop(chain) {
+    const scheduleGlitch = () => {
+      const interval = 2e3 + Math.random() * 2e3;
+      chain.id = setTimeout(() => {
+        if (chain.cancelled) return;
+        if (glitchRef.current) glitchOnce();
+        scheduleGlitch();
+      }, interval);
+    };
+    scheduleGlitch();
+  }
+  useEffect(() => {
+    clearAllTimeouts();
+    setDisplayedLines([]);
+    displayedLinesRef.current = [];
+    setDone(false);
+    glitchStateRef.current = null;
+    let totalDelay = delay;
+    const streamed = linesRef.current;
+    for (let lineIdx = 0; lineIdx < streamed.length; lineIdx++) {
+      const line = streamed[lineIdx];
+      const capturedIdx = lineIdx;
+      scheduleTimeout(() => {
+        setDisplayedLines((prev) => [...prev, ""]);
+      }, totalDelay);
+      for (let charIdx = 0; charIdx < line.length; charIdx++) {
+        const capturedChar = charIdx;
+        const capturedLine = line;
+        totalDelay += speed;
+        scheduleTimeout(() => {
+          setDisplayedLines(
+            (prev) => prev.map((l, i) => i === capturedIdx ? capturedLine.slice(0, capturedChar + 1) : l)
+          );
+        }, totalDelay);
+      }
+      totalDelay += speed * 3;
+    }
+    scheduleTimeout(() => {
+      setDone(true);
+      onCompleteRef.current?.();
+    }, totalDelay);
+    return () => {
+      clearAllTimeouts();
+    };
+  }, [linesKey, speed, delay]);
+  useEffect(() => {
+    if (!glitch) {
+      glitchStateRef.current = null;
+      return;
+    }
+    const chain = {
+      cancelled: false,
+      id: null
+    };
+    startGlitchLoop(chain);
+    return () => {
+      chain.cancelled = true;
+      if (chain.id !== null) clearTimeout(chain.id);
+    };
+  }, [glitch]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("terminal-text font-mono text-sm leading-relaxed", className), children: [
+    displayedLines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "min-h-[1.4em]", children: [
+      /* @__PURE__ */ jsx("span", { children: line }),
+      cursor && i === displayedLines.length - 1 && !done ? /* @__PURE__ */ jsx("span", { className: "cursor-blink", children: cursorChar }) : null
+    ] }, i)),
+    cursor && done ? /* @__PURE__ */ jsx("div", { className: "min-h-[1.4em]", children: /* @__PURE__ */ jsx("span", { className: "cursor-blink", children: cursorChar }) }) : null
+  ] });
+}
+export {
+  TerminalText
+};

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

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

package/dist/components/text-generate-effect/TextGenerateEffect.d.ts

@@ -0,0 +1,9 @@
+export interface TextGenerateEffectProps {
+    words: string;
+    filter?: boolean;
+    duration?: number;
+    delay?: number;
+    stagger?: number;
+    className?: string;
+}
+export declare function TextGenerateEffect({ words, filter, duration, delay, stagger, className, }: TextGenerateEffectProps): import("react").JSX.Element;

package/dist/components/text-generate-effect/TextGenerateEffect.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+function TextGenerateEffect({
+  words,
+  filter = true,
+  duration = 0.7,
+  delay = 0,
+  stagger = 200,
+  className
+}) {
+  const wordsArray = words.split(" ");
+  const scopeRef = useRef(null);
+  const filterRef = useLiveRef(filter);
+  const staggerRef = useLiveRef(stagger);
+  useEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope) return;
+    const spans = scope.querySelectorAll("span");
+    const timeout = setTimeout(() => {
+      spans.forEach((span, index) => {
+        const wordTimeout = setTimeout(() => {
+          span.style.opacity = "1";
+          span.style.filter = filterRef.current ? "blur(0px)" : "none";
+        }, index * staggerRef.current);
+        span._tid = wordTimeout;
+      });
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      spans.forEach((span) => {
+        const tid = span._tid;
+        if (tid) clearTimeout(tid);
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: cn("leading-snug tracking-wide", className), children: /* @__PURE__ */ jsx("div", { ref: scopeRef, children: wordsArray.map((word, idx) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-block",
+      style: {
+        opacity: 0,
+        filter: filter ? "blur(10px)" : "none",
+        transition: `opacity ${duration}s, filter ${duration}s`
+      },
+      children: [
+        word,
+        " "
+      ]
+    },
+    word + idx
+  )) }) });
+}
+export {
+  TextGenerateEffect
+};

package/dist/components/text-generate-effect/index.d.ts

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

package/dist/components/text-reveal-card/TextRevealCard.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+/**
+ * TextRevealCard - A card whose hidden text is wiped into view by the
+ * pointer. A clipped reveal layer and a tilted reveal line follow the
+ * pointer's horizontal position; leaving the card eases everything back.
+ */
+export interface TextRevealCardProps {
+    className?: string;
+    /** Number of stars rendered behind the hidden text */
+    starsCount?: number;
+    /** Additional CSS classes applied to each star */
+    starsClass?: string;
+    /** Seed forwarded to the star field (see TextRevealStars) */
+    starsSeed?: number;
+    children?: ReactNode;
+    /** Content of the reveal layer (shown where the pointer has wiped) */
+    text?: ReactNode;
+    /** Content of the background layer (visible before the wipe) */
+    revealText?: ReactNode;
+}
+export declare function TextRevealCard({ className, starsCount, starsClass, starsSeed, children, text, revealText, }: TextRevealCardProps): import("react").JSX.Element;

package/dist/components/text-reveal-card/TextRevealCard.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { TextRevealStars } from "./TextRevealStars.js";
+function TextRevealCard({
+  className = "",
+  starsCount = 130,
+  starsClass = "",
+  starsSeed,
+  children,
+  text,
+  revealText
+}) {
+  const cardRef = useRef(null);
+  const [widthPercentage, setWidthPercentage] = useState(0);
+  const [isMouseOver, setIsMouseOver] = useState(false);
+  const isMouseOverRef = useRef(false);
+  const rotateDeg = (widthPercentage - 50) * 0.1;
+  function mouseMoveHandler(event) {
+    event.preventDefault();
+    const card = cardRef.current;
+    if (card) {
+      const rect = card.getBoundingClientRect();
+      const relativeX = event.clientX - rect.left;
+      setWidthPercentage(relativeX / rect.width * 100);
+    }
+  }
+  function mouseLeaveHandler() {
+    isMouseOverRef.current = false;
+    setIsMouseOver(false);
+    setTimeout(() => {
+      if (!isMouseOverRef.current) {
+        setWidthPercentage(0);
+      }
+    }, 100);
+  }
+  function mouseEnterHandler() {
+    isMouseOverRef.current = true;
+    setIsMouseOver(true);
+  }
+  useEffect(() => {
+    const card = cardRef.current;
+    if (!card) return;
+    const touchMoveHandler = (event) => {
+      event.preventDefault();
+      const rect = card.getBoundingClientRect();
+      const relativeX = event.touches[0].clientX - rect.left;
+      setWidthPercentage(relativeX / rect.width * 100);
+    };
+    card.addEventListener("touchmove", touchMoveHandler, { passive: false });
+    return () => card.removeEventListener("touchmove", touchMoveHandler);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: cardRef,
+      className: cn(
+        "relative w-full max-w-[40rem] overflow-hidden rounded-lg border border-white/[0.08] bg-[#1d1c20] p-4 sm:p-6 md:p-8",
+        className
+      ),
+      role: "presentation",
+      onMouseEnter: mouseEnterHandler,
+      onMouseLeave: mouseLeaveHandler,
+      onMouseMove: mouseMoveHandler,
+      onTouchStart: mouseEnterHandler,
+      onTouchEnd: mouseLeaveHandler,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-40 items-center overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "100%",
+                opacity: widthPercentage > 0 ? 1 : 0,
+                clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`,
+                transition: isMouseOver ? "none" : "all 0.4s ease-out"
+              },
+              className: "absolute z-20 bg-[#1d1c20] will-change-transform",
+              children: text
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                left: `${widthPercentage}%`,
+                transform: `rotate(${rotateDeg}deg)`,
+                opacity: widthPercentage > 0 ? 1 : 0,
+                transition: isMouseOver ? "none" : "all 0.4s ease-out"
+              },
+              className: "absolute z-50 h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent will-change-transform"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,white,transparent)]", children: [
+            revealText,
+            /* @__PURE__ */ jsx(TextRevealStars, { starsCount, className: starsClass, seed: starsSeed })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  TextRevealCard
+};

package/dist/components/text-reveal-card/TextRevealStars.d.ts

@@ -0,0 +1,25 @@
+/**
+ * TextRevealStars - Drifting star field rendered behind the hidden text of
+ * TextRevealCard. Each star fades in, scales up and drifts toward a random
+ * target position on an infinite loop.
+ */
+export interface TextRevealStarsProps {
+    /** Number of stars to render */
+    starsCount?: number;
+    /** Additional CSS classes applied to each star */
+    className?: string;
+    /**
+     * Seed for the star layout. The same seed always produces the same field,
+     * which is what keeps a server render and its hydration identical. Change
+     * it to give two fields on one page different layouts — the default is
+     * shared, so two `<TextRevealStars />` with no seed match.
+     */
+    seed?: number;
+}
+/**
+ * Memoised so a pointer scrub over TextRevealCard — which re-renders the card on
+ * every mouse/touch move — leaves the star field alone. Without it the whole
+ * field (130 spans by default) is re-created and diffed on every pointer event;
+ * the star markup only ever depends on `starsCount`, `className` and `seed`.
+ */
+export declare const TextRevealStars: import("react").NamedExoticComponent<TextRevealStarsProps>;