CPU at almost 100% when using certain components as a background

[Ph4sm4]

I have an i9-9900k and even with that, i get 5 fps on my page and am unable to navigate anything (even after running a built preview on vite with: npm run build, npm run preview)

Am i doing something wrong with importing/using the components? Thank you for any help in advance

The same with components like LightPillar , LightRays and more. I am always using max 1 background like this per page.

import envConfig from '@/types/envConfig';
import MagicRings from './MagicRings';

import React, { memo } from 'react';

const isDev = envConfig.environment === 'development';

const MemoizedMagicRings = memo(() => (
	<div className="fixed inset-0 viewport-height-no-header h-full w-full -z-10 pointer-events-none">
		<MagicRings
			color="#A855F7"
			colorTwo="#6366F1"
			ringCount={6}
			speed={0.4}
			attenuation={10}
			lineThickness={2}
			baseRadius={0.35}
			radiusStep={0.1}
			scaleRate={0.1}
			opacity={0.2}
			blur={0}
			noiseAmount={0.1}
			rotation={0}
			ringGap={1.5}
			fadeIn={0.7}
			fadeOut={0.5}
			followMouse={false}
			mouseInfluence={0.2}
			hoverScale={1.2}
			parallax={0.05}
			clickBurst={true}
		/>
	</div>
));

type Props = { children: React.ReactNode; className?: string };

export default function MagicRingsBackground({ children, className }: Props) {
	return (
		<div
			className={`relative isolate flex flex-col h-full flex-1 ${className ?? ''}`}>
			{!isDev && <MemoizedMagicRings />}
			<div className="relative z-10 h-full flex-1 flex flex-col">
				{children}
			</div>
		</div>
	);
}