@kolkrabbi/kol-component 0.125.0 → 0.127.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.125.0",
+  "version": "0.127.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/utilities/motion.js

@@ -46,20 +46,43 @@ export const SPRING = {
  *   near / sleep  the pill wakes within 20px of the line and sleeps only past
  *                 40 — hovering the line itself flapped the class every frame
  *                 and restarted the fade, so the hysteresis is not optional
- *   marks         it rests on 20/40/60/80 % of the rail's height and is STICKY:
- *                 it leaves a mark only within `stick` of the pitch to another
- *                 (user: "following the mouse a little too much"). The middle
- *                 of each gap is dead on purpose
- *   travel        a long chase, so the pill trails the pointer and catches up
+ *   stick         DWELL, not a grid (user ruling 2026-08-28: "I don't like the
+ *                 snapping of the grabber, it's too far — let's make it come to
+ *                 the cursor but have some sticky time where it lands, so it's
+ *                 not constantly jerking"). The pill targets the pointer's own
+ *                 position on the line and re-targets only once the pointer is
+ *                 `stick` px away: it lands ON you, holds while you move inside
+ *                 the radius, then travels to where you are now.
+ *
+ *                 It was four marks at 20/40/60/80 % of the edge until this
+ *                 ruling — on a ~900px rail that is ~180px apart, so every
+ *                 re-target was a long throw to a point the pointer was not at,
+ *                 and the dwell read as the pill refusing to come to you and
+ *                 then lurching. The earlier "snap to something so it has
+ *                 somewhere to stick to" is served by dwell; the grid was the
+ *                 wrong model for it.
+ *   range         the pill's travel band, BIPOLAR FROM THE MIDDLE (user ruling
+ *                 2026-08-28: "can we make sure the grab somehow doesn't go up
+ *                 so high? maybe we limit/choke range to bipolar from middle
+ *                 85% of 100"). 0.85 = the middle 85 % of the edge, so it is
+ *                 held 7.5 % clear of each end — on a 900px rail, y 67 to 833.
+ *                 Unclamped it tracked the pointer to within the CSS `clamp()`'s
+ *                 36px of the top, which put it beside the logomark and the
+ *                 first rung. The band is a fraction, not px, so it scales with
+ *                 the viewport instead of pinning a gap that reads differently
+ *                 on a laptop and a 27".
+ *   travel        the chase. 1.1s, down from 2.8 with the grid: the throw now
+ *                 covers a fraction of the distance, and a long tween over a
+ *                 short throw reads as lag rather than weight
  *   snap          the width tween on release
  *   slop          under this, a pointerdown/up is a CLICK, not a drag
  */
 export const GRAB = {
   near: 20,
   sleep: 40,
-  marks: [0.2, 0.4, 0.6, 0.8],
-  stick: 0.2 * 0.3,
-  travel: { duration: 2.8, ease: EASE.outGsap },
+  stick: 90,
+  range: 0.85,
+  travel: { duration: 1.1, ease: EASE.outGsap },
   snap: { duration: 0.5, ease: EASE.outGsap },
   slop: 3,
 }