alpinejs-cursor/src/index.js

Create your own custom cursor with minimal JavaScript. Easy to implement, customizable, and lightweight solution for interactive web experiences 👆

import Cursor from 'custom-cursor'

export default function (Alpine) {
  Alpine.directive('cursor', (el, { modifiers }) => {
    const [cursorCount] = modifiers

    const hoverTargets = JSON.parse(el.getAttribute('x-cursor-targets'))

    new Cursor({
      count: Number(cursorCount) || 1,
      targets: hoverTargets,
    })
  })
}