Size & viewport

Two dimension sources. viewport (global) writes --live-vw / --live-vh on resize. size (element) writes --live-w, --live-h, and --live-aspect for any bound element, via one shared ResizeObserver. Drag the box to resize it, or resize the window.

--live-vw --live-vh

resize me ↘

Drag the box's corner. Its --live-w and --live-h update via one shared ResizeObserver, and the heading font size scales with the width. The viewport readout above tracks --live-vw / --live-vh (resize the window).

The wiring

Declare the viewport global on the root <html> (a core source, bound immediately); the element opts into size with a data-props-for attribute — no JavaScript past the import:

<script type="module">import 'prop-for-that/auto'</script>
<html data-props-for="viewport">

<div data-props-for="size">…</div>

/* the heading scales with the element's own width */
.box h2 {
  font-size: calc(var(--live-w) * 0.055px);
}