refactor(parameter-slider): switch to CSS-only motion smoothing

Author: petekp

components/tool-ui/parameter-slider/math.ts

@@ -6,21 +6,11 @@ type SliderPercentInput = {
   max: number;
 };
 
-type EasedSliderPercentInput = {
-  current: number;
-  target: number;
-  isDragging: boolean;
-};
-
 function clampPercent(value: number): number {
   if (!Number.isFinite(value)) return 0;
   return Math.max(0, Math.min(100, value));
 }
 
-const DRAG_EASING_FACTOR = 0.42;
-const IDLE_EASING_FACTOR = 0.24;
-const EASING_SNAP_THRESHOLD = 0.02;
-
 export function sliderRangeToPercent({
   value,
   min,
@@ -31,23 +21,6 @@ export function sliderRangeToPercent({
   return clampPercent(((value - min) / range) * 100);
 }
 
-export function advanceEasedSliderPercent({
-  current,
-  target,
-  isDragging,
-}: EasedSliderPercentInput): number {
-  const safeCurrent = clampPercent(current);
-  const safeTarget = clampPercent(target);
-  const delta = safeTarget - safeCurrent;
-
-  if (Math.abs(delta) <= EASING_SNAP_THRESHOLD) {
-    return safeTarget;
-  }
-
-  const easingFactor = isDragging ? DRAG_EASING_FACTOR : IDLE_EASING_FACTOR;
-  return safeCurrent + delta * easingFactor;
-}
-
 export function createSliderValueSnapshot(sliders: SliderConfig[]): SliderValue[] {
   return sliders.map((slider) => ({ id: slider.id, value: slider.value }));
 }

components/tool-ui/parameter-slider/parameter-slider.tsx

@@ -21,7 +21,6 @@ import { useSignatureReset } from "../shared/use-signature-reset";
 
 import { cn } from "./_adapter";
 import {
-  advanceEasedSliderPercent,
   createSliderSignature,
   createSliderValueSnapshot,
   sliderRangeToPercent,
@@ -406,39 +405,6 @@ function SliderRow({
     ? sliderRangeToPercent({ value: 0, min, max })
     : 0;
   const valuePercent = sliderRangeToPercent({ value, min, max });
-  const [easedValuePercent, setEasedValuePercent] = useState(valuePercent);
-  const easedValuePercentRef = useRef(valuePercent);
-
-  useEffect(() => {
-    let animationFrameId = 0;
-
-    const tick = () => {
-      const next = advanceEasedSliderPercent({
-        current: easedValuePercentRef.current,
-        target: valuePercent,
-        isDragging,
-      });
-
-      easedValuePercentRef.current = next;
-      setEasedValuePercent(next);
-
-      if (next !== valuePercent) {
-        animationFrameId = window.requestAnimationFrame(tick);
-      }
-    };
-
-    animationFrameId = window.requestAnimationFrame(tick);
-
-    return () => {
-      window.cancelAnimationFrame(animationFrameId);
-    };
-  }, [valuePercent, isDragging]);
-
-  const handleAlignmentOffset = useMemo(
-    () =>
-      `calc(${toRadixThumbPosition(easedValuePercent)} - ${toRadixThumbPosition(valuePercent)})`,
-    [easedValuePercent, valuePercent],
-  );
 
   // Fill clip-path uses the same inset coordinate system as the handle.
   // This keeps the collapsed stroke aligned with the fill edge near extremes.
@@ -448,34 +414,33 @@ function SliderRow({
     const toClipFromLeftInset = (percent: number) =>
       toRadixThumbPosition(percent);
     const TERMINAL_EPSILON = 1e-6;
-    const fillPercent = easedValuePercent;
 
     if (crossesZero) {
       // Keep interior fill aligned to Radix thumb math, but snap to exact
       // track borders at terminal values to avoid edge gaps.
-      if (fillPercent <= TERMINAL_EPSILON) {
+      if (valuePercent <= TERMINAL_EPSILON) {
         return `inset(0 ${toClipFromRightInset(zeroPercent)} 0 0)`;
       }
-      if (fillPercent >= 100 - TERMINAL_EPSILON) {
+      if (valuePercent >= 100 - TERMINAL_EPSILON) {
         return `inset(0 0 0 ${toClipFromLeftInset(zeroPercent)})`;
       }
-      if (fillPercent >= zeroPercent) {
+      if (valuePercent >= zeroPercent) {
         // Positive: clip from zero on left, value on right
-        return `inset(0 ${toClipFromRightInset(fillPercent)} 0 ${toClipFromLeftInset(zeroPercent)})`;
+        return `inset(0 ${toClipFromRightInset(valuePercent)} 0 ${toClipFromLeftInset(zeroPercent)})`;
       } else {
         // Negative: clip from value on left, zero on right
-        return `inset(0 ${toClipFromRightInset(zeroPercent)} 0 ${toClipFromLeftInset(fillPercent)})`;
+        return `inset(0 ${toClipFromRightInset(zeroPercent)} 0 ${toClipFromLeftInset(valuePercent)})`;
       }
     }
     // Non-crossing: keep Radix alignment internally, but snap to exact borders at terminals.
-    if (fillPercent <= TERMINAL_EPSILON) {
+    if (valuePercent <= TERMINAL_EPSILON) {
       return "inset(0 100% 0 0)";
     }
-    if (fillPercent >= 100 - TERMINAL_EPSILON) {
+    if (valuePercent >= 100 - TERMINAL_EPSILON) {
       return "inset(0 0 0 0)";
     }
-    return `inset(0 ${toClipFromRightInset(fillPercent)} 0 0)`;
-  }, [crossesZero, easedValuePercent, zeroPercent]);
+    return `inset(0 ${toClipFromRightInset(valuePercent)} 0 0)`;
+  }, [crossesZero, zeroPercent, valuePercent]);
 
   const fillMaskImage = crossesZero
     ? "linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%)"
@@ -486,12 +451,11 @@ function SliderRow({
   const reflectionStyle = useMemo(() => {
     const edgeThreshold = 3;
     const nearEdge =
-      easedValuePercent <= edgeThreshold ||
-      easedValuePercent >= 100 - edgeThreshold;
+      valuePercent <= edgeThreshold || valuePercent >= 100 - edgeThreshold;
 
     // Narrower spread when stationary at edges (~35% narrower)
     const spreadPercent = nearEdge && !isDragging ? 6.5 : 10;
-    const handlePos = toRadixThumbPosition(easedValuePercent);
+    const handlePos = toRadixThumbPosition(valuePercent);
     const start = `clamp(0%, calc(${handlePos} - ${spreadPercent}%), 100%)`;
     const end = `clamp(0%, calc(${handlePos} + ${spreadPercent}%), 100%)`;
 
@@ -508,14 +472,13 @@ function SliderRow({
       maskComposite: "exclude",
       padding: "1px",
     };
-  }, [easedValuePercent, isDragging]);
+  }, [valuePercent, isDragging]);
 
   // Opacity scales with handle size: rest → hover → drag
   const reflectionOpacity = useMemo(() => {
     const edgeThreshold = 3;
     const atEdge =
-      easedValuePercent <= edgeThreshold ||
-      easedValuePercent >= 100 - edgeThreshold;
+      valuePercent <= edgeThreshold || valuePercent >= 100 - edgeThreshold;
 
     if (isDragging || atEdge) {
       return 1;
@@ -524,7 +487,7 @@ function SliderRow({
       return 0.6;
     }
     return 0;
-  }, [easedValuePercent, isDragging, isHovered]);
+  }, [valuePercent, isDragging, isHovered]);
 
   const handleValueChange = useCallback(
     (values: number[]) => {
@@ -542,6 +505,8 @@ function SliderRow({
         className={cn(
           "group/slider relative flex w-full touch-none items-center select-none",
           "isolate h-12",
+          "[&>span]:transition-[left,transform] [&>span]:duration-150 [&>span]:ease-[var(--cubic-ease-in-out)]",
+          "[&>span]:will-change-[left,transform]",
           disabled && "pointer-events-none opacity-50",
         )}
         value={[value]}
@@ -567,7 +532,7 @@ function SliderRow({
         >
           <div
             className={cn(
-              "absolute inset-0",
+              "absolute inset-0 transition-[clip-path] duration-150 ease-[var(--cubic-ease-in-out)] will-change-[clip-path]",
               resolvedFillClassName ?? "bg-primary/30 dark:bg-primary/40",
             )}
             style={{
@@ -605,7 +570,7 @@ function SliderRow({
 
         {/* Metallic reflection overlay - follows handle, brightness scales with interaction */}
         <div
-          className="squircle pointer-events-none absolute inset-0 rounded-sm transition-[opacity] duration-200 ease-[var(--cubic-ease-in-out)]"
+          className="squircle pointer-events-none absolute inset-0 rounded-sm transition-[opacity,background] duration-150 ease-[var(--cubic-ease-in-out)]"
           style={{
             ...reflectionStyle,
             opacity: reflectionOpacity,
@@ -630,15 +595,15 @@ function SliderRow({
             // Calculate morph state
             const isActive = isHovered || isDragging;
 
-            // Move the visual handle toward the eased position so handle and fill
-            // animate together while preserving Radix hit-target behavior.
-            const fillEdgeOffset = handleAlignmentOffset;
+            // Indicator stays centered on the real thumb while CSS transitions
+            // smooth thumb wrapper and fill movement together.
+            const fillEdgeOffset = 0;
 
             // Hide rest-state indicator at edges (0% or 100%) - the reflection gradient handles this
             const edgeThreshold = 3;
             const atEdge =
-              easedValuePercent <= edgeThreshold ||
-              easedValuePercent >= 100 - edgeThreshold;
+              valuePercent <= edgeThreshold ||
+              valuePercent >= 100 - edgeThreshold;
             const restOpacity = atEdge ? 0 : 0.25;
 
             // Asymmetric segment heights: gap is shifted up to match raised text position
@@ -667,7 +632,7 @@ function SliderRow({
                     resolvedHandleClassName ?? "bg-primary",
                   )}
                   style={{
-                    transform: `translateX(calc(-50% + ${fillEdgeOffset}))`,
+                    transform: `translateX(calc(-50% + ${fillEdgeOffset}px))`,
                     height: topHeight,
                     opacity: isActive ? 1 : restOpacity,
                   }}
@@ -685,7 +650,7 @@ function SliderRow({
                     resolvedHandleClassName ?? "bg-primary",
                   )}
                   style={{
-                    transform: `translateX(calc(-50% + ${fillEdgeOffset}))`,
+                    transform: `translateX(calc(-50% + ${fillEdgeOffset}px))`,
                     height: bottomHeight,
                     opacity: isActive ? 1 : restOpacity,
                   }}

lib/tests/tool-ui/parameter-slider/math-contract.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, test } from "vitest";
 
 import {
-  advanceEasedSliderPercent,
   createSliderSignature,
   sliderRangeToPercent,
 } from "@/components/tool-ui/parameter-slider/math";
@@ -25,40 +24,4 @@ describe("parameter-slider math contract", () => {
 
     expect(a).not.toBe(b);
   });
-
-  test("easing step moves toward target without overshoot", () => {
-    const next = advanceEasedSliderPercent({
-      current: 20,
-      target: 80,
-      isDragging: false,
-    });
-
-    expect(next).toBeGreaterThan(20);
-    expect(next).toBeLessThan(80);
-  });
-
-  test("dragging uses a stronger easing step than idle", () => {
-    const idleNext = advanceEasedSliderPercent({
-      current: 20,
-      target: 80,
-      isDragging: false,
-    });
-    const dragNext = advanceEasedSliderPercent({
-      current: 20,
-      target: 80,
-      isDragging: true,
-    });
-
-    expect(dragNext).toBeGreaterThan(idleNext);
-  });
-
-  test("easing snaps to target when close enough", () => {
-    const next = advanceEasedSliderPercent({
-      current: 49.99,
-      target: 50,
-      isDragging: false,
-    });
-
-    expect(next).toBe(50);
-  });
 });

lib/tests/tool-ui/parameter-slider/visual-alignment-contract.test.ts

@@ -143,4 +143,24 @@ describe("parameter-slider visual alignment contract", () => {
     expect(html).not.toContain("[text-shadow:");
     expect(html).not.toContain("text-shadow:");
   });
+
+  test("uses CSS transitions for fill and thumb movement smoothing", () => {
+    const html = renderToStaticMarkup(
+      React.createElement(ParameterSlider, {
+        id: "parameter-slider-css-easing-test",
+        sliders: [
+          {
+            id: "s",
+            label: "S",
+            min: 0,
+            max: 100,
+            value: 42,
+          },
+        ],
+      }),
+    );
+
+    expect(html).toContain("transition-[clip-path]");
+    expect(html).toContain("[&>span]:transition-[left,transform]");
+  });
 });