The hell is this?

This is chemical burn. It'll hurt more than you've ever been burned and you'll have a scar.

); } `,__rawStringJsx__:`import React from "react"; import { Vortex } from "../ui/vortex"; export function VortexDemo() { return ( (

The hell is this?

This is chemical burn. It'll hurt more than you've ever been burned and you'll have a scar.

) ); } `,__src__:"src/registry/default/example/vortex-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Vortex"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/vortex"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"VortexDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-[calc(100%-4rem)] mx-auto rounded-md h-[30rem] overflow-hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Vortex"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"black"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center flex-col justify-center px-2 md:px-10 py-4 w-full h-full"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-white text-2xl md:text-6xl font-bold text-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" The hell is this?"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-white text-sm md:text-2xl max-w-xl mt-6 text-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" This is chemical burn. It"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"ll hurt more than you"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"ve ever been"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" burned and you"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"ll have a scar."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex flex-col sm:flex-row items-center gap-4 mt-6"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 bg-blue-600 hover:bg-blue-700 transition duration-200 rounded-lg text-white shadow-[0px_2px_0px_0px_#FFFFFF40_inset]"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Order now"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 text-white "'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Watch trailer"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(o,{defaultValue:"manual",children:[(0,n.jsxs)(c,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(B,{value:"cli",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(a,{children:"Run the following command"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx aceternity-ui@latest add vortex `,__npmCommand__:`npx aceternity-ui@latest add vortex `,__yarnCommand__:`npx aceternity-ui@latest add vortex `,__pnpmCommand__:`pnpm dlx aceternity-ui@latest add vortex `,__bunCommand__:`bunx --bun aceternity-ui@latest add vortex `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"aceternity-ui@latest"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"vortex"})]})})})})]})}),(0,n.jsx)(B,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(a,{children:"Install dependencies"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge simplex-noise `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"simplex-noise"})]})})})}),(0,n.jsx)(a,{children:"Add util file"}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,n.jsx)(a,{children:"Copy the source code"}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.code,{children:"components/ui/vortex.tsx"})}),(0,n.jsx)(p,{name:"vortex",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { cn } from "@/lib/utils"; import React, { useEffect, useRef } from "react"; import { createNoise3D } from "simplex-noise"; import { motion } from "framer-motion"; 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 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); 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(); }; useEffect(() => { setup(); window.addEventListener("resize", () => { const canvas = canvasRef.current; const ctx = canvas?.getContext("2d"); if (canvas && ctx) { resize(canvas, ctx); } }); }, []); return (

{props.children}

); }; `,__rawStringJsx__:`import { cn } from "@/lib/utils"; import React, { useEffect, useRef } from "react"; import { createNoise3D } from "simplex-noise"; import { motion } from "framer-motion"; export const Vortex = (props) => { const canvasRef = useRef(null); const containerRef = useRef(null); 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 = [0, 0]; const HALF_PI = 0.5 * Math.PI; const TAU = 2 * Math.PI; const TO_RAD = Math.PI / 180; const rand = n => n * Math.random(); const randRange = n => n - rand(2 * n); const fadeInOut = (t, m) => { let hm = 0.5 * m; return Math.abs(((t + hm) % m) - hm) / hm; }; const lerp = (n1, n2, speed) => (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) => { 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, ctx) => { 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); window.requestAnimationFrame(() => draw(canvas, ctx)); }; const drawParticles = (ctx) => { for (let i = 0; i < particlePropsLength; i += particlePropCount) { updateParticle(i, ctx); } }; const updateParticle = (i, ctx) => { 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, y, x2, y2, life, ttl, radius, hue, ctx ) => { 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, y, canvas) => { return x > canvas.width || x < 0 || y > canvas.height || y < 0; }; const resize = ( canvas, ctx ) => { 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, ctx ) => { 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, ctx ) => { ctx.save(); ctx.globalCompositeOperation = "lighter"; ctx.drawImage(canvas, 0, 0); ctx.restore(); }; useEffect(() => { setup(); window.addEventListener("resize", () => { const canvas = canvasRef.current; const ctx = canvas?.getContext("2d"); if (canvas && ctx) { resize(canvas, ctx); } }); }, []); return ( (

{props.children}

) ); }; `,__src__:"src/registry/default/ui/vortex.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"createNoise3D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"simplex-noise"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"VortexProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"containerClassName"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleCount"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeY"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseHue"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseSpeed"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeSpeed"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseRadius"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeRadius"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"Vortex"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"VortexProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvasRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLCanvasElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"particleCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"700"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"particlePropCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"9"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"particlePropsLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"rangeY"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeY"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"baseTTL"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"50"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"rangeTTL"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"150"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"baseSpeed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseSpeed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"rangeSpeed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeSpeed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"baseRadius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseRadius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"rangeRadius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeRadius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"baseHue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseHue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"220"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"rangeHue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"noiseSteps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"3"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"xOff"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.00125"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"yOff"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.00125"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"zOff"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.0005"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"#000000"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"tick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"noise3D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"createNoise3D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"Float32Array"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropsLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HALF_PI"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"PI"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"TAU"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"PI"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"TO_RAD"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"PI"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"180"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"): "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"random"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"randRange"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"): "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"fadeInOut"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"t"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"m"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"): "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hm"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"m"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"abs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"t"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hm"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"%"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"m"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hm"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hm"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"lerp"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"n1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"n2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"): "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setup"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvasRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"container"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"container"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"getContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2d"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"resize"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"initParticles"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"draw"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"initParticles"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"tick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// simplex = new SimplexNoise();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"Float32Array"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropsLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"for"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropsLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"+="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"initParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"initParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvasRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"randRange"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeY"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseTTL"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeTTL"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseSpeed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeSpeed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseRadius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeRadius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"baseHue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"rand"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"rangeHue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"], "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"draw"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLCanvasElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"tick"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"++"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clearRect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"fillStyle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"fillRect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawParticles"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"renderGlow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"renderToScreen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"requestAnimationFrame"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"draw"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawParticles"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"for"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropsLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"+="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particlePropCount"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"updateParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"updateParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvasRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i3"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i4"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"3"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"4"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i6"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i7"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"6"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i8"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"7"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i9"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"8"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"noise3D"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"xOff"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"yOff"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"tick"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"zOff"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"noiseSteps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"TAU"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"lerp"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i3"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"], "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cos"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"), "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"lerp"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i4"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"], "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"sin"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"n"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"), "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i6"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i7"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i8"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i9"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"++"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i3"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i4"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"vy"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"particleProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"checkBounds"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"initParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawParticle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"save"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineCap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"round"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineWidth"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"strokeStyle"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`hsla("}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"hue"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:",100%,60%,"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"fadeInOut"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"life"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ttl"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:")`"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"beginPath"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"moveTo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"lineTo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"closePath"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"restore"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"checkBounds"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLCanvasElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"resize"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLCanvasElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"innerWidth"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"innerHeight"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"innerWidth"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"innerHeight"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"renderGlow"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLCanvasElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"save"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"filter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"blur(8px) brightness(200%)"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"globalCompositeOperation"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"lighter"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawImage"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"restore"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"save"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"filter"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"blur(4px) brightness(200%)"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"globalCompositeOperation"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"lighter"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawImage"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"restore"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"renderToScreen"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLCanvasElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"CanvasRenderingContext2D"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"save"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"globalCompositeOperation"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"lighter"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"drawImage"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"restore"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"setup"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"resize"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", () "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvasRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"?."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"getContext"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2d"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"resize"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ctx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, []);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"relative h-full w-full"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"containerClassName"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"containerRef"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"absolute h-full w-full inset-0 z-0 bg-transparent flex items-center justify-center"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvas"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"canvasRef"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"relative z-10"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"full-page-demo-usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#full-page-demo-usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Full page demo usage"]}),` `,(0,n.jsx)(s,{name:"vortex-demo-2",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%] overflow-hidden relative",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react"; import { Vortex } from "../ui/vortex"; export function VortexDemoSecond() { return (

The hell is this?

This is chemical burn. It'll hurt more than you've ever been burned and you'll have a scar.

); } `,__rawStringJsx__:`import React from "react"; import { Vortex } from "../ui/vortex"; export function VortexDemoSecond() { return ( (

The hell is this?

This is chemical burn. It'll hurt more than you've ever been burned and you'll have a scar.

) ); } `,__src__:"src/registry/default/example/vortex-demo-2.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Vortex"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/vortex"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"VortexDemoSecond"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-[calc(100%-4rem)] mx-auto rounded-md h-screen overflow-hidden"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Vortex"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"black"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"rangeY"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"800"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"particleCount"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"500"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"baseHue"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"120"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex items-center flex-col justify-center px-2 md:px-10 py-4 w-full h-full"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-white text-2xl md:text-6xl font-bold text-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" The hell is this?"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-white text-sm md:text-2xl max-w-xl mt-6 text-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" This is chemical burn. It"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"ll hurt more than you"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"ve ever been"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" burned and you"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"ll have a scar."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"flex flex-col sm:flex-row items-center gap-4 mt-6"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 bg-blue-600 hover:bg-blue-700 transition duration-200 rounded-lg text-white shadow-[0px_2px_0px_0px_#FFFFFF40_inset]"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Order now"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"px-4 py-2 text-white "'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Watch trailer"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop Name"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Default Value"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"children"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"any"})}),(0,n.jsx)(l.td,{}),(0,n.jsx)(l.td,{children:"Optional children to be rendered inside the component."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"className"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"string"})}),(0,n.jsx)(l.td,{}),(0,n.jsx)(l.td,{children:"Optional className for styling the children wrapper."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"containerClassName"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"string"})}),(0,n.jsx)(l.td,{}),(0,n.jsx)(l.td,{children:"Optional className for styling the container."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"particleCount"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"700"})}),(0,n.jsx)(l.td,{children:"Number of particles to be generated."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"rangeY"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"100"})}),(0,n.jsx)(l.td,{children:"Vertical range for particle movement."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"baseHue"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"220"})}),(0,n.jsx)(l.td,{children:"Base hue for particle color."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"baseSpeed"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"0.0"})}),(0,n.jsx)(l.td,{children:"Base speed for particle movement."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"rangeSpeed"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"1.5"})}),(0,n.jsx)(l.td,{children:"Range of speed variation for particles."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"baseRadius"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"1"})}),(0,n.jsx)(l.td,{children:"Base radius of particles."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"rangeRadius"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"2"})}),(0,n.jsx)(l.td,{children:"Range of radius variation for particles."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"backgroundColor"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"string"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:'"#000000"'})}),(0,n.jsx)(l.td,{children:"Background color of the canvas."})]})]})]}),` `,(0,n.jsxs)(l.p,{children:["This component is inspired by ",(0,n.jsx)(l.a,{href:"https://github.com/crnacura/AmbientCanvasBackgrounds",rel:"nofollow",target:"_blank",children:"this GitHub Repo"})]})]})}function g(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(A,e)})):A(e)}var w=g;function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(P);})(); ;return Component;

Aceternity UI