loading code fetching the highlighted snippet
FIG-001/ USETRANSFORM
pointer-tracking gradient.
Move the cursor across the swatch. Two writable stores track the pointer position; useTransform derives the conic-gradient(...) background string from them; styleString paints it onto the inline style.
- Two writable stores (
gradientX,gradientY) hold the pointer's normalised position.onpointermovewrites to them; the derived background re-evaluates synchronously. -
useTransform(fn, deps)returns a derived motion value that recomputes whenever any dep store changes. The fn produces the fullconic-gradient(...)string by interpolating store values into a template literal. -
styleStringserialises the derived value object onto the inlinestyleattribute. Re-evaluates every time$backgroundemits, keeping the gradient in lockstep with the pointer.
category · usetransform
sheet · sheet 01 / 01
⟳ to re-run