<style>
    .flair {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  background: radial-gradient(circle, #ff5722 0%, #ff9800 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

</style>

 <!-- GSAP Library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.0/gsap.min.js"></script>

 <script>
    document.addEventListener("DOMContentLoaded", function () {
  gsap.set(".flair", { xPercent: -50, yPercent: -50 });

  let xTo = gsap.quickTo(".flair", "x", { duration: 0.6, ease: "power3" }),
      yTo = gsap.quickTo(".flair", "y", { duration: 0.6, ease: "power3" });

  window.addEventListener("mousemove", (e) => {
    xTo(e.clientX);
    yTo(e.clientY);
  });
});

  </script>