52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1051,"use client"; import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react"; import { cn } from "../../utils"; import { TextRevealStars } from "./TextRevealStars"; /** * 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 function TextRevealCard({ className = "", starsCount = 130, starsClass = "", starsSeed, children, text, revealText, }: TextRevealCardProps) { const cardRef = useRef(null); const [widthPercentage, setWidthPercentage] = useState(0); const [isMouseOver, setIsMouseOver] = useState(false); // Mirror for the leave-handler's timeout: its closure must read the // CURRENT hover state 100ms later, not the render it was created in. const isMouseOverRef = useRef(false); const rotateDeg = (widthPercentage - 50) * 0.1; function mouseMoveHandler(event: MouseEvent) { 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); } // touchmove is attached natively and passive: the card only tracks the // finger, it never cancels the gesture, so the page keeps scrolling // vertically (`touch-pan-y`). useEffect(() => { const card = cardRef.current; if (!card) return; const touchMoveHandler = (event: TouchEvent) => { const rect = card.getBoundingClientRect(); const relativeX = event.touches[0]!.clientX - rect.left; setWidthPercentage((relativeX / rect.width) * 100); }; card.addEventListener("touchmove", touchMoveHandler, { passive: true }); return () => card.removeEventListener("touchmove", touchMoveHandler); }, []); return (

{children}

{/* Reveal layer */}

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" > {text}

{/* Reveal line */}

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" >

{/* Background text + stars */}

{revealText}

); } 55:Te07,"use client"; import { memo, useMemo, type CSSProperties } from "react"; import { cn } from "../../utils"; import "./text-reveal-stars.css"; /** * 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 `` with no seed match. */ seed?: number; } interface StarData { top: string; left: string; targetTop: string; targetLeft: string; opacity: number; duration: number; } /** * mulberry32 — a tiny deterministic PRNG. `Math.random()` cannot be used * here: the layout is computed in the render path, which runs once on the * server and again during client hydration, and the two would disagree on * every value — a hydration mismatch React may resolve by keeping the SERVER * attributes. A seed keeps both renders identical AND keeps the stars in the * server markup. */ function mulberry32(seed: number): () => number { let state = seed >>> 0; return () => { state = (state + 0x6d2b79f5) >>> 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 createStars(starsCount: number, seed: number): StarData[] { const random = mulberry32(seed); const randomMove = () => random() * 4 - 2; return Array.from({ length: starsCount }, () => ({ top: `calc(${random() * 100}% + ${randomMove()}px)`, left: `calc(${random() * 100}% + ${randomMove()}px)`, targetTop: `calc(${random() * 100}% + ${randomMove()}px)`, targetLeft: `calc(${random() * 100}% + ${randomMove()}px)`, opacity: random(), duration: random() * 10 + 20, })); } /** * 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 const TextRevealStars = memo(function TextRevealStars({ starsCount = 130, className, seed = 1, }: TextRevealStarsProps) { // Recomputed only when `starsCount` or `seed` changes — the same dependency // the Svelte source's `$derived` tracks. A plain render-time call would // reshuffle the field on every unrelated re-render. const stars = useMemo(() => createStars(starsCount, seed), [starsCount, seed]); return ( // `text-reveal-stars` is port-added: the CSS anchor class for the // compiler-scoped `.star-animate` rule (see text-reveal-stars.css).

{stars.map((star, i) => ( ))}

); }); 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/text-reveal-card/TextRevealCard.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/text-reveal-card/TextRevealCard.tsx"},{"path":"react/src/components/text-reveal-card/TextRevealStars.tsx","content":"$55","type":"registry:ui","target":"@ui/fancy/components/text-reveal-card/TextRevealStars.tsx"},{"path":"react/src/components/text-reveal-card/index.ts","content":"\"use client\";\n\nexport { TextRevealCard } from \"./TextRevealCard\";\nexport type { TextRevealCardProps } from \"./TextRevealCard\";\nexport { TextRevealStars } from \"./TextRevealStars\";\nexport type { TextRevealStarsProps } from \"./TextRevealStars\";\n","type":"registry:ui","target":"@ui/fancy/components/text-reveal-card/index.ts"},{"path":"react/src/components/text-reveal-card/text-reveal-stars.css","content":"/* The keyframes were declared `:global` in the Svelte source; the emitted\n name `star-drift` is the visual contract and is kept identical. */\n@keyframes star-drift {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(1);\n\t}\n\t50% {\n\t\topacity: var(--star-opacity, 0.5);\n\t\ttransform: scale(1.2);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale(0);\n\t\ttop: var(--target-top);\n\t\tleft: var(--target-left);\n\t}\n}\n\n/* `.text-reveal-stars` is a port-added anchor: the Svelte compiler scoped\n this rule and the source has no root class to anchor on, so the slug class\n keeps the generic `.star-animate` name from leaking globally. */\n.text-reveal-stars .star-animate {\n\tanimation: star-drift linear infinite;\n}\n","type":"registry:ui","target":"@ui/fancy/components/text-reveal-card/text-reveal-stars.css"}],"className":"h-[70svh] min-h-80"}]]}]