50: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"] 51: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"] 52:T1c25,"use client"; import { motion, useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; export type GridRevealPattern = "random" | "wave" | "diagonal" | "center"; export const GRID_REVEAL_COLORS = { yellow: "#fde047", red: "#f87171", blue: "#60a5fa", green: "#4ade80", white: "#ffffff", orange: "#fb923c", pink: "#f472b6", violet: "#a78bfa", } as const; export type GridRevealColor = keyof typeof GRID_REVEAL_COLORS; export interface GridRevealProps { ref?: React.Ref; children?: React.ReactNode; rows?: number; cols?: number; color?: GridRevealColor; blockDuration?: number; stagger?: number; duration?: number; pattern?: GridRevealPattern; loop?: boolean; loopDelay?: number; gap?: number; className?: string; gridClassName?: string; blockClassName?: string; autoStart?: boolean; inView?: boolean; once?: boolean; onStart?: () => void; onComplete?: () => void; } export interface GridRevealRef { play: () => void; cover: () => void; reset: () => void; } function shuffledIndexes(count: number) { let seed = 0x9e3779b9 ^ count; const random = () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const arr = Array.from({ length: count }, (_, index) => index); for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } function getDelayFactor( pattern: GridRevealPattern, row: number, col: number, rows: number, cols: number, shuffled: number[], index: number, ) { switch (pattern) { case "wave": return col; case "diagonal": return row + col; case "center": { const midRow = (rows - 1) / 2; const midCol = (cols - 1) / 2; return Math.hypot(row - midRow, col - midCol); } case "random": default: return shuffled[index]; } } function GridReveal({ ref, children, rows = 6, cols = 10, color = "yellow", blockDuration = 0.45, stagger = 0.03, duration, pattern = "random", loop = true, loopDelay = 0.6, gap = 0, className, gridClassName, blockClassName, autoStart = true, inView = false, once = true, onStart, onComplete, }: GridRevealProps) { const [revealed, setRevealed] = React.useState(false); const reducedMotion = useReducedMotion(); const hasPlayedRef = React.useRef(false); const callbacks = React.useRef({ onStart, onComplete }); React.useEffect(() => { callbacks.current = { onStart, onComplete }; }, [onStart, onComplete]); const timers = React.useRef(new Set>()); const schedule = React.useCallback((callback: () => void, delay: number) => { const timer = setTimeout(() => { timers.current.delete(timer); callback(); }, delay); timers.current.add(timer); }, []); const count = rows * cols; const shuffled = React.useMemo(() => shuffledIndexes(count), [count]); const maxFactor = React.useMemo(() => { let max = 0; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const index = row * cols + col; const factor = getDelayFactor(pattern, row, col, rows, cols, shuffled, index); if (factor > max) { max = factor; } } } return max || 1; }, [pattern, rows, cols, shuffled]); const perStepDelay = React.useMemo( () => (duration ? duration / (maxFactor + 1) : stagger), [duration, maxFactor, stagger], ); const blocks = React.useMemo(() => { const items: { key: string; factor: number; }[] = []; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const index = row * cols + col; const factor = getDelayFactor(pattern, row, col, rows, cols, shuffled, index); items.push({ key: `${row}-${col}`, factor, }); } } return items; }, [rows, cols, pattern, shuffled]); const clearTimers = React.useCallback(() => { timers.current.forEach(clearTimeout); timers.current.clear(); }, []); const cycleTime = maxFactor * perStepDelay + blockDuration; const play = React.useCallback(() => { clearTimers(); const revealPhase = () => { setRevealed(true); callbacks.current.onStart?.(); schedule(() => { callbacks.current.onComplete?.(); if (!loop || reducedMotion) return; schedule(() => { setRevealed(false); schedule(revealPhase, cycleTime * 1000 + loopDelay * 1000); }, loopDelay * 1000); }, cycleTime * 1000); }; revealPhase(); }, [clearTimers, schedule, loop, reducedMotion, loopDelay, cycleTime]); const cover = React.useCallback(() => { clearTimers(); setRevealed(false); }, [clearTimers]); const reset = React.useCallback(() => { cover(); hasPlayedRef.current = false; }, [cover]); React.useImperativeHandle( ref, () => ({ play, cover, reset, }), [play, cover, reset], ); React.useEffect(() => { if (autoStart && !inView) { hasPlayedRef.current = true; play(); } return clearTimers; }, [autoStart, inView, play, clearTimers]); const handleViewportEnter = React.useCallback(() => { if (once && hasPlayedRef.current) { return; } hasPlayedRef.current = true; play(); }, [once, play]); return ( {children &&

{children}

} ); } export { GridReveal }; 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/grid-reveal.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]