<style>
.animated_spot {
  background-image: linear-gradient(to bottom right, aquamarine, hotpink);
  overflow: hidden;
}

.spotlight {
  position: absolute;
  inset: 0;
  opacity: 0.95;
  pointer-events: none;
  filter: blur(1em) contrast(100);
  mix-blend-mode: darken;
  background-color: white;
  background-image:
    radial-gradient(circle at var(--clientX, 50%) var(--clientY, 50%), transparent, black 16em),
    repeating-linear-gradient(45deg, black 0 0.4em, transparent 0 3em),
    repeating-linear-gradient(-45deg, black 0 0.4em, transparent 0 3em);
}
</style>
<script>
    parent.addEventListener('mousemove', (e) => {
    const parent = document.querySelector('.animated_spot');
    const effect = parent.querySelector('.spotlight');
  const rect = parent.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  const xPercent = (x / rect.width) * 100;
  const yPercent = (y / rect.height) * 100;

  effect.style.setProperty('--clientX', `${xPercent}%`);
  effect.style.setProperty('--clientY', `${yPercent}%`);
});
</script>