loading code fetching the highlighted snippet
FIG-001/ UTILITY
reactive styleString.
styleString turns a JS object into a CSS string. Pass a getter and reads of $state (or motion values) become reactive — adjust the sliders to drive transform + colour from a single object.
-
styleString({ rotate: 45, width: 120 })emits"transform: rotate(45deg); width: 120px;"— numbers pick up the right unit for each property automatically. - Pass an object directly for one-shot styles, or a function for reactive ones — any
$stateread inside re-runs the conversion when state changes. Mix in motion values ($autoRotate) and the style string updates every frame. - Bonus:
style:on a non-motion element accepts the string directly, so you don't need amotion.*wrapper just to drive reactive CSS — it's a general-purpose tool.
// style-string hsl(200, 70%, 50%)
reactive
rotation 0°
scale 1.0
hue 200°
object → css string, live mode: manual
category · utility
sheet · sheet 01 / 01
⟳ to re-run