Pointer

The pointer source writes the cursor’s position to :root: --live-pointer-x / -y in pixels, and --live-pointer-x-ratio / -y-ratio as 0–1 fractions of the viewport. Move your pointer and watch the spotlight, the dot, and the readout follow, all in CSS.

--live-pointer-x-ratio --live-pointer-y-ratio

Move anywhere in the window. The spotlight and dot read the pointer's viewport ratio, written to :root by propsFor(['pointer']).

The wiring

pointer is an opt-in plugin. Under auto, declare it on the root <html> and it’s loaded on demand the first time the key is seen — then CSS does the rest:

<script type="module">import 'prop-for-that/auto'</script>
<html data-props-for="pointer">   <!-- global → :root; the pointer plugin loads on demand -->

.spotlight {
  background: radial-gradient(
    9rem 9rem at
    calc(var(--live-pointer-x-ratio) * 100%)
    calc(var(--live-pointer-y-ratio) * 100%),
    var(--accent), transparent 70%
  );
}

Scoped to an element

The global source answers “where is the pointer in the viewport?” The pointer-local plugin answers “where is it within this element?” It writes --live-local-pointer-x-ratio / --live-local-pointer-y-ratio (0–1 across the bound element’s box) and --live-local-pointer-inside (1 while the pointer is over it) to that element only, so its descendants inherit them and nothing outside does.

--live-local-pointer-x-ratio --live-local-pointer-y-ratio --live-local-pointer-inside

Move over the box. Its --live-local-pointer-x-ratio / --live-local-pointer-y-ratio are the pointer's position within this element (0–1), and --live-local-pointer-inside flips to 1 while you're over it. They're written to this box alone by propsFor(box, ['pointer-local']), so the readout and spotlight inside it inherit them and nothing outside does.

It’s a plugin too, so under auto there’s nothing to register — the element opts in with data-props-for and the plugin loads itself the first time the key is seen:

<script type="module">import 'prop-for-that/auto'</script>

<div data-props-for="pointer-local">…</div>

.box {
  /* spotlight tracks the pointer within the box, lit only while it's inside */
  background: radial-gradient(
    7rem 7rem at calc(var(--live-local-pointer-x-ratio) * 100%) calc(var(--live-local-pointer-y-ratio) * 100%),
    color-mix(in oklab, var(--accent) calc(var(--live-local-pointer-inside) * 50%), transparent),
    transparent 70%
  );
}