4f: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"] 50: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"] 51:T1bdf,"use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef } from "react"; import { createNoise3D } from "simplex-noise"; import { motion } from "motion/react"; interface VortexProps { children?: any; className?: string; containerClassName?: string; particleCount?: number; rangeY?: number; baseHue?: number; baseSpeed?: number; rangeSpeed?: number; baseRadius?: number; rangeRadius?: number; backgroundColor?: string; } export const Vortex = (props: VortexProps) => { const canvasRef = useRef(null); const containerRef = useRef(null); const animationFrameId = useRef(); const particleCount = props.particleCount || 700; const particlePropCount = 9; const particlePropsLength = particleCount * particlePropCount; const rangeY = props.rangeY || 100; const baseTTL = 50; const rangeTTL = 150; const baseSpeed = props.baseSpeed || 0.0; const rangeSpeed = props.rangeSpeed || 1.5; const baseRadius = props.baseRadius || 1; const rangeRadius = props.rangeRadius || 2; const baseHue = props.baseHue || 220; const rangeHue = 100; const noiseSteps = 3; const xOff = 0.00125; const yOff = 0.00125; const zOff = 0.0005; const backgroundColor = props.backgroundColor || "#000000"; let tick = 0; const noise3D = createNoise3D(); let particleProps = new Float32Array(particlePropsLength); let center: [number, number] = [0, 0]; const HALF_PI: number = 0.5 * Math.PI; const TAU: number = 2 * Math.PI; const TO_RAD: number = Math.PI / 180; const rand = (n: number): number => n * Math.random(); const randRange = (n: number): number => n - rand(2 * n); const fadeInOut = (t: number, m: number): number => { let hm = 0.5 * m; return Math.abs(((t + hm) % m) - hm) / hm; }; const lerp = (n1: number, n2: number, speed: number): number => (1 - speed) * n1 + speed * n2; const setup = () => { const canvas = canvasRef.current; const container = containerRef.current; if (canvas && container) { const ctx = canvas.getContext("2d"); if (ctx) { resize(canvas, ctx); initParticles(); draw(canvas, ctx); } } }; const initParticles = () => { tick = 0; // simplex = new SimplexNoise(); particleProps = new Float32Array(particlePropsLength); for (let i = 0; i < particlePropsLength; i += particlePropCount) { initParticle(i); } }; const initParticle = (i: number) => { const canvas = canvasRef.current; if (!canvas) return; let x, y, vx, vy, life, ttl, speed, radius, hue; x = rand(canvas.width); y = center[1] + randRange(rangeY); vx = 0; vy = 0; life = 0; ttl = baseTTL + rand(rangeTTL); speed = baseSpeed + rand(rangeSpeed); radius = baseRadius + rand(rangeRadius); hue = baseHue + rand(rangeHue); particleProps.set([x, y, vx, vy, life, ttl, speed, radius, hue], i); }; const draw = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => { tick++; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvas.width, canvas.height); drawParticles(ctx); renderGlow(canvas, ctx); renderToScreen(canvas, ctx); animationFrameId.current = window.requestAnimationFrame(() => draw(canvas, ctx), ); }; const drawParticles = (ctx: CanvasRenderingContext2D) => { for (let i = 0; i < particlePropsLength; i += particlePropCount) { updateParticle(i, ctx); } }; const updateParticle = (i: number, ctx: CanvasRenderingContext2D) => { const canvas = canvasRef.current; if (!canvas) return; let i2 = 1 + i, i3 = 2 + i, i4 = 3 + i, i5 = 4 + i, i6 = 5 + i, i7 = 6 + i, i8 = 7 + i, i9 = 8 + i; let n, x, y, vx, vy, life, ttl, speed, x2, y2, radius, hue; x = particleProps[i]; y = particleProps[i2]; n = noise3D(x * xOff, y * yOff, tick * zOff) * noiseSteps * TAU; vx = lerp(particleProps[i3], Math.cos(n), 0.5); vy = lerp(particleProps[i4], Math.sin(n), 0.5); life = particleProps[i5]; ttl = particleProps[i6]; speed = particleProps[i7]; x2 = x + vx * speed; y2 = y + vy * speed; radius = particleProps[i8]; hue = particleProps[i9]; drawParticle(x, y, x2, y2, life, ttl, radius, hue, ctx); life++; particleProps[i] = x2; particleProps[i2] = y2; particleProps[i3] = vx; particleProps[i4] = vy; particleProps[i5] = life; (checkBounds(x, y, canvas) || life > ttl) && initParticle(i); }; const drawParticle = ( x: number, y: number, x2: number, y2: number, life: number, ttl: number, radius: number, hue: number, ctx: CanvasRenderingContext2D, ) => { ctx.save(); ctx.lineCap = "round"; ctx.lineWidth = radius; ctx.strokeStyle = `hsla(${hue},100%,60%,${fadeInOut(life, ttl)})`; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath(); ctx.restore(); }; const checkBounds = (x: number, y: number, canvas: HTMLCanvasElement) => { return x > canvas.width || x < 0 || y > canvas.height || y < 0; }; const resize = ( canvas: HTMLCanvasElement, ctx?: CanvasRenderingContext2D, ) => { const { innerWidth, innerHeight } = window; canvas.width = innerWidth; canvas.height = innerHeight; center[0] = 0.5 * canvas.width; center[1] = 0.5 * canvas.height; }; const renderGlow = ( canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, ) => { ctx.save(); ctx.filter = "blur(8px) brightness(200%)"; ctx.globalCompositeOperation = "lighter"; ctx.drawImage(canvas, 0, 0); ctx.restore(); ctx.save(); ctx.filter = "blur(4px) brightness(200%)"; ctx.globalCompositeOperation = "lighter"; ctx.drawImage(canvas, 0, 0); ctx.restore(); }; const renderToScreen = ( canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, ) => { ctx.save(); ctx.globalCompositeOperation = "lighter"; ctx.drawImage(canvas, 0, 0); ctx.restore(); }; const handleResize = () => { const canvas = canvasRef.current; const ctx = canvas?.getContext("2d"); if (canvas && ctx) { resize(canvas, ctx); } }; useEffect(() => { setup(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); if (animationFrameId.current) { cancelAnimationFrame(animationFrameId.current); } }; }, []); return (

{props.children}

); }; 4e:["$","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","simplex-noise",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/simplex-noise","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":"simplex-noise"}]]}]}],["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@aceternity","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/ui/vortex.tsx","content":"$51","type":"registry:ui","target":"components/ui/vortex.tsx"}],"className":"h-[70svh] min-h-80"}]]}]