function MainAnime() {
	const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });

	React.useLayoutEffect(() => {
		const updateDimensions = () => {
			setDimensions({
				width: window.innerWidth,
				height: window.innerHeight,
			});
		};

		updateDimensions();
		window.addEventListener("resize", updateDimensions);

		return () => {
			window.removeEventListener("resize", updateDimensions);
		};
	}, []);

	if (dimensions.width === 0 || dimensions.height === 0) {
		return null;
	}

	const circles = [];
	for (let i = 0; i < 7; i++) {
		circles.push(
			React.createElement(ReflectingCircle, {
				key: i,
				id: i,
				containerWidth: dimensions.width,
				containerHeight: dimensions.height,
			}),
		);
	}

	return React.createElement(
		"div",
		{ className: "xeloc-bg" },
		circles,
		React.createElement("div", { className: "xeloc-bg-mask-image" }),
	);
}