Prop For That: Live CSS Custom Properties via Data Attributes

No secret that Adam’s all about props. He gave us Open Props a good while back — a slew of preconfigured variables for color, shadows, sizing, typography, and much more. Now he’s back with Prop For That, a similar idea, but remarkable in that it creates live props based on things CSS can’t normally see in the browser. Things like cursor position, progress values, certain form states, current time, and scroll velocity — the stuff that JavaScript typically sniffs and passes to CSS.

All the script-based logic runs in the background. All that’s needed is to import the library, declare it in HTML, then style away in CSS.

For reference, there’s an older approach of registering custom properties in JavaScript to track cursor position. Prop For That handles this cleanly using data attributes that trigger the relevant scripts:

<div class="mover" data-props-for="pointer">...</div>

Then drop the relevant props into your styles:

.mover {
  aspect-ratio: 1;
  width: 50px;
  background: red;
  position: absolute;
  left: calc(var(--live-pointer-x, 0) * 1px);
  top: calc(var(--live-pointer-y, 0) * 1px);
}

The demos are the best place to see it in action and get a sense of what’s possible.