tribunal-kit 6.0.1 → 7.0.0

package/.agent/skills/gsap-plugins/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before invoking GSAP plugins, you MUST inspect:
+
 1. `package.json` → Verify plugin installation and check for Club GSAP licensing requirements (`MorphSVG`, `SplitText`, `ScrollSmoother`)
 2. Plugin Registration (Section 18) → Always register plugins explicitly via `gsap.registerPlugin(...)` at module root
 3. Revert & Cleanup (Section 418) → Call `.revert()` on SplitText and Flip instances during component unmount
@@ -35,10 +36,10 @@ Apply when using or reviewing code that uses GSAP plugins: registering plugins,
 Register each plugin once so GSAP (and bundlers) know to include it. Use **gsap.registerPlugin()** with every plugin used in the project:
 
 ```javascript
-import gsap from "gsap";
-import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-import { Flip } from "gsap/Flip";
-import { Draggable } from "gsap/Draggable";
+import gsap from 'gsap';
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
+import { Flip } from 'gsap/Flip';
+import { Draggable } from 'gsap/Draggable';
 
 gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
 ```
@@ -56,8 +57,8 @@ Animates scroll position (window or a scrollable element). Use for “scroll to
 gsap.registerPlugin(ScrollToPlugin);
 
 gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
-gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
-gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
+gsap.to(window, { duration: 1, scrollTo: { y: '#section', offsetY: 50 } });
+gsap.to(scrollContainer, { duration: 1, scrollTo: { x: 'max' } });
 ```
 
 **ScrollToPlugin — key config (scrollTo object):**
@@ -92,9 +93,9 @@ Capture state with `Flip.getState()`, then apply changes (e.g. layout or class c
 ```javascript
 gsap.registerPlugin(Flip);
 
-const state = Flip.getState(".item");
+const state = Flip.getState('.item');
 // change DOM (reorder, add/remove, change classes)
-Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
+Flip.from(state, { duration: 0.5, ease: 'power2.inOut' });
 ```
 
 **Flip — key config (Flip.from vars):**
@@ -118,8 +119,8 @@ Makes elements draggable, spinnable, or throwable with mouse/touch. Use for slid
 ```javascript
 gsap.registerPlugin(Draggable, InertiaPlugin);
 
-Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
-Draggable.create(".knob", { type: "rotation" });
+Draggable.create('.box', { type: 'x,y', bounds: '#container', inertia: true });
+Draggable.create('.knob', { type: 'rotation' });
 ```
 
 **Draggable — key config options:**
@@ -140,19 +141,19 @@ Works with Draggable for momentum after release, or track the inertia/velocity o
 
 ```javascript
 gsap.registerPlugin(Draggable, InertiaPlugin);
-Draggable.create(".box", { type: "x,y", inertia: true });
+Draggable.create('.box', { type: 'x,y', inertia: true });
 ```
 
 Or track velocity of a property:
 
 ```javascript
-InertiaPlugin.track(".box", "x");
+InertiaPlugin.track('.box', 'x');
 ```
 
 Then use `"auto"` to continue the current velocity and glide to a stop:
 
 ```javascript
-gsap.to(obj, { inertia: { x: "auto" } });
+gsap.to(obj, { inertia: { x: 'auto' } });
 ```
 
 ### Observer
@@ -163,7 +164,7 @@ Normalizes pointer and scroll input across devices. Use for swipe, scroll direct
 gsap.registerPlugin(Observer);
 
 Observer.create({
-  target: "#area",
+  target: '#area',
   onUp: () => {},
   onDown: () => {},
   onLeft: () => {},
@@ -190,7 +191,7 @@ Splits an element’s text into characters, words, and/or lines (each in its own
 ```javascript
 gsap.registerPlugin(SplitText);
 
-const split = SplitText.create(".heading", { type: "words, chars" });
+const split = SplitText.create('.heading', { type: 'words, chars' });
 gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
 // later: split.revert() or let gsap.context() cleanup revert
 ```
@@ -198,8 +199,8 @@ gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
 With **onSplit()** (v3.13.0+), animations run on each split and on re-split when **autoSplit** is used; returning a tween/timeline from **onSplit()** lets SplitText clean up and sync progress on re-split:
 
 ```javascript
-SplitText.create(".split", {
-  type: "lines",
+SplitText.create('.split', {
+  type: 'lines',
   autoSplit: true,
   onSplit(self) {
     return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
@@ -238,9 +239,9 @@ Animates text with a scramble/glitch effect. Use when revealing or transitioning
 ```javascript
 gsap.registerPlugin(ScrambleTextPlugin);
 
-gsap.to(".text", {
+gsap.to('.text', {
   duration: 1,
-  scrambleText: { text: "New message", chars: "01", revealDelay: 0.5 },
+  scrambleText: { text: 'New message', chars: '01', revealDelay: 0.5 },
 });
 ```
 
@@ -258,11 +259,11 @@ Reveals or hides the stroke of SVG elements by animating `stroke-dashoffset` / `
 gsap.registerPlugin(DrawSVGPlugin);
 
 // draw from nothing to full stroke
-gsap.from("#path", { duration: 1, drawSVG: 0 });
+gsap.from('#path', { duration: 1, drawSVG: 0 });
 // or explicit segment: from 0–0 to 0–100%
-gsap.fromTo("#path", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%", duration: 1 });
+gsap.fromTo('#path', { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 1 });
 // stroke only in the middle (gaps at ends)
-gsap.to("#path", { duration: 1, drawSVG: "20% 80%" });
+gsap.to('#path', { duration: 1, drawSVG: '20% 80%' });
 ```
 
 **Caveats:** Only affects stroke (not fill). Prefer single-segment `<path>` elements; multi-segment paths can render oddly in some browsers. Contents of `<use>` cannot be visually changed. **DrawSVGPlugin.getLength(element)** and **DrawSVGPlugin.getPosition(element)** return stroke length and current position.
@@ -279,13 +280,13 @@ Morphs one SVG shape into another by animating the `d` attribute (path data). St
 gsap.registerPlugin(MorphSVGPlugin);
 
 // convert primitives to path first if needed:
-MorphSVGPlugin.convertToPath("circle, rect, ellipse, line");
+MorphSVGPlugin.convertToPath('circle, rect, ellipse, line');
 
-gsap.to("#diamond", { duration: 1, morphSVG: "#lightning", ease: "power2.inOut" });
+gsap.to('#diamond', { duration: 1, morphSVG: '#lightning', ease: 'power2.inOut' });
 // object form:
-gsap.to("#diamond", {
+gsap.to('#diamond', {
   duration: 1,
-  morphSVG: { shape: "#lightning", type: "rotational", shapeIndex: 2 },
+  morphSVG: { shape: '#lightning', type: 'rotational', shapeIndex: 2 },
 });
 ```
 
@@ -318,9 +319,9 @@ Animates an element along an SVG path. Use when moving an object along a path (e
 ```javascript
 gsap.registerPlugin(MotionPathPlugin);
 
-gsap.to(".dot", {
+gsap.to('.dot', {
   duration: 2,
-  motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5] },
+  motionPath: { path: '#path', align: '#path', alignOrigin: [0.5, 0.5] },
 });
 ```
 
@@ -341,7 +342,7 @@ Visual editor for MotionPath (alignment, offset). Use during development to tune
 ```javascript
 gsap.registerPlugin(MotionPathPlugin, MotionPathHelperPlugin);
 
-const helper = MotionPathHelper.create(".dot", "#path", { end: 0.5 });
+const helper = MotionPathHelper.create('.dot', '#path', { end: 0.5 });
 // adjust in UI, then use helper.path or helper.getProgress() in your animation
 ```
 
@@ -353,8 +354,8 @@ Custom easing curves (cubic-bezier or SVG path). Use when a built-in ease is not
 
 ```javascript
 gsap.registerPlugin(CustomEase);
-const ease = CustomEase.create("name", ".17,.67,.83,.67");
-gsap.to(".el", { x: 100, ease: ease, duration: 1 });
+const ease = CustomEase.create('name', '.17,.67,.83,.67');
+gsap.to('.el', { x: 100, ease: ease, duration: 1 });
 ```
 
 ### EasePack
@@ -378,7 +379,7 @@ Bounce-style easing with configurable strength.
 ```javascript
 gsap.registerPlugin(Physics2DPlugin);
 
-gsap.to(".ball", {
+gsap.to('.ball', {
   duration: 2,
   physics2D: {
     velocity: 250,
@@ -395,7 +396,7 @@ Applies physics to property values. Use for physics-driven property animation.
 ```javascript
 gsap.registerPlugin(PhysicsPropsPlugin);
 
-gsap.to(".obj", {
+gsap.to('.obj', {
   duration: 2,
   physicsProps: {
     x: { velocity: 100, end: 300 },

package/.agent/skills/gsap-react/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing GSAP animation logic in React, you MUST inspect:
+
 1. `package.json` → Verify `@gsap/react` and `gsap` dependencies
 2. `useGSAP()` Hook setup (Section 27) → Pass `{ scope: containerRef }` so selectors target DOM nodes within component scope
 3. Cleanup & Context-Safe Callbacks (Section 89) → Use `contextSafe` for event handlers attached after component mount to prevent memory leaks
@@ -44,7 +45,7 @@ npm install @gsap/react
 When **@gsap/react** is available, use the **useGSAP()** hook instead of `useEffect()` for GSAP setup. It handles cleanup automatically and provides a scope and **contextSafe** for callbacks.
 
 ```javascript
-import { useGSAP } from "@gsap/react";
+import { useGSAP } from '@gsap/react';
 
 gsap.registerPlugin(useGSAP); // register before running useGSAP or any GSAP code
 
@@ -52,8 +53,8 @@ const containerRef = useRef(null);
 
 useGSAP(
   () => {
-    gsap.to(".box", { x: 100 });
-    gsap.from(".item", { opacity: 0, stagger: 0.1 });
+    gsap.to('.box', { x: 100 });
+    gsap.from('.item', { opacity: 0, stagger: 0.1 });
   },
   { scope: containerRef },
 );
@@ -91,8 +92,8 @@ It's okay to use **gsap.context()** inside a regular **useEffect()** when @gsap/
 ```javascript
 useEffect(() => {
   const ctx = gsap.context(() => {
-    gsap.to(".box", { x: 100 });
-    gsap.from(".item", { opacity: 0, stagger: 0.1 });
+    gsap.to('.box', { x: 100 });
+    gsap.from('.item', { opacity: 0, stagger: 0.1 });
   }, containerRef);
   return () => ctx.revert();
 }, []);
@@ -116,7 +117,7 @@ useGSAP(
     gsap.to(goodRef.current, { x: 100 });
 
     // ❌ DANGER! This animation is created in an event handler that executes AFTER useGSAP() executes. It's not added to the context so it won't get cleaned up (reverted). The event listener isn't removed in cleanup function below either, so it persists between component renders (bad).
-    badRef.current.addEventListener("click", () => {
+    badRef.current.addEventListener('click', () => {
       gsap.to(badRef.current, { y: 100 });
     });
 
@@ -125,12 +126,12 @@ useGSAP(
       gsap.to(goodRef.current, { rotation: 180 });
     });
 
-    goodRef.current.addEventListener("click", onClickGood);
+    goodRef.current.addEventListener('click', onClickGood);
 
     // 👍 we remove the event listener in the cleanup function below.
     return () => {
       // <-- cleanup
-      goodRef.current.removeEventListener("click", onClickGood);
+      goodRef.current.removeEventListener('click', onClickGood);
     };
   },
   { scope: container },

package/.agent/skills/gsap-scrolltrigger/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before creating or editing ScrollTrigger animations, you MUST inspect:
+
 1. Plugin Registration Requirement (Section 22) → Explicitly execute `gsap.registerPlugin(ScrollTrigger)` once at root; ban unregistered plugin usage
 2. Child Tween ScrollTrigger Ban (Section 288) → Attach `scrollTrigger` to top-level timeline/tweens ONLY; ban attaching `scrollTrigger` to child timeline steps
 3. Horizontal Ease-None Rule (Section 226) → Enforce `ease: "none"` on horizontal scrolling tweens; ban custom easing on containerAnimation tweens
@@ -45,14 +46,14 @@ gsap.registerPlugin(ScrollTrigger);
 Tie a tween or timeline to scroll position:
 
 ```javascript
-gsap.to(".box", {
+gsap.to('.box', {
   x: 500,
   duration: 1,
   scrollTrigger: {
-    trigger: ".box",
-    start: "top center", // when top of trigger hits center of viewport
-    end: "bottom center", // when the bottom of the trigger hits the center of the viewport
-    toggleActions: "play reverse play reverse", // onEnter play, onLeave reverse, onEnterBack play, onLeaveBack reverse
+    trigger: '.box',
+    start: 'top center', // when top of trigger hits center of viewport
+    end: 'bottom center', // when the bottom of the trigger hits the center of the viewport
+    toggleActions: 'play reverse play reverse', // onEnter play, onLeave reverse, onEnterBack play, onLeaveBack reverse
   },
 });
 ```
@@ -89,10 +90,10 @@ Main properties for the `scrollTrigger` config object (shorthand: `scrollTrigger
 
 ```javascript
 ScrollTrigger.create({
-  trigger: "#id",
-  start: "top top",
-  end: "bottom 50%+=100px",
-  onUpdate: (self) => console.log(self.progress.toFixed(3), self.direction),
+  trigger: '#id',
+  start: 'top top',
+  end: 'bottom 50%+=100px',
+  onUpdate: self => console.log(self.progress.toFixed(3), self.direction),
 });
 ```
 
@@ -114,26 +115,26 @@ ScrollTrigger.create({
 - **batchMax** (Number | Function) — Max elements per batch. When full, the callback fires and the next batch starts. Use a **function** that returns a number for responsive layouts; it runs on refresh (resize, tab focus, etc.).
 
 ```javascript
-ScrollTrigger.batch(".box", {
+ScrollTrigger.batch('.box', {
   onEnter: (elements, triggers) => {
     gsap.to(elements, { opacity: 1, y: 0, stagger: 0.15 });
   },
   onLeave: (elements, triggers) => {
     gsap.to(elements, { opacity: 0, y: 100 });
   },
-  start: "top 80%",
-  end: "bottom 20%",
+  start: 'top 80%',
+  end: 'bottom 20%',
 });
 ```
 
 With **batchMax** and **interval** for finer control:
 
 ```javascript
-ScrollTrigger.batch(".card", {
+ScrollTrigger.batch('.card', {
   interval: 0.1,
   batchMax: 4,
-  onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1, overwrite: true }),
-  onLeaveBack: (batch) => gsap.set(batch, { opacity: 0, y: 50, overwrite: true }),
+  onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1, overwrite: true }),
+  onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 50, overwrite: true }),
 });
 ```
 
@@ -176,12 +177,12 @@ See [ScrollTrigger.scrollerProxy()](https://gsap.com/docs/v3/Plugins/ScrollTrigg
 Scrub ties animation progress to scroll. Use for “scroll-driven” feel:
 
 ```javascript
-gsap.to(".box", {
+gsap.to('.box', {
   x: 500,
   scrollTrigger: {
-    trigger: ".box",
-    start: "top center",
-    end: "bottom center",
+    trigger: '.box',
+    start: 'top center',
+    end: 'bottom center',
     scrub: true, // or number (smoothness delay in seconds), so 0.5 means it'd take 0.5 seconds to "catch up" to the current scroll position.
   },
 });
@@ -227,14 +228,14 @@ Drive a timeline with scroll and optional scrub:
 ```javascript
 const tl = gsap.timeline({
   scrollTrigger: {
-    trigger: ".container",
-    start: "top top",
-    end: "+=2000",
+    trigger: '.container',
+    start: 'top top',
+    end: '+=2000',
     scrub: 1,
     pin: true,
   },
 });
-tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
+tl.to('.a', { x: 100 }).to('.b', { y: 50 }).to('.c', { opacity: 0 });
 ```
 
 The timeline’s progress is tied to scroll through the trigger’s start/end range.
@@ -251,27 +252,27 @@ A common pattern: **pin** a section, then as the user scrolls **vertically**, co
 4. To trigger things based on the horizontal movement caused by that tween, set **containerAnimation** to that tween.
 
 ```javascript
-const scrollingEl = document.querySelector(".horizontal-el");
+const scrollingEl = document.querySelector('.horizontal-el');
 // Panel = pinned viewport-sized section. .horizontal-wrap = inner content that moves left.
 const scrollTween = gsap.to(scrollingEl, {
   xPercent: () => Max.max(0, window.innerWidth - scrollingEl.offsetWidth),
-  ease: "none", // ease: "none" is required
+  ease: 'none', // ease: "none" is required
   scrollTrigger: {
     trigger: scrollingEl,
     pin: scrollingEl.parentNode, // wrapper so that we're not animating the pinned element
-    start: "top top",
-    end: "+=1000",
+    start: 'top top',
+    end: '+=1000',
   },
 });
 
 // other tweens that trigger based on horizontal movement should reference the containerAnimation:
-gsap.to(".nested-el-1", {
+gsap.to('.nested-el-1', {
   y: 100,
   scrollTrigger: {
     containerAnimation: scrollTween, // IMPORTANT
-    trigger: ".nested-wrapper-1",
-    start: "left center", // based on horizontal movement
-    toggleActions: "play none none reset",
+    trigger: '.nested-wrapper-1',
+    start: 'left center', // based on horizontal movement
+    toggleActions: 'play none none reset',
   },
 });
 ```
@@ -284,9 +285,9 @@ gsap.to(".nested-el-1", {
 - When removing animated elements or changing pages (e.g. in SPAs), **kill** associated ScrollTrigger instances so they don’t run on stale elements:
 
 ```javascript
-ScrollTrigger.getAll().forEach((t) => t.kill());
+ScrollTrigger.getAll().forEach(t => t.kill());
 // or kill by the id assigned to the ScrollTrigger in its config object like {id: "my-id", ...}
-ScrollTrigger.getById("my-id")?.kill();
+ScrollTrigger.getById('my-id')?.kill();
 ```
 
 In React, use the `useGSAP()` hook (@gsap/react NPM package) to ensure proper cleanup automatically, or manually kill in a cleanup (e.g. in useEffect return) when the component unmounts.

package/.agent/skills/gsap-timeline/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before creating GSAP timelines, you MUST inspect:
+
 1. Position Parameter Syntax (Section 27) → Pass position as the 3rd argument (`"<"`, `">"`, `"+=0.5"`) instead of using hardcoded delays
 2. Timeline Defaults (Section 45) → Pass `{ defaults: { duration, ease } }` into `gsap.timeline()` constructor to avoid repetitive child declarations
 3. ScrollTrigger Placement (Section 101) → Place `scrollTrigger` ONLY on the top-level timeline, never on child tweens inside a timeline
@@ -34,7 +35,9 @@ Apply when building multi-step animations, coordinating several tweens in sequen
 
 ```javascript
 const tl = gsap.timeline();
-tl.to(".a", { x: 100, duration: 1 }).to(".b", { y: 50, duration: 0.5 }).to(".c", { opacity: 0, duration: 0.3 });
+tl.to('.a', { x: 100, duration: 1 })
+  .to('.b', { y: 50, duration: 0.5 })
+  .to('.c', { opacity: 0, duration: 0.3 });
 ```
 
 By default, tweens are **appended** one after another. Use the **position parameter** to place tweens at specific times or relative to other tweens.
@@ -51,10 +54,10 @@ Third argument (or position property in vars) controls placement:
 Examples:
 
 ```javascript
-tl.to(".a", { x: 100 }, 0); // at 0
-tl.to(".b", { y: 50 }, "+=0.5"); // 0.5s after last end
-tl.to(".c", { opacity: 0 }, "<"); // same start as previous
-tl.to(".d", { scale: 2 }, "<0.2"); // 0.2s after previous start
+tl.to('.a', { x: 100 }, 0); // at 0
+tl.to('.b', { y: 50 }, '+=0.5'); // 0.5s after last end
+tl.to('.c', { opacity: 0 }, '<'); // same start as previous
+tl.to('.d', { scale: 2 }, '<0.2'); // 0.2s after previous start
 ```
 
 ## Timeline Defaults
@@ -62,8 +65,8 @@ tl.to(".d", { scale: 2 }, "<0.2"); // 0.2s after previous start
 Pass defaults into the timeline so all child tweens inherit:
 
 ```javascript
-const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
-tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // both use 0.5s and power2.out
+const tl = gsap.timeline({ defaults: { duration: 0.5, ease: 'power2.out' } });
+tl.to('.a', { x: 100 }).to('.b', { y: 50 }); // both use 0.5s and power2.out
 ```
 
 ## Timeline Options (constructor)
@@ -78,12 +81,12 @@ tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // both use 0.5s and power2.out
 Add and use labels for readable, maintainable sequencing:
 
 ```javascript
-tl.addLabel("intro", 0);
-tl.to(".a", { x: 100 }, "intro");
-tl.addLabel("outro", "+=0.5");
-tl.to(".b", { opacity: 0 }, "outro");
-tl.play("outro"); // start from "outro"
-tl.tweenFromTo("intro", "outro"); // pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.
+tl.addLabel('intro', 0);
+tl.to('.a', { x: 100 }, 'intro');
+tl.addLabel('outro', '+=0.5');
+tl.to('.b', { opacity: 0 }, 'outro');
+tl.play('outro'); // start from "outro"
+tl.tweenFromTo('intro', 'outro'); // pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.
 ```
 
 ## Nesting Timelines
@@ -93,9 +96,9 @@ Timelines can contain other timelines.
 ```javascript
 const master = gsap.timeline();
 const child = gsap.timeline();
-child.to(".a", { x: 100 }).to(".b", { y: 50 });
+child.to('.a', { x: 100 }).to('.b', { y: 50 });
 master.add(child, 0);
-master.to(".c", { opacity: 0 }, "+=0.2");
+master.to('.c', { opacity: 0 }, '+=0.2');
 ```
 
 ## Controlling Playback

package/.agent/skills/gsap-utils/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before using `gsap.utils`, you MUST inspect:
+
 1. Pure Number vs Unit strings (Section 306) → `mapRange` and `normalize` work ONLY on numbers; use `getUnit` and `unitize` for string values with units
 2. Reusable Function Form (Section 22) → Omit the value argument (or pass `true` as 4th param for `random()`) to get a reusable function for high-frequency loops
 3. Component Scoping (Section 219) → Use `gsap.utils.selector(containerRef)` inside React components to restrict selector targets
@@ -90,7 +91,7 @@ Interpolates between two values at a given progress (0–1). Handles numbers, co
 
 ```javascript
 gsap.utils.interpolate(0, 100, 0.5); // 50
-gsap.utils.interpolate("#ff0000", "#0000ff", 0.5); // mid color
+gsap.utils.interpolate('#ff0000', '#0000ff', 0.5); // mid color
 gsap.utils.interpolate({ x: 0, y: 0 }, { x: 100, y: 50 }, 0.5); // { x: 50, y: 25 }
 
 let lerp = gsap.utils.interpolate(0, 100);
@@ -114,7 +115,7 @@ randomFn(); // random value in range, snapped to 10
 randomFn(); // another random value
 
 // array: pick one value at random
-gsap.utils.random(["red", "blue", "green"]); // "red", "blue", or "green"
+gsap.utils.random(['red', 'blue', 'green']); // "red", "blue", or "green"
 let randomFromArray = gsap.utils.random([0, 100, 200], true);
 randomFromArray(); // 0, 100, or 200
 ```
@@ -122,8 +123,8 @@ randomFromArray(); // 0, 100, or 200
 **String form in tween vars:** use `"random(-100, 100)"`, `"random(-100, 100, 5)"`, or `"random([0, 100, 200])"`; GSAP evaluates it per target.
 
 ```javascript
-gsap.to(".box", { x: "random(-100, 100, 5)", duration: 1 });
-gsap.to(".item", { backgroundColor: "random([red, blue, green])" });
+gsap.to('.box', { x: 'random(-100, 100, 5)', duration: 1 });
+gsap.to('.item', { backgroundColor: 'random([red, blue, green])' });
 ```
 
 ### snap(snapTo, value?)
@@ -142,7 +143,7 @@ snapFn(23); // 20
 Use in tweens for grid or step-based animation:
 
 ```javascript
-gsap.to(".x", { x: 200, snap: { x: 20 } });
+gsap.to('.x', { x: 200, snap: { x: 20 } });
 ```
 
 ### shuffle(array)
@@ -173,11 +174,11 @@ gsap.utils.shuffle([1, 2, 3, 4]); // e.g. [3, 1, 4, 2]
 
 ```javascript
 // Scale: middle elements 0.5, outer edges 3 (amount 2.5 distributed from center)
-gsap.to(".class", {
+gsap.to('.class', {
   scale: gsap.utils.distribute({
     base: 0.5,
     amount: 2.5,
-    from: "center",
+    from: 'center',
   }),
 });
 ```
@@ -188,10 +189,10 @@ gsap.to(".class", {
 const distributor = gsap.utils.distribute({
   base: 50,
   amount: 100,
-  from: "center",
-  ease: "power1.inOut",
+  from: 'center',
+  ease: 'power1.inOut',
 });
-const targets = gsap.utils.toArray(".box");
+const targets = gsap.utils.toArray('.box');
 const valueForIndex2 = distributor(2, targets[2], targets);
 ```
 
@@ -204,8 +205,8 @@ See [distribute()](https://gsap.com/docs/v3/GSAP/UtilityMethods/distribute/) for
 Returns the unit string of a value (e.g. `"px"`, `"%"`, `"deg"`). Use when normalizing or converting values.
 
 ```javascript
-gsap.utils.getUnit("100px"); // "px"
-gsap.utils.getUnit("50%"); // "%"
+gsap.utils.getUnit('100px'); // "px"
+gsap.utils.getUnit('50%'); // "%"
 gsap.utils.getUnit(42); // "" (unitless)
 ```
 
@@ -214,8 +215,8 @@ gsap.utils.getUnit(42); // "" (unitless)
 Appends a unit to a number, or returns the value as-is if it already has a unit. Use when building CSS values or tween end values.
 
 ```javascript
-gsap.utils.unitize(100, "px"); // "100px"
-gsap.utils.unitize("2rem", "px"); // "2rem" (unchanged)
+gsap.utils.unitize(100, 'px'); // "100px"
+gsap.utils.unitize('2rem', 'px'); // "2rem" (unchanged)
 ```
 
 ### splitColor(color, returnHSL?)
@@ -223,10 +224,10 @@ gsap.utils.unitize("2rem", "px"); // "2rem" (unchanged)
 Converts a color string into an array: **[red, green, blue]** (0–255), or **[red, green, blue, alpha]** (4 elements for RGBA when alpha is present or required). Pass **true** as the second argument (**returnHSL**) to get **[hue, saturation, lightness]** or **[hue, saturation, lightness, alpha]** (HSL/HSLA) instead. Works with `"rgb()"`, `"rgba()"`, `"hsl()"`, `"hsla()"`, hex, and named colors (e.g. `"red"`). Use when animating color components or building gradients. See [splitColor()](https://gsap.com/docs/v3/GSAP/UtilityMethods/splitColor/).
 
 ```javascript
-gsap.utils.splitColor("red"); // [255, 0, 0]
-gsap.utils.splitColor("#6fb936"); // [111, 185, 54]
-gsap.utils.splitColor("rgba(204, 153, 51, 0.5)"); // [204, 153, 51, 0.5] (4 elements)
-gsap.utils.splitColor("#6fb936", true); // [94, 55, 47] (HSL: hue, saturation, lightness)
+gsap.utils.splitColor('red'); // [255, 0, 0]
+gsap.utils.splitColor('#6fb936'); // [111, 185, 54]
+gsap.utils.splitColor('rgba(204, 153, 51, 0.5)'); // [204, 153, 51, 0.5] (4 elements)
+gsap.utils.splitColor('#6fb936', true); // [94, 55, 47] (HSL: hue, saturation, lightness)
 ```
 
 ## Arrays and Collections
@@ -237,8 +238,8 @@ Returns a scoped selector function that finds elements only within the given ele
 
 ```javascript
 const q = gsap.utils.selector(containerRef);
-q(".box"); // array of .box elements inside container
-gsap.to(q(".circle"), { x: 100 });
+q('.box'); // array of .box elements inside container
+gsap.to(q('.circle'), { x: 100 });
 ```
 
 ### toArray(value, scope?)
@@ -246,8 +247,8 @@ gsap.to(q(".circle"), { x: 100 });
 Converts a value to an array: selector string (scoped to element), NodeList, HTMLCollection, single element, or array. Use when passing mixed inputs to GSAP (e.g. targets) and a true array is needed.
 
 ```javascript
-gsap.utils.toArray(".item"); // array of elements
-gsap.utils.toArray(".item", container); // scoped to container
+gsap.utils.toArray('.item'); // array of elements
+gsap.utils.toArray('.item', container); // scoped to container
 gsap.utils.toArray(nodeList); // [ ... ] from NodeList
 ```
 
@@ -257,8 +258,8 @@ Composes functions: **pipe(f1, f2, f3)(value)** returns f3(f2(f1(value))). Use w
 
 ```javascript
 const fn = gsap.utils.pipe(
-  (v) => gsap.utils.normalize(0, 100, v),
-  (v) => gsap.utils.snap(0.1, v),
+  v => gsap.utils.normalize(0, 100, v),
+  v => gsap.utils.snap(0.1, v),
 );
 fn(50); // normalized then snapped
 ```