🎮 A type is all that's missing

Both sides run identical CSS — same var(), same transition, same @keyframes. The only difference: the right side's variables are registered with @property. Click and watch what a type unlocks.

⚠️ This browser doesn't support @property / CSS.registerProperty(), so both sides will behave like the unregistered one. Try a recent Chrome, Edge, Safari, or Firefox.

1 · Transition a color

Duration 0.6s

plain variable

--hue

the browser sees text → snaps

@property <number>

--hue

the browser sees a number → eases

2 · Animate a conic gradient

Speed 2s / turn

plain variable

unregistered <angle> → frozen

@property <angle>

typed <angle> → spins

Show the CSS — the entire difference is these two blocks

/* Register the variables. That's the whole fix. */
@property --hue {
  syntax: "<number>"; inherits: false; initial-value: 220;
}
@property --spin {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}

/* ...and the rest is the CSS you already wrote. */
.swatch { background: hsl(var(--hue) 78% 62%); transition: --hue .6s ease; }
.orb    { background: conic-gradient(from var(--spin), …); animation: spin 2s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }