@property — give a CSS variable a type

<div class="wrap">
    <h1>🎮 A type is all that's missing</h1>
    <p class="sub">
      Both sides run <em>identical</em> CSS — same <code>var()</code>, same <code>transition</code>,
      same <code>@keyframes</code>. The only difference: the right side's variables are
      <strong>registered with <code>@property</code></strong>. Click and watch what a type unlocks.
    </p>

<div class="note" id="unsupported" hidden>
      ⚠️ This browser doesn't support <code>@property</code> / <code>CSS.registerProperty()</code>,
      so <em>both</em> sides will behave like the unregistered one. Try a recent Chrome, Edge, Safari, or Firefox.
    </div>

<div class="panel">
      <h2>1 · Transition a color</h2>
      <div class="controls">
        <button id="shift">Shift the hue →</button>
        <button id="reset1" class="ghost">Reset</button>
        <label>Duration
          <input type="range" id="dur" min="0.1" max="1.5" step="0.1" value="0.6" />
          <span id="durVal" style="color:var(--ink)">0.6s</span>
        </label>
      </div>
      <div class="pair">
        <div class="side">
          <span class="tag plain">plain variable</span>
          <div class="swatch plain" id="swPlain">--hue</div>
          <div class="hint">the browser sees text → <b style="color:var(--bad)">snaps</b></div>
        </div>
        <div class="side">
          <span class="tag reg">@property &lt;number&gt;</span>
          <div class="swatch reg" id="swReg">--hue</div>
          <div class="hint">the browser sees a number → <b style="color:var(--good)">eases</b></div>
        </div>
      </div>
    </div>

<div class="panel" id="spinPanel">
      <h2>2 · Animate a conic gradient</h2>
      <div class="controls">
        <button id="toggle">Pause</button>
        <label>Speed
          <input type="range" id="speed" min="0.5" max="4" step="0.5" value="2" />
          <span id="speedVal" style="color:var(--ink)">2s / turn</span>
        </label>
      </div>
      <div class="pair">
        <div class="side">
          <span class="tag plain">plain variable</span>
          <div class="orb plain"></div>
          <div class="hint">unregistered <code>&lt;angle&gt;</code> → <b style="color:var(--bad)">frozen</b></div>
        </div>
        <div class="side">
          <span class="tag reg">@property &lt;angle&gt;</span>
          <div class="orb reg"></div>
          <div class="hint">typed <code>&lt;angle&gt;</code> → <b style="color:var(--good)">spins</b></div>
        </div>
      </div>

<details>
        <summary>Show the CSS — the entire difference is these two blocks</summary>
<pre><code><span class="c">/* Register the variables. That's the whole fix. */</span>
<span class="k">@property</span> --hue {
  <span class="k">syntax</span>: <span class="v">"&lt;number&gt;"</span>; <span class="k">inherits</span>: false; <span class="k">initial-value</span>: <span class="v">220</span>;
}
<span class="k">@property</span> --spin {
  <span class="k">syntax</span>: <span class="v">"&lt;angle&gt;"</span>; <span class="k">inherits</span>: false; <span class="k">initial-value</span>: <span class="v">0deg</span>;
}

<span class="c">/* ...and the rest is the CSS you already wrote. */</span>
.swatch { background: <span class="k">hsl</span>(<span class="k">var</span>(--hue) 78% 62%); <span class="k">transition</span>: --hue .6s ease; }
.orb    { background: <span class="k">conic-gradient</span>(<span class="k">from</span> <span class="k">var</span>(--spin), …); <span class="k">animation</span>: spin 2s linear infinite; }
<span class="k">@keyframes</span> spin { to { --spin: <span class="v">360deg</span>; } }</code></pre>
      </details>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.