src/components/AnimatedBackground.tsx

"use client";

import { useCallback } from "react";
import Particles from "react-tsparticles";
import type { Engine } from "tsparticles-engine";
import { loadStarsPreset } from "tsparticles-preset-stars";

const AnimatedBackground = () => {
  const particlesInit = useCallback(async (engine: Engine) => {
    // This function is compatible with the v2 engine provided by react-tsparticles
    await loadStarsPreset(engine);
  }, []);

  const options = {
    preset: "stars",
    background: {
      color: {
        value: "#0d1117",
      },
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        enable: false,
      },
      move: {
        enable: true,
        speed: 0.5,
        direction: "bottom",
        random: false,
        straight: true,
        outModes: {
          default: "out",
        },
      },
      size: {
        value: { min: 1, max: 2.5 },
      },
    },
  };

  return (
    <div className="fixed inset-0 -z-10">
      <Particles id="tsparticles" init={particlesInit} options={options as any} />
    </div>
  );
};

export default AnimatedBackground;