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:T1912,// Modified from Aceternity UI (https://ui.aceternity.com) // Updated to use custom sparkles component without tsparticles dependency "use client"; import React, { useEffect, useId, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { useRef } from "react"; import { cn } from "cn"; import { SparklesCore } from "@/components/shadcnblocks/sparkles"; export const Cover = ({ children, className, }: { children?: React.ReactNode; className?: string; }) => { const [hovered, setHovered] = useState(false); const ref = useRef(null); const [containerWidth, setContainerWidth] = useState(0); const [beamPositions, setBeamPositions] = useState([]); useEffect(() => { if (ref.current) { setContainerWidth(ref.current?.clientWidth ?? 0); const height = ref.current?.clientHeight ?? 0; const numberOfBeams = Math.floor(height / 10); // Adjust the divisor to control the spacing const positions = Array.from( { length: numberOfBeams }, (_, i) => (i + 1) * (height / (numberOfBeams + 1)) ); setBeamPositions(positions); } }, [ref.current]); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} ref={ref} className="relative hover:bg-neutral-900 group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-2 py-2 transition duration-200 rounded-sm" > {hovered && ( )} {beamPositions.map((position, index) => ( ))} {children}

); }; export const Beam = ({ className, delay, duration, hovered, width = 600, ...svgProps }: { className?: string; delay?: number; duration?: number; hovered?: boolean; width?: number; } & React.ComponentProps) => { const id = useId(); return ( ); }; export const CircleIcon = ({ className, delay, }: { className?: string; delay?: number; }) => { return (

); }; 53:T142e,// Modified from Aceternity UI (https://ui.aceternity.com) // Rewritten to use native Canvas API instead of tsparticles "use client"; import React, { useRef, useEffect, useId, useCallback, useState } from "react"; import { cn } from "cn"; type ParticlesProps = { id?: string; className?: string; background?: string; particleSize?: number; minSize?: number; maxSize?: number; speed?: number; particleColor?: string; particleDensity?: number; }; interface Particle { x: number; y: number; size: number; speedX: number; speedY: number; opacity: number; opacitySpeed: number; opacityDirection: number; } export const SparklesCore = (props: ParticlesProps) => { const { id, className, background = "transparent", minSize = 1, maxSize = 3, speed = 4, particleColor = "#ffffff", particleDensity = 120, } = props; const canvasRef = useRef(null); const containerRef = useRef(null); const particlesRef = useRef([]); const animationFrameRef = useRef(undefined); const generatedId = useId(); const [isVisible, setIsVisible] = useState(false); const createParticle = useCallback( (width: number, height: number): Particle => { const baseSpeed = speed * 0.02; return { x: Math.random() * width, y: Math.random() * height, size: Math.random() * (maxSize - minSize) + minSize, speedX: (Math.random() - 0.5) * baseSpeed, speedY: (Math.random() - 0.5) * baseSpeed, opacity: Math.random(), opacitySpeed: (Math.random() * 0.5 + 0.5) * speed * 0.01, opacityDirection: Math.random() > 0.5 ? 1 : -1, }; }, [minSize, maxSize, speed], ); const initParticles = useCallback( (width: number, height: number) => { // Calculate particle count based on density and area const area = width * height; const baseArea = 400 * 400; const count = Math.floor((particleDensity * area) / baseArea); particlesRef.current = Array.from({ length: count }, () => createParticle(width, height), ); }, [particleDensity, createParticle], ); const hexToRgb = (hex: string): { r: number; g: number; b: number } => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : { r: 255, g: 255, b: 255 }; }; useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const rgb = hexToRgb(particleColor); const resizeCanvas = () => { const rect = container.getBoundingClientRect(); const dpr = window.devicePixelRatio || 1; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; canvas.style.width = `${rect.width}px`; canvas.style.height = `${rect.height}px`; ctx.scale(dpr, dpr); initParticles(rect.width, rect.height); }; const animate = () => { const rect = container.getBoundingClientRect(); ctx.clearRect(0, 0, rect.width, rect.height); particlesRef.current.forEach((particle) => { // Update position particle.x += particle.speedX; particle.y += particle.speedY; // Wrap around edges if (particle.x < 0) particle.x = rect.width; if (particle.x > rect.width) particle.x = 0; if (particle.y < 0) particle.y = rect.height; if (particle.y > rect.height) particle.y = 0; // Update opacity (twinkling effect) particle.opacity += particle.opacitySpeed * particle.opacityDirection; if (particle.opacity >= 1) { particle.opacity = 1; particle.opacityDirection = -1; } else if (particle.opacity <= 0.1) { particle.opacity = 0.1; particle.opacityDirection = 1; } // Draw particle ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${particle.opacity})`; ctx.fill(); }); animationFrameRef.current = requestAnimationFrame(animate); }; resizeCanvas(); animate(); // Trigger fade in requestAnimationFrame(() => setIsVisible(true)); const resizeObserver = new ResizeObserver(resizeCanvas); resizeObserver.observe(container); return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } resizeObserver.disconnect(); }; }, [particleColor, initParticles]); return (

); }; 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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@shadcnblocks","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/shadcnblocks/cover.tsx","content":"$52","type":"registry:component"},{"path":"components/shadcnblocks/sparkles.tsx","content":"$53","type":"registry:component","target":""}],"className":"h-[70svh] min-h-80"}]]}]