Initial effects

web/js/sections/stepper-test.js

@@ -195,7 +195,10 @@ async function moveToXY(targetX, targetY) {
     return false;
   }
 
-  return await Motion.goto(targetX, targetY);
+  const modeEl = document.getElementById('test-mode-select');
+  const mode = modeEl ? modeEl.value : 'direct';
+
+  return await Motion.goto(targetX, targetY, mode);
 }
 
 // ─────────────────────────────────────────────────────────────────
@@ -526,6 +529,17 @@ function buildHTML() {
         <div class="card">
           <div class="card-header"><span class="card-title">Move to XY</span></div>
           <div style="display:flex;flex-direction:column;gap:8px">
+            <div class="form-group" style="margin-bottom: 4px;">
+              <select id="test-mode-select" class="form-input" style="width:100%; font-size: 0.9rem;">
+                <option value="direct">Effect: Direct</option>
+                <option value="snaky">Effect: Snaky</option>
+                <option value="erratic">Effect: Erratic</option>
+                <option value="jumpy">Effect: Jumpy</option>
+                <option value="hesitant">Effect: Hesitant</option>
+                <option value="overshoot">Effect: Overshoot</option>
+                <option value="random">Effect: Random</option>
+              </select>
+            </div>
             <div style="display:flex;gap:6px;align-items:center">
               <label class="form-label" style="width:18px">X</label>
               <input class="form-input" type="number" id="input-x"