dsh-hyperframes 0.9.1 → 0.9.2

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

@@ -1,115 +0,0 @@
----
-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/skills/hyperframes-animation/rules/css-marker-patterns.md

@@ -1,208 +0,0 @@
-# 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/skills/hyperframes-animation/rules/cursor-click-ripple.md

@@ -1,104 +0,0 @@
----
-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/skills/hyperframes-animation/rules/cursor-drag.md

@@ -1,141 +0,0 @@
----
-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).