@kolkrabbi/kol-component 0.126.0 → 0.128.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.126.0",
+  "version": "0.128.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/atoms/AnimatedTitle.jsx

@@ -17,6 +17,11 @@ gsap.registerPlugin(ScrollTrigger)
  *
  * Typography and color are inherited from the consumer via
  * `containerClass` — the component owns only the split and the motion.
+ * The word's REST STATE (off-screen right, rotated in 3D) is
+ * `.kol-animated-word` in kol-theme's kol-animation.css — promoted there
+ * 2026-08-28 from kol-website, which had carried it since this component
+ * shipped: outside that one app the title rendered static and visible, with no
+ * error, because GSAP was animating from a state nothing declared.
  * When the user prefers reduced motion, no GSAP runs at all and the
  * title renders fully visible and static.
  *
@@ -46,7 +51,7 @@ export default function AnimatedTitle({
     if (reducedMotion) return undefined
 
     const ctx = gsap.context(() => {
-      const words = containerRef.current.querySelectorAll('.animatedWord')
+      const words = containerRef.current.querySelectorAll('.kol-animated-word')
 
       gsap.set(words, {
         opacity: 0,
@@ -97,7 +102,10 @@ export default function AnimatedTitle({
           {line.split(' ').map((word, i) => (
             <span
               key={i}
-              className="animatedWord"
+              /* both names: the prefixed one the DS styles (kol-animation.css,
+                * 2026-08-28) and the bare one kol-website's own sheet still selects
+                * until it deletes it */
+              className="kol-animated-word animatedWord"
               dangerouslySetInnerHTML={{ __html: word }}
             />
           ))}

package/src/utilities/motion.js

@@ -61,6 +61,16 @@ export const SPRING = {
  *                 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
@@ -71,6 +81,7 @@ export const GRAB = {
   near: 20,
   sleep: 40,
   stick: 90,
+  range: 0.85,
   travel: { duration: 1.1, ease: EASE.outGsap },
   snap: { duration: 0.5, ease: EASE.outGsap },
   slop: 3,