https://blendswap.com/assets/controllers/spotlight_controller-9b3316f4.js

1import { Controller } from "@hotwired/stimulus"
2
3// Cursor-tracked spotlight for a dark card. Writes the pointer position to
4// --mx / --my CSS custom properties on the element; a radial-gradient overlay
5// in the markup reads them and a soft highlight follows the cursor on hover.
6// Direct CSS-var writes (rAF-batched), no framework re-render.
7//
8// Usage: data-controller="spotlight" data-action="pointermove->spotlight#move"
9//   + a child overlay whose background reads var(--mx) / var(--my).
10export default class extends Controller {
11  move(event) {
12    const rect = this.element.getBoundingClientRect()
13    this.x = event.clientX - rect.left
14    this.y = event.clientY - rect.top
15    if (this.raf) return
16    this.raf = requestAnimationFrame(() => {
17      this.element.style.setProperty("--mx", `${this.x}px`)
18      this.element.style.setProperty("--my", `${this.y}px`)
19      this.raf = null
20    })
21  }
22
23  disconnect() {
24    if (this.raf) cancelAnimationFrame(this.raf)
25  }
26}