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>
{/* 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>