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:T231f,'use client'; import { useEffect, useRef } from 'react'; import { cn } from '@/lib/utils'; interface DotWaveProps { dotGap?: number; sphereRadius?: number; dotRadiusMax?: number; speed?: number; expansionSpeed?: number; repeatAnimation?: boolean; lightIntensity?: number; fadeIntensity?: number; followMouse?: boolean; className?: string; dotClassName?: string; children?: React.ReactNode; bgColor?: string; dotColor?: string; } class Ease { value: number; begin: number; end: number; pow: number; maxDuration: number; time: number; duration: number; constructor(value: number, pow: number, duration: number, timeBegin: number) { this.value = this.begin = this.end = value; this.pow = pow; this.maxDuration = duration; this.time = timeBegin; this.duration = 0; this.init(); } init() { this.begin = this.end; this.end = Math.random(); this.time = 0; this.duration = Math.sqrt(Math.abs(this.end - this.begin)) * this.maxDuration; } update(timeChange = 1) { let timeRatio = this.time / this.duration; if (timeRatio < 0.5) { timeRatio = 0.5 * Math.pow(timeRatio * 2, this.pow); } else { timeRatio = 1 - 0.5 * Math.pow((1 - timeRatio) * 2, this.pow); } this.value = this.begin + timeRatio * (this.end - this.begin); this.time += timeChange; if (this.time > this.duration) { this.init(); } } } export function DotWave({ dotGap = 20, sphereRadius = 200, dotRadiusMax = 3, speed = 0.15, expansionSpeed = 150, repeatAnimation = true, lightIntensity = 0.5, fadeIntensity = 0.15, followMouse = false, className, dotClassName, children, bgColor = '#000000', dotColor = '#ffffff', }: DotWaveProps) { const canvasRef = useRef(null); const containerRef = useRef(null); const stateRef = useRef({ canvas: null as HTMLCanvasElement | null, ctx: null as CanvasRenderingContext2D | null, center: { x: 0, y: 0 }, windowSize: { w: 0, h: 0 }, circleNumber: { x: 0, y: 0 }, posStart: { x: 0, y: 0 }, easeX: new Ease(0.5, 2, 60, 0), easeY: new Ease(0.5, 2, 60, 0), animationId: 0, expansionRadius: 0, startTime: 0, bgColor: '#000000', dotColor: '#ffffff', }); useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const state = stateRef.current; state.canvas = canvas; state.ctx = ctx; state.startTime = Date.now(); state.expansionRadius = 0; const updateColors = () => { const computedStyle = getComputedStyle(container); const containerBg = computedStyle.backgroundColor; const containerColor = computedStyle.color; state.bgColor = containerBg && containerBg !== 'rgba(0, 0, 0, 0)' && containerBg !== 'transparent' ? containerBg : bgColor; state.dotColor = containerColor && containerColor !== 'rgba(0, 0, 0, 0)' && containerColor !== 'transparent' ? containerColor : dotColor; }; updateColors(); const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const handleThemeChange = () => updateColors(); mediaQuery.addEventListener('change', handleThemeChange); const handleResize = () => { state.windowSize = { w: window.innerWidth, h: window.innerHeight, }; canvas.width = state.windowSize.w; canvas.height = state.windowSize.h; state.center = { x: state.windowSize.w / 2, y: state.windowSize.h / 2, }; state.startTime = Date.now(); state.expansionRadius = 0; setDotParams(); }; const setDotParams = () => { state.circleNumber = { x: Math.floor(state.windowSize.w / dotGap) + 2, y: Math.floor(state.windowSize.h / dotGap) + 1, }; state.posStart = { x: Math.round( (state.windowSize.w - (state.circleNumber.x - 1) * dotGap) / 2, ), y: Math.round( (state.windowSize.h - (state.circleNumber.y - 1) * dotGap) / 2, ), }; }; const getDistance = (x: number, y: number) => { const distanceX = x - state.center.x; const distanceY = y - state.center.y; return Math.sqrt(distanceX * distanceX + distanceY * distanceY); }; const drawDots = () => { ctx.beginPath(); ctx.fillStyle = state.bgColor; ctx.rect(0, 0, state.windowSize.w, state.windowSize.h); ctx.fill(); ctx.closePath(); const elapsed = Date.now() - state.startTime; state.expansionRadius = (elapsed / 1000) * expansionSpeed; const maxScreenRadius = Math.sqrt( state.windowSize.w * state.windowSize.w + state.windowSize.h * state.windowSize.h, ) / 2; if (repeatAnimation && state.expansionRadius > maxScreenRadius + 100) { state.startTime = Date.now(); state.expansionRadius = 0; } for (let i = 0; i < state.circleNumber.x; i++) { for (let j = 0; j < state.circleNumber.y; j++) { const gapX = j % 2 === 0 ? -dotGap / 2 : 0; const x = state.posStart.x + gapX + i * dotGap; const y = state.posStart.y + j * dotGap; const distance = getDistance(x, y); if (distance <= maxScreenRadius) { const baseAlpha = lightIntensity; const radius = dotRadiusMax; const waveFrontWidth = 80; const distanceFromWave = Math.abs(distance - state.expansionRadius); const fadeOutDistance = 150; let dotAlpha = 0; if (distance <= state.expansionRadius) { const behindWave = state.expansionRadius - distance; if (distanceFromWave < waveFrontWidth) { const glowIntensity = 1 - distanceFromWave / waveFrontWidth; dotAlpha = Math.min(baseAlpha + glowIntensity * 0.6, 1); } else if (behindWave < fadeOutDistance) { const fadeProgress = behindWave / fadeOutDistance; dotAlpha = baseAlpha * (1 - fadeProgress * (1 - fadeIntensity)); } else { dotAlpha = baseAlpha * fadeIntensity; } } if (dotAlpha > 0) { ctx.save(); ctx.globalAlpha = Math.min(dotAlpha, 1); if ( distanceFromWave < waveFrontWidth && distance <= state.expansionRadius ) { const glowIntensity = 1 - distanceFromWave / waveFrontWidth; ctx.shadowBlur = 15 * glowIntensity; ctx.shadowColor = state.dotColor; } ctx.beginPath(); ctx.fillStyle = state.dotColor; ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); ctx.restore(); } } } } }; const moveCenter = (e: MouseEvent | null) => { if (e === null) { state.easeX.update(speed); state.easeY.update(speed); state.center.x = state.easeX.value * state.windowSize.w; state.center.y = state.easeY.value * state.windowSize.h; } else { state.center.x = e.pageX; state.center.y = e.pageY; } }; const render = () => { drawDots(); }; const draw = () => { state.animationId = requestAnimationFrame(draw); render(); }; const handleMouseMove = (e: MouseEvent) => { if (followMouse) { moveCenter(e); } }; handleResize(); window.addEventListener('resize', handleResize); canvas.addEventListener('mousemove', handleMouseMove); draw(); return () => { window.removeEventListener('resize', handleResize); canvas.removeEventListener('mousemove', handleMouseMove); mediaQuery.removeEventListener('change', handleThemeChange); cancelAnimationFrame(state.animationId); }; }, [ dotGap, sphereRadius, dotRadiusMax, speed, expansionSpeed, repeatAnimation, lightIntensity, fadeIntensity, followMouse, bgColor, dotColor, ]); 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/dot-wave.tsx","content":"$52","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]