Prop For That: Live CSS Props Without the JavaScript Sniffing
Adam’s back with another props project. After Open Props and its stash of preconfigured variables for color, shadows, sizing, and typography, he’s now shipping Prop For That — a library that spins up live props for things CSS can’t normally see in the browser. We’re talking cursor position, progress values, form states, current time, scroll velocity — the usual stuff that JavaScript has to sniff and pass along to CSS.
The clever bit: all that script-y work is already baked into the background. You just import the library, declare it in your HTML, and then style away in your CSS. No manual wiring.
Chris covered the old-school way of doing this with custom properties registered in JavaScript to track cursor position a while back. Prop For That handles that scenario neatly — except it works through data attributes that trigger the underlying scripts:
<div class="mover">...</div>From there, drop the relevant props straight into your stylesheet:
.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 worth a look — Adam always puts together classy work, and this is no exception.
