@nomorejalapenos/track v0.0.12-s10

import { createTrack } from '@nomorejalapenos/track'

let mouse = {
  x: createTrack({ smoothness: 7 }),
  y: createTrack({ smoothness: 7 }),
}

const el = document.createElement('div')

el.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 10vmin;
  height: 10vmin;
  background-color: tomato;
`

document.body.appendChild(el)

let elSize = {
  x: 0,
  y: 0,
}

let lastTime = Date.now()

const tick = () => {
  const now = Date.now()
  const dt = now - lastTime

  mouse.x.slide(dt)
  mouse.y.slide(dt)

  el.style.transform = `translate(
    ${mouse.x.position.current - elSize.x / 2}px,
    ${mouse.y.position.current - elSize.y / 2}px
  )`

  requestAnimationFrame(tick)
  lastTime = now
}

const handleMouseMove = (e: MouseEvent) => {
  mouse.x.setPosition(e.x)
  mouse.y.setPosition(e.y)
}

const handleResize = () => {
  mouse.x.max = document.documentElement.clientWidth
  mouse.y.max = innerHeight

  elSize.x = el.offsetWidth
  elSize.y = el.offsetHeight
}

addEventListener('mousemove', handleMouseMove)
addEventListener('resize', handleResize)
handleResize()
requestAnimationFrame(tick)

import { createTrack } from '@nomorejalapenos/track'

const track = createTrack({
  max: 250,
  smoothness: 8,
})

const el = document.createElement('div')

el.style.cssText = `
  position: fixed;
  top: calc(50% - 10vmin);
  left: calc(50% - 10vmin);
  width: 20vmin;
  height: 20vmin;
  background-color: tomato;
`

document.body.appendChild(el)

let lastTime = Date.now()

const tick = (t: number) => {
  t *= 0.005
  const now = Date.now()
  const dt = now - lastTime

  track.slide(dt)

  el.style.transform = `
    translateX(${Math.cos(t) * track.position.current}px)
    scale(${1 + track.progress.current})
    rotate(${track.progress.current * 360}deg)
  `

  requestAnimationFrame(tick)
  lastTime = now
}

requestAnimationFrame(tick)

addEventListener('mousedown', () => {
  track.setProgress(1)
})

addEventListener('mouseup', () => {
  track.setProgress(0)
})