From f128b2964bc34e28ea2745d4b22a16f5e93568f5 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sun, 28 Sep 2025 06:36:49 +0000
Subject: [PATCH] fix: use precomputed particles in JSX

cgen-3358facc1915438d805a37583fb56e5f
---
 client/pages/Onboarding.tsx | 42 +++++++++++++------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/client/pages/Onboarding.tsx b/client/pages/Onboarding.tsx
index 868add57..57745f60 100644
--- a/client/pages/Onboarding.tsx
+++ b/client/pages/Onboarding.tsx
@@ -315,34 +315,20 @@ export default function Onboarding() {
           </div>
 
           {/* Floating particles effect (performance-friendly) */}
-          {(() => {
-            const particles = useMemo(
-              () =>
-                Array.from({ length: 8 }).map(() => ({
-                  left: `${Math.floor(Math.random() * 100)}%`,
-                  top: `${Math.floor(Math.random() * 100)}%`,
-                  delay: `${Math.random().toFixed(2)}s`,
-                  duration: `${3 + Math.floor(Math.random() * 2)}s`,
-                })),
-              [],
-            );
-            return (
-              <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-10 hidden md:block motion-reduce:hidden">
-                {particles.map((p, i) => (
-                  <div
-                    key={i}
-                    className="absolute w-1 h-1 bg-aethex-400 rounded-full animate-float motion-reduce:animate-none"
-                    style={{
-                      left: p.left,
-                      top: p.top,
-                      animationDelay: p.delay,
-                      animationDuration: p.duration,
-                    }}
-                  />
-                ))}
-              </div>
-            );
-          })()}
+          <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-10 hidden md:block motion-reduce:hidden">
+            {particles.map((p, i) => (
+              <div
+                key={i}
+                className="absolute w-1 h-1 bg-aethex-400 rounded-full animate-float motion-reduce:animate-none"
+                style={{
+                  left: p.left,
+                  top: p.top,
+                  animationDelay: p.delay,
+                  animationDuration: p.duration,
+                }}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </Layout>