AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use precomputed particles in JSX

Browse source 
cgen-3358facc1915438d805a37583fb56e5f
This commit is contained in:
Builder.io 2025-09-28 06:36:49 +00:00
parent bf8e1d65b5
commit f128b2964b
1 changed files with 14 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
client/pages/Onboarding.tsx
View file

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