[{"_1":2,"_173":-5,"_174":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","703ea01c1077155a6b2e005f3a31351a5b041073","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_146":147,"_170":171,"_172":-5},"handle","Danchi","name","vibeCoding_PLP","path","frontend/components/Hero/ParticleConstellation.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":-5,"_113":20,"_114":-5,"_115":32,"_14":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_23":126,"_129":130,"_132":133,"_145":20},"id","033a36f6-370d-11f0-a274-9e149126039e","createdAt",["D",1747918947671],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","9ed25c90-14c3-11f0-beeb-bfeb688a11c4","pinnedFileId","pinPreview","screenshotVersion","likeCount","51bd6a87-b354-4d22-8f3b-894876bc5679","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydlNxd1hHa1dmYjE2WU95SU1HWWNGZE1Mak4ifQ","org",{"_93":94,"_131":128},"avatar","branch",{"_134":135,"_95":43,"_101":136,"_137":102,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},"version",38,"033b1a94-370d-11f0-a274-9e149126039e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":148,"_95":149,"_150":151,"_152":153,"_154":136,"_155":156,"_157":158,"_103":159,"_134":32,"_160":161,"_162":163,"_164":20,"_165":-5,"_97":166},"ff959d46-3884-11f0-8c67-9e149126039e","ParticleConstellation.tsx","fileId","ff959e18-3884-11f0-8c67-9e149126039e","parentId","5b2b509a-20f8-4a3d-aa18-59343b40da38","branchId","branchVersion",13,"latest",true,["D",1748080432328],"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\nexport function ParticleConstellation() {\n const canvasRef = useRef(null);\n const animationRef = useRef();\n const particlesRef = useRef([]);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n // Set canvas size\n const resizeCanvas = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n };\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n\n // Particle class\n class Particle {\n x: number;\n y: number;\n vx: number;\n vy: number;\n size: number;\n color: string;\n opacity: number;\n trail: { x: number; y: number; opacity: number }[];\n\n constructor() {\n this.x = Math.random() * canvas.width;\n this.y = Math.random() * canvas.height;\n this.vx = (Math.random() - 0.5) * 2;\n this.vy = (Math.random() - 0.5) * 2;\n this.size = Math.random() * 3 + 1;\n this.color = this.getRandomColor();\n this.opacity = Math.random() * 0.8 + 0.2;\n this.trail = [];\n }\n\n getRandomColor(): string {\n const colors = [\n '#FFD700', // Gold\n '#FFA500', // Orange\n '#FF6347', // Tomato\n '#4169E1', // Royal Blue\n '#9370DB', // Medium Purple\n '#00CED1', // Dark Turquoise\n '#FF69B4', // Hot Pink\n '#32CD32' // Lime Green\n ];\n return colors[Math.floor(Math.random() * colors.length)];\n }\n\n update() {\n // Add current position to trail\n this.trail.push({ x: this.x, y: this.y, opacity: this.opacity });\n if (this.trail.length > 10) {\n this.trail.shift();\n }\n\n // Update position\n this.x += this.vx;\n this.y += this.vy;\n\n // Bounce off edges\n if (this.x < 0 || this.x > canvas.width) this.vx *= -1;\n if (this.y < 0 || this.y > canvas.height) this.vy *= -1;\n\n // Keep particles in bounds\n this.x = Math.max(0, Math.min(canvas.width, this.x));\n this.y = Math.max(0, Math.min(canvas.height, this.y));\n\n // Pulsing opacity\n this.opacity = 0.5 + Math.sin(Date.now() * 0.001 + this.x * 0.01) * 0.3;\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n // Draw trail\n this.trail.forEach((point, index) => {\n const trailOpacity = (index / this.trail.length) * point.opacity * 0.3;\n ctx.globalAlpha = trailOpacity;\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(point.x, point.y, this.size * 0.5, 0, Math.PI * 2);\n ctx.fill();\n });\n\n // Draw main particle\n ctx.globalAlpha = this.opacity;\n \n // Create gradient for glow effect\n const gradient = ctx.createRadialGradient(\n this.x, this.y, 0,\n this.x, this.y, this.size * 3\n );\n gradient.addColorStop(0, this.color);\n gradient.addColorStop(1, 'transparent');\n \n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);\n ctx.fill();\n\n // Draw core particle\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n\n // Initialize particles\n const initParticles = () => {\n particlesRef.current = [];\n const particleCount = Math.min(150, Math.floor((canvas.width * canvas.height) / 8000));\n \n for (let i = 0; i < particleCount; i++) {\n particlesRef.current.push(new Particle());\n }\n };\n\n // Animation loop\n const animate = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // Update and draw particles\n particlesRef.current.forEach(particle => {\n particle.update();\n particle.draw(ctx);\n });\n\n // Draw connections between nearby particles\n drawConnections(ctx);\n\n animationRef.current = requestAnimationFrame(animate);\n };\n\n // Draw connections between particles\n const drawConnections = (ctx: CanvasRenderingContext2D) => {\n const maxDistance = 120;\n \n for (let i = 0; i < particlesRef.current.length; i++) {\n for (let j = i + 1; j < particlesRef.current.length; j++) {\n const p1 = particlesRef.current[i];\n const p2 = particlesRef.current[j];\n \n const dx = p1.x - p2.x;\n const dy = p1.y - p2.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n if (distance < maxDistance) {\n const opacity = (1 - distance / maxDistance) * 0.3;\n \n ctx.globalAlpha = opacity;\n ctx.strokeStyle = '#ffffff';\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(p1.x, p1.y);\n ctx.lineTo(p2.x, p2.y);\n ctx.stroke();\n }\n }\n }\n };\n\n // Mouse interaction\n let mouseX = 0;\n let mouseY = 0;\n \n const handleMouseMove = (e: MouseEvent) => {\n mouseX = e.clientX;\n mouseY = e.clientY;\n \n // Attract particles to mouse\n particlesRef.current.forEach(particle => {\n const dx = mouseX - particle.x;\n const dy = mouseY - particle.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n if (distance < 150) {\n const force = (150 - distance) / 150 * 0.02;\n particle.vx += dx * force * 0.01;\n particle.vy += dy * force * 0.01;\n }\n });\n };\n\n canvas.addEventListener('mousemove', handleMouseMove);\n\n // Start animation\n initParticles();\n animate();\n\n // Cleanup\n return () => {\n window.removeEventListener('resize', resizeCanvas);\n canvas.removeEventListener('mousemove', handleMouseMove);\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current);\n }\n };\n }, []);\n\n return (\n \n );\n}","deleted","label",[167,168,169,149],"frontend","components","Hero","permalink","https://www.val.town/x/Danchi/vibeCoding_PLP/code/frontend/components/Hero/ParticleConstellation.tsx","extension","actionData","errors"]