.container Move your cursor!

*
  box-sizing border-box
  
body
  min-height 100vh
  font-weight bold
  font-size 1.15rem
  font-family sans-serif
  text-align center
  display grid
  place-items center
  background hsl(180, 50%, 50%)
  
.container
  height 135px
  width 135px
  background hsl(25, 50%, 80%)
  display grid
  place-content center
  border-radius 50%
  position relative
  
  &:after
    content ''
    position absolute
    top 50%
    left 50%
    height 200px
    width 200px
    border-radius 50%
    background hsla(280, 50%, 80%, 0.5)
    transform translate(-50%, -50%)
    z-index -1

import gsap from 'https://cdn.skypack.dev/gsap'

const CONTAINER = document.querySelector('.container')

const generateHandler = (element, proximity, cb) => ({x, y}) => {
  const bounds = 100
  const elementBounds = element.getBoundingClientRect()
  const centerX = elementBounds.left + elementBounds.width / 2
  const centerY = elementBounds.top + elementBounds.height / 2
  const boundX = gsap.utils.mapRange(centerX - proximity, centerX + proximity, -bounds, bounds, x)
  const boundY = gsap.utils.mapRange(centerY - proximity, centerY + proximity, -bounds, bounds, y)
  cb(boundX / 100, boundY / 100)
}

document.addEventListener('pointermove', generateHandler(CONTAINER, 100, (x, y) => {
  CONTAINER.innerText = `x: ${x.toFixed(1)}; y: ${y.toFixed(1)};`
}))