freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.2

package/dist/assets/design/skills/hyperframes-animation/rules/counting-dynamic-scale.md

@@ -0,0 +1,115 @@
+---
+name: counting-dynamic-scale
+description: Counter animation where the value counts up while transform scale grows to its final size, creating escalating visual weight without per-frame text reflow.
+metadata:
+  tags: counter, counting, scale, transform, number, dynamic, emphasis
+---
+
+# Counting with Dynamic Scale
+
+A number counts from A → B while its transform scale grows to the final size — escalating visual weight ("this is impressive") without tweening `font-size` or forcing text layout on every frame. The final font size is static CSS; only the transform changes.
+
+## How It Works
+
+Two synchronized tweens at the SAME timeline position with the SAME ease: (1) a proxy value rendered as text via `onUpdate` (`Math.round(...).toLocaleString()`), (2) the counter's transform `scale: START_SCALE → 1`, where `START_SCALE = START_SIZE / END_SIZE`. A suffix (`%`, `×`, `+`) slides in AFTER the count lands — the number gets its own beat — and a label fades in early.
+
+## Recipe
+
+```html
+<!-- inside a standard scene clip (hyperframes-core) -->
+<div class="counter-wrap">
+  <span class="counter" id="counter">0</span><span class="counter-suffix">{suffix}</span>
+</div>
+<div class="counter-label">{label}</div>
+```
+
+```css
+.counter-wrap {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  width: {counterContainerWidth}; /* fixed width — no layout shift as digit count changes */
+}
+.counter {
+  font-variant-numeric: tabular-nums; /* MANDATORY — digits keep equal width */
+  display: inline-block;
+  font-size: {endSize}; /* final size is static; GSAP animates scale, not font-size */
+  transform-origin: center center;
+}
+.counter-suffix {
+  opacity: 0;
+  transform: translateY(20px);
+}
+```
+
+```js
+const counter = document.getElementById("counter");
+const state = { value: 0 };
+const START_SCALE = START_SIZE / END_SIZE;
+
+// Count value — onUpdate changes text only
+tl.to(
+  state,
+  {
+    value: TARGET_VALUE,
+    duration: COUNT_DUR,
+    ease: COUNT_EASE,
+    onUpdate: () => {
+      counter.textContent = Math.round(state.value).toLocaleString();
+    },
+  },
+  0,
+);
+
+// Visual growth — compositor transform sharing the count's timing + ease
+tl.fromTo(counter, { scale: START_SCALE }, { scale: 1, duration: COUNT_DUR, ease: COUNT_EASE }, 0);
+
+// Suffix slides in AFTER the count completes
+tl.to(
+  ".counter-suffix",
+  { opacity: 1, y: 0, duration: SUFFIX_DUR, ease: `back.out(${SUFFIX_BOUNCE_FACTOR})` },
+  COUNT_DUR,
+);
+
+// Label fades in early
+tl.from(".counter-label", { opacity: 0, y: 12, duration: LABEL_DUR, ease: "power2.out" }, LABEL_AT);
+```
+
+## Variations
+
+- **Direct `innerText` tween (no proxy)** — GSAP can tween `innerText` directly for a number-only counter; keep the proxy form when you need locale formatting or suffix logic. The scale tween stays separate either way:
+
+```js
+tl.to(
+  counter,
+  { innerText: TARGET_VALUE, duration: COUNT_DUR, ease: COUNT_EASE, snap: { innerText: 1 } },
+  0,
+);
+```
+
+- **3D depth entry** — add a `tl.from(".counter", { z: -300, ... }, 0)` push-in; requires `perspective` on `.counter-wrap` and `transform-style: preserve-3d` on the counter.
+- **Multi-stat coordinated reveal** — 3 stats counting in parallel share the SAME ease, duration, and start position so they finish together (a chord, not an arpeggio). Each stat usually also needs a paired graphic (bar / ring / stars) — don't stop at the number; see [stat-bars-and-fills.md](stat-bars-and-fills.md).
+
+## Values
+
+| token                 | range                                       | notes                                                                         |
+| --------------------- | ------------------------------------------- | ----------------------------------------------------------------------------- |
+| TARGET_VALUE          | 2–3 digits ideal                            | 4+ digits needs a wider container; must fit at END_SIZE without clipping      |
+| START_SIZE / END_SIZE | START ≈ 40–60% of END                       | design inputs used once for START_SCALE; never tween either                   |
+| COUNT_DUR             | 1.2–2.5s                                    | below ~0.8s reads as a flash — the eye must read the digits scrolling past    |
+| COUNT_EASE            | `power2.out` / `power3.out` / `expo.out` | shared by value + scale; more `.out` = more dramatic deceleration at the peak |
+| SUFFIX_DUR            | 0.3–0.6s                                    | fires at `COUNT_DUR`, never during the count                                  |
+| SUFFIX_BOUNCE_FACTOR  | 1.4–2.0                                     | overshoot is fine on the suffix (it's punctuation, not data)                  |
+| LABEL_AT / LABEL_DUR  | AT < COUNT_DUR/2; 0.4–0.7s                  | label arrives before the count peaks                                          |
+
+## Critical Constraints
+
+- **`tabular-nums` mandatory** + fixed-width container as belt-and-suspenders — without them digit-count transitions (9 → 10 → 100) jitter as glyph widths change.
+- **Never set `fontSize` in `onUpdate`** — final type size is static CSS; only the transform changes per frame. Keep `onUpdate` O(1): set text only, no style writes or DOM creation.
+- **`Math.round`, not `Math.floor`** — halfway through the final integer should already display the final value.
+- **Avoid `back.out` / `elastic.out` on the counter itself** — overshoot makes the number look unstable (it's data, not decoration). Grow in place, don't bounce.
+- **Label is BIG TEXT, not a page-style caption** — a tiny paragraph under a hero-size number reads as visual noise in video. Display-size, uppercase, tracked: the label is part of the headline.
+
+## See also
+
+`stat-bars-and-fills` (the paired graphic — give it the same ease/duration so number and fill land as one beat) · `svg-path-draw` (icons drawing in around the number) · `center-outward-expansion` (icons bursting outward at the count peak).

package/dist/assets/design/skills/hyperframes-animation/rules/css-marker-patterns.md

@@ -0,0 +1,208 @@
+# CSS Patterns for Marker Highlighting
+
+Pure CSS + GSAP implementations of all five MarkerHighlight.js drawing modes — no external library dependency, full timeline control. Snippets show mechanism DOM only, inside a standard scene clip (hyperframes-core); assume `tl` exists.
+
+Shared scaffold for every mode: the wrap is `position: relative; display: inline`; the text copy is `position: relative` and z-indexed **above** the accent (below it for sketchout, where the lines cross the text).
+
+## 1. Highlight Mode
+
+Yellow marker sweep behind text — the most common mode.
+
+```html
+<span class="mh-highlight-wrap">
+  <span class="mh-highlight-bar" id="hl-1"></span>
+  <span class="mh-highlight-text">highlighted text</span>
+</span>
+```
+
+```css
+.mh-highlight-bar {
+  position: absolute;
+  inset: 0 -6px; /* bleed past the text edges */
+  background: #fdd835;
+  opacity: 0.35;
+  transform: scaleX(0);
+  transform-origin: left center;
+  border-radius: 3px;
+  z-index: 0;
+}
+```
+
+```js
+tl.to("#hl-1", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.6);
+// Optional hand-drawn skew: gsap.set("#hl-1", { skewX: -2 });
+// Multi-line: tl.to(".mh-highlight-bar", { scaleX: 1, ..., stagger: 0.3 }, 0.6);
+```
+
+## 2. Circle Mode
+
+Hand-drawn ellipse around text — `border-radius: 50%` plus a slight rotation for organic feel.
+
+```html
+<span class="mh-circle-wrap">
+  <span class="mh-circle-text">IMPORTANT</span>
+  <span class="mh-circle-ring" id="circle-1"></span>
+</span>
+```
+
+```css
+.mh-circle-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 130%; /* tight (short words): 150%; rounded-rect: 120% + border-radius: 30% */
+  height: 160%;
+  transform: translate(-50%, -50%) rotate(-3deg) scale(0);
+  border: 3px solid #e53935;
+  border-radius: 50%;
+  z-index: 0;
+}
+```
+
+```js
+tl.to("#circle-1", { scale: 1, rotation: -3, duration: 0.6, ease: "back.out(1.7)" }, 0.7);
+```
+
+## 3. Burst Mode
+
+Radiating lines from text center — each line a positioned span rotated to its angle. Use ~12 lines at 30° steps and **vary `--len` (40–80px)**; equal lengths look mechanical.
+
+```html
+<span class="mh-burst-wrap">
+  <span class="mh-burst-text">WOW</span>
+  <span class="mh-burst-container" id="burst-1">
+    <span class="mh-burst-line" style="--angle: 0deg; --len: 70px;"></span>
+    <span class="mh-burst-line" style="--angle: 30deg; --len: 55px;"></span>
+    <!-- …one line per 30° step through 330deg, --len varied 40-80px -->
+  </span>
+</span>
+```
+
+```css
+.mh-burst-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  z-index: 1; /* text copy at z-index: 2 */
+}
+.mh-burst-line {
+  position: absolute;
+  display: block;
+  width: 3px;
+  height: var(--len);
+  background: #1e88e5;
+  left: -1.5px;
+  top: calc(-1 * var(--len));
+  transform: rotate(var(--angle));
+  transform-origin: bottom center;
+  opacity: 0;
+}
+```
+
+```js
+tl.fromTo(
+  "#burst-1 .mh-burst-line",
+  { scaleY: 0, opacity: 0 },
+  { scaleY: 1, opacity: 1, duration: 0.4, ease: "power2.out", stagger: 0.03 },
+  0.7,
+);
+```
+
+## 4. Scribble Mode
+
+Wavy SVG underline that draws itself via `stroke-dashoffset`.
+
+```html
+<span class="mh-scribble-wrap">
+  <span class="mh-scribble-text">underlined text</span>
+  <svg class="mh-scribble-svg" viewBox="0 0 500 24" preserveAspectRatio="none">
+    <path
+      id="scribble-1"
+      d="M0,12 Q31,0 62,12 Q93,24 125,12 Q156,0 187,12 Q218,24 250,12 Q281,0 312,12 Q343,24 375,12 Q406,0 437,12 Q468,24 500,12"
+      fill="none"
+      stroke="#FDD835"
+      stroke-width="3"
+      stroke-linecap="round"
+    />
+  </svg>
+</span>
+```
+
+```css
+.mh-scribble-svg {
+  position: absolute;
+  left: 0;
+  bottom: -6px; /* strikethrough variant: top: 50%; transform: translateY(-50%) */
+  width: 100%;
+  height: 24px;
+  z-index: 0;
+}
+```
+
+```js
+const path = document.querySelector("#scribble-1");
+const len = path.getTotalLength();
+gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+tl.to("#scribble-1", { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" }, 0.7);
+```
+
+Path tuning: the `Q` control points alternate y between 0 and 24 for a natural wobble. Tighter waves = smaller x-increments (~25px per half-wave); looser = ~50px; subtler amplitude = y range 0–16.
+
+## 5. Sketchout Mode
+
+Cross-hatch over de-emphasized text — two angled lines create a "crossed out" effect.
+
+```html
+<span class="mh-sketchout-wrap">
+  <span class="mh-sketchout-text">old price</span>
+  <span class="mh-sketchout-lines" id="sketchout-1">
+    <span class="mh-sketchout-line mh-sketchout-fwd"></span>
+    <span class="mh-sketchout-line mh-sketchout-bwd"></span>
+  </span>
+</span>
+```
+
+```css
+.mh-sketchout-lines {
+  position: absolute;
+  inset: 0 -4px;
+  overflow: hidden;
+  z-index: 1; /* text at z-index: 0 — the lines cross OVER it */
+}
+.mh-sketchout-line {
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #e53935;
+  transform-origin: left center;
+}
+.mh-sketchout-fwd {
+  transform: scaleX(0) rotate(-12deg);
+}
+.mh-sketchout-bwd {
+  transform: scaleX(0) rotate(12deg);
+}
+```
+
+```js
+// Forward slash first, backward follows
+tl.to("#sketchout-1 .mh-sketchout-fwd", { scaleX: 1, duration: 0.3, ease: "power2.out" }, 1.0);
+tl.to("#sketchout-1 .mh-sketchout-bwd", { scaleX: 1, duration: 0.3, ease: "power2.out" }, 1.15);
+```
+
+## Combining Modes in Captions
+
+Cycle modes across caption groups for visual variety — every 2-3 groups for high energy, 3-4 for medium, 4-5 for low:
+
+```js
+const MODES = ["highlight", "circle", "burst", "scribble"];
+GROUPS.forEach((group, gi) => {
+  const mode = MODES[gi % MODES.length];
+  group.emphasisWords.forEach((word) => applyMode(word.el, mode, tl, word.start));
+});
+```

package/dist/assets/design/skills/hyperframes-animation/rules/cursor-click-ripple.md

@@ -0,0 +1,104 @@
+---
+name: cursor-click-ripple
+description: Animated mouse cursor moves to target, clicks with scale depression and expanding ripple rings.
+metadata:
+  tags: cursor, click, ripple, interaction, mouse, button
+---
+
+# Cursor Click Ripple
+
+An animated cursor moves to a target element, performs a click with visual depression, and emits expanding ripple rings from the click point. Three sequential phases on one timeline: **move** (eased translation to the target's center) → **click** (scale depression on cursor + target together, yoyo back) → **ripple** (1–3 staggered rings expand and fade from the click point). This is a _point event at one location_ — a sustained hold across space is [cursor-drag.md](cursor-drag.md).
+
+## Recipe
+
+```html
+<button class="target-button">{ctaLabel}</button>
+<div class="cursor"><!-- arrow SVG, positioned at the entry corner --></div>
+<!-- Rings live in DOM from t=0 at the click-target CENTER, scale 0 + opacity 0 -->
+<div class="ripple ripple-1"></div>
+<div class="ripple ripple-2"></div>
+<div class="ripple ripple-3"></div>
+```
+
+```css
+.ripple {
+  position: absolute;
+  left: 50%;
+  top: 50%; /* click-target center */
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 2px solid {rippleColor};
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+```js
+// Phase 1 — Move: eased, not linear
+tl.to(".cursor", { x: TARGET_X, y: TARGET_Y, duration: MOVE_DUR, ease: MOVE_EASE }, 0);
+
+// Phase 2 — Click: cursor + target depress together, then return
+tl.to(
+  ".cursor",
+  { scale: CURSOR_PRESS_SCALE, duration: PRESS_DUR, ease: "power2.in", yoyo: true, repeat: 1 },
+  CLICK_AT,
+);
+tl.to(
+  ".target-button",
+  { scale: TARGET_PRESS_SCALE, duration: PRESS_DUR, ease: "power2.in", yoyo: true, repeat: 1 },
+  CLICK_AT,
+);
+
+// Phase 3 — Ripple burst, N rings staggered from the click point
+tl.set([".ripple-1", ".ripple-2", ".ripple-3"], { opacity: 1 }, RIPPLE_AT);
+tl.to(
+  [".ripple-1", ".ripple-2", ".ripple-3"],
+  {
+    scale: RIPPLE_SCALE,
+    opacity: 0,
+    duration: RIPPLE_DUR,
+    ease: RIPPLE_EASE,
+    stagger: RIPPLE_STAGGER,
+    immediateRender: false, // holds scale 0 / opacity 0 until the click moment
+  },
+  RIPPLE_AT,
+);
+```
+
+## Variations
+
+- **Single ring** — one `.ripple`, no stagger; more elegant when the rest of the scene is busy.
+- **Keyframed attack-decay** — a `keyframes` block ramps opacity 0 → peak → 0 across the duration; a clearer "energy radiates and dissipates" envelope.
+- **Multi-ring expanding pulse** — 3 rings at 0.08 s stagger when the click is the scene's climactic moment.
+
+## Values
+
+| token                       | range                       | notes                                                                                                                                  |
+| --------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| MOVE_DUR                    | 0.4–1.0 s                   | short darts; long reads as a "considered click." Must end before CLICK_AT or it reads as a misclick                                    |
+| MOVE_EASE                   | discrete choice             | `power2.inOut` calm · `power3.out` decisive · `back.out(1.2–1.4)` settles onto the button with a tiny recoil (higher reads cartoonish) |
+| CLICK_AT                    | `MOVE_DUR + 0–0.3 s`        | zero pause reads as autopilot; >0.3 s reads as hesitation                                                                              |
+| PRESS_DUR                   | 0.06–0.12 s (half; yoyo ×2) | short crisp, long mushy; must finish before the next phase needs normal scale                                                          |
+| CURSOR / TARGET_PRESS_SCALE | 0.80–0.90 / 0.92–0.97       | cursor compresses MORE than the target — the cursor is the actor, the target the recipient                                             |
+| RIPPLE_AT                   | `CLICK_AT + 0–0.08 s`       | simultaneous feels causal; slight delay feels acoustic                                                                                 |
+| RIPPLE_DUR                  | 0.5–1.0 s                   | sharp ping vs soft sonar; must complete before anything that needs the ring gone                                                       |
+| RIPPLE_SCALE                | 3–6                         | 3 stays near the click site; if the ring would exit the frame before fading, lower it                                                  |
+| RIPPLE_STAGGER              | 0.06–0.12 s (or 0)          | below ~0.06 s reads as one thick ring; above ~0.12 s as separate events                                                                |
+| RIPPLE_EASE                 | discrete choice             | `power2.out` standard ping · `power3.out` sharper attack · `expo.out` strong distant pulse                                             |
+| TARGET_X / TARGET_Y         | layout-derived              | must match the target's visual centroid — a 4 px miss reads as missing the button                                                      |
+
+Reference values: `../examples/cta-orbit-collapse.html` — 0.5 s move on `back.out(1.3)`, click +0.2 s, press 0.08 s at 0.85/0.95, single ring to 5× over 0.7 s `power2.out`.
+
+## Critical Constraints
+
+- **Move before click** — trigger the click only after the move tween settles; clicking mid-motion reads as unintentional.
+- **Rings live in DOM from t=0** at the click-target center with `scale: 0` + `opacity: 0` — never conditionally rendered; `immediateRender: false` on the expand so they hold invisible until the trigger.
+- **Ripple from the click point** — the button's visual center, not any element's bounding-box origin.
+- **Synchronized depression** — cursor + target depress at the same position with the same duration, and both yoyo back.
+- **Cursor above all content** (high z-index) for the whole sequence; `pointer-events: none` on cursor + ripples.
+
+## See also
+
+`orbit-3d-entry` (click as the pivot that collapses orbiters) · `center-outward-expansion` (click triggers an outward burst) · `press-release-spring` (stronger physical feel on the target) · `scale-swap-transition` (the button's post-click state change).

package/dist/assets/design/skills/hyperframes-animation/rules/cursor-drag.md

@@ -0,0 +1,141 @@
+---
+name: cursor-drag
+description: The drag verb for driven cursors — grab, lift, travel, drop-snap. A semi-transparent ghost chip rides the cursor in exact lockstep and snaps into a placed field with selection chrome; variants cover fill-handle auto-fill down rows, corner-handle proportional resize (uniform scale only), and grab-lift-reorder with the neighbor springing into the vacated slot.
+metadata:
+  tags: cursor, drag, drop, ghost, handle, resize, reorder, snap, interaction, mouse
+---
+
+# Cursor Drag
+
+> Cursor look, sizing, off-screen entry, and tip-targeting defer to the **oversized-cursor house doctrine** — this rule owns the drag _mechanics_ only.
+
+THE held-journey verb: the cursor presses down on a payload, carries it, and releases it somewhere else. The load-bearing law is **lockstep**: the cursor tip and the payload's grip point move as one rigid object for the entire travel — a one-frame drift reads as the chip slipping out of the hand. Distinct from [cursor-click-ripple.md](cursor-click-ripple.md) (move → point event at a single location): a drag is a _sustained hold across space_, and the payload is the co-star. Reuse [physics-press-reaction.md](physics-press-reaction.md) for the grab's press dip (cursor + payload compress together); for N simultaneous actors see [multi-cursor-choreography.md](multi-cursor-choreography.md) — this rule is one protagonist performing a workflow beat.
+
+## How It Works
+
+Five beats: **approach** (cursor glides to the source chip, `power2.inOut`) → **grab** (press dip on cursor + chip together; on the down-beat `tl.set` reveals the **ghost** — a pre-rendered semi-transparent clone at the chip's position — plus a small lift `fromTo` to `GHOST_LIFT_SCALE` with a soft shadow, `immediateRender: false`) → **travel** (cursor and ghost move as **matched tweens**) → **drop** (ghost off, placed field pops in with selection chrome) → **adjust / exit** (optional handle resize, then the cursor glides to the next target).
+
+Matched tweens = same timeline position, same duration, same ease, over straight lines — that keeps the pair rigidly locked at every eased midpoint. A shared `[cursor, ghost]` targets array only works when both need identical deltas; with different start points, use two matched `fromTo`s. Rule-specific corollary of the contract's absolute-values law: a relative `+=` travel on either partner breaks the lockstep under seek.
+
+Measure chip and slot rects at build time — a 4 px miss on the drop line reads as a failed drag (montage: authored CSS-matched constants, per the contract). `TIP_OFFSET_X/Y` aligns the cursor's TIP (not its bbox) with the grip point.
+
+## Recipe
+
+```html
+<!-- Ghost = clone of the chip AT the chip's position, in DOM from t=0, opacity: 0.
+     Same silhouette as the chip — or hand and payload read as different objects.
+     Placed field sits at the slot's final position, opacity: 0, with a .select-box
+     and four corner .handle elements inside. -->
+<div class="tray-chip" id="source-chip"><span class="grip-dots">⋮⋮</span> {chipLabel}</div>
+<div class="drag-ghost" id="drag-ghost"><span class="grip-dots">⋮⋮</span> {chipLabel}</div>
+<div class="placed-field" id="placed-field">
+  {placedLabel}
+  <!-- + selection chrome -->
+</div>
+<div class="cursor" id="cursor"><!-- arrow SVG --></div>
+```
+
+```js
+const chipRect = document.querySelector("#source-chip").getBoundingClientRect();
+const slotRect = document.querySelector("#placed-field").getBoundingClientRect();
+const TRAVEL_DX = slotRect.left - chipRect.left;
+const TRAVEL_DY = slotRect.top - chipRect.top;
+
+// Travel — MATCHED tweens: same position, duration, ease; absolute endpoints.
+tl.fromTo(
+  "#drag-ghost",
+  { x: 0, y: 0 },
+  { x: TRAVEL_DX, y: TRAVEL_DY, duration: TRAVEL_DUR, ease: TRAVEL_EASE, immediateRender: false },
+  TRAVEL_AT,
+);
+tl.fromTo(
+  "#cursor",
+  { x: chipRect.left + TIP_OFFSET_X, y: chipRect.top + TIP_OFFSET_Y },
+  {
+    x: chipRect.left + TIP_OFFSET_X + TRAVEL_DX,
+    y: chipRect.top + TIP_OFFSET_Y + TRAVEL_DY,
+    duration: TRAVEL_DUR,
+    ease: TRAVEL_EASE,
+    immediateRender: false,
+  },
+  TRAVEL_AT,
+);
+
+// Drop is a state commit: ghost off + placed field on at the SAME position.
+tl.set("#drag-ghost", { opacity: 0 }, DROP_AT);
+tl.fromTo(
+  "#placed-field",
+  { opacity: 0, scale: 0.92 },
+  { opacity: 1, scale: 1, duration: SNAP_DUR, ease: "power3.out" },
+  DROP_AT,
+);
+tl.fromTo(
+  [".select-box", ".handle"],
+  { opacity: 0, scale: 0.6 },
+  { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out", stagger: 0.02 },
+  DROP_AT + SNAP_DUR * 0.4,
+);
+```
+
+## Variations
+
+- **Corner-handle proportional resize** — width/height tweens are forbidden, so the resize renders as uniform `scale` with `transform-origin` at the **opposite (anchor) corner**: the anchor stays put, the dragged corner travels. The corner's position is _linear in scale_ (`corner = anchor + scale × (corner₀ − anchor)`), so a cursor tween to the corner's end position with the **same duration and ease** stays glued to the handle exactly:
+
+  ```js
+  tl.to(
+    "#placed-field",
+    { scale: RESIZE_SCALE, transformOrigin: "0% 0%", duration: RESIZE_DUR, ease: "power2.inOut" },
+    RESIZE_AT,
+  );
+  tl.to(
+    "#cursor",
+    { x: CORNER_END_X, y: CORNER_END_Y, duration: RESIZE_DUR, ease: "power2.inOut" },
+    RESIZE_AT,
+  );
+  ```
+
+  One-axis resizes are `scaleX`/`scaleY` on the same origin logic — stretch-safe boxes only; route to [anchored-layout-expand.md](anchored-layout-expand.md)'s counter-scale when content must stay undistorted.
+
+- **Fill-handle auto-fill** — the spreadsheet verb: the cursor drags a cell's fill handle straight down on a `"none"` (linear) ease; each row commits via a snapped `tl.set` (never a fade) keyed to the handle's linear progress, so the fill edge and cursor never separate:
+
+  ```js
+  tl.fromTo(
+    "#cursor",
+    { y: HANDLE_Y },
+    { y: HANDLE_Y + FILL_DIST, duration: FILL_DUR, ease: "none", immediateRender: false },
+    FILL_AT,
+  );
+  gsap.utils.toArray(".fill-cell").forEach((cell, i) => {
+    tl.set(cell, { opacity: 1 }, FILL_AT + ((i + 1) / CELL_COUNT) * FILL_DUR);
+  });
+  ```
+
+- **Grab-lift-reorder** — lift = `y: -LIFT_RISE` + `rotation: LIFT_TILT` (sign from index parity) + shadow on; as the carried item crosses the neighbor's midpoint, the **neighbor springs into the vacated slot** (a `fromTo` translate at `TRAVEL_AT + TRAVEL_DUR * 0.5`, `power3.out`); drop = rotation → 0, shadow off, settle. The neighbor's counter-move sells the reorder — without it the list reads as broken.
+- **Component grab between surfaces** — a chip dragged mockup-to-mockup, swapping identity on drop (`tl.set` recolor + label swap at `DROP_AT`, tiny settle pop); the drop chrome is just the identity swap, no handles.
+
+## Values
+
+| token                       | range                                        | notes                                                                                                                          |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| approach / press            | per cursor-click-ripple                      | approach 0.4–1.0 s; press-dip halves 0.06–0.12 s; cursor compresses more than the payload                                      |
+| GHOST_OPACITY               | 0.5–0.75                                     | below 0.5 vanishes on busy documents; ~1.0 reads as the original moving — then hide `#source-chip` at the grab                 |
+| GHOST_LIFT_SCALE / LIFT_DUR | 1.03–1.08 / 0.12–0.2 s                       | the shadow is the "off the surface" cue; the scale is garnish                                                                  |
+| TRAVEL_DUR / TRAVEL_EASE    | 0.6–1.2 s / `power2.inOut`                   | a considered drag decelerates into the slot; `power1.inOut` for a calmer carry. `TRAVEL_AT ≥ GRAB_AT + 2×PRESS_DUR + LIFT_DUR` |
+| DROP_AT / SNAP_DUR          | `TRAVEL_AT + TRAVEL_DUR` exactly / 0.2–0.3 s | a gap between arrival and snap reads as the drop failing                                                                       |
+| RESIZE_SCALE / RESIZE_DUR   | by story (≈0.4–0.6) / 0.6–1.0 s              | `power2.inOut`                                                                                                                 |
+| LIFT_RISE / LIFT_TILT       | 6–12 px / 2–4°                               | reorder pickup; index-derived tilt sign                                                                                        |
+
+## Critical Constraints
+
+- **Lockstep is the law** — matched tweens over straight lines (or one shared tween when deltas are identical); verify at the eased midpoint, not just the endpoints. Absolute endpoints on both partners.
+- **The ghost is pre-rendered** — a DOM clone at the source position from t=0, `opacity: 0`, revealed by `tl.set`; placed field and chrome likewise. Never cloned at runtime, never conditionally rendered.
+- **Grab has weight** — press dip + lift shadow before any travel; a chip departing without a press reads as telekinesis.
+- **Drop is a state commit** — ghost off and placed field on at the same timeline position, `DROP_AT = TRAVEL_AT + TRAVEL_DUR`.
+- **Resizes are uniform `scale`, origin at the anchor corner** — never width/height; one-axis stretch on stretch-safe boxes only.
+- **Linear ease on the fill-handle travel** — the evenly-spaced `tl.set` reveals depend on it; an eased handle bunches them at the ends.
+- **One verb per beat** — drag, then resize, then exit; overlapping a travel with a resize turns choreography into mush.
+- **`pointer-events: none`** on cursor, ghost, and chrome.
+
+## See also
+
+`physics-press-reaction` (the grab's press dip) · `cursor-click-ripple` (a plain click before/after) · `spring-pop-entrance` (the placed field's snap-settle) · `waterfall-entry` (kinetic fill cascade) · `multi-phase-camera` (the zoom-breathing carrier shot golden drag demos ride) · `multi-cursor-choreography` (this verb inside an ensemble).