@mevdragon/vidfarm-devcli 0.14.0 → 0.16.0

package/.agents/skills/hyperframes-animation/rules/reactive-displacement.md

@@ -0,0 +1,277 @@
+---
+name: reactive-displacement
+description: Physical collision where an entering element's spring drives the exiting element's displacement — single source of truth makes the motion causally linked.
+metadata:
+  tags: transition, physics, collision, displacement, spring, causal
+---
+
+# Reactive Displacement
+
+Exit animation of element A is mathematically DERIVED from the entry spring of element B. Creates a causal link: "A moves _because_ B hit it." Distinct from [scale-swap-transition](scale-swap-transition.md) (which overlaps but isn't causal) and [card-morph-anchor](card-morph-anchor.md) (which uses one container morphing dimensions).
+
+## How It Works
+
+A single 0→1 driver tween (the "entry spring") feeds two derived motions:
+
+- **Intruder** (B, entering): position interpolated from off-stage to settled
+- **Victim** (A, exiting): position interpolated from settled to off-stage in the OPPOSITE direction, but completing at a fraction `VICTIM_FRACTION` of the driver (not 1.0)
+
+The fact that the victim's exit finishes BEFORE the intruder's entry creates the "hit then settle" rhythm. Both motions share the same eased driver, so the impact moment is mathematically synchronized.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="collide-scene"
+  data-composition-id="collide-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="stage">
+    <div class="card victim" id="victim">
+      <div class="card-title">{victimHeadline}</div>
+      <div class="card-sub">{victimSubline}</div>
+    </div>
+    <div class="card intruder" id="intruder">
+      <div class="card-title">{intruderHeadline}</div>
+      <div class="card-sub">{intruderSubline}</div>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: radial-gradient(ellipse at center, {bgColor} 0%, {bgColorDeep} 70%);
+  font-family: {font};
+}
+.stage {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.card {
+  position: absolute;
+  /* both at center; transform translates them */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 64px 80px;
+  border-radius: 28px;
+  will-change: transform, opacity;
+}
+.victim {
+  background: linear-gradient(160deg, {victimTint} 0%, {bgColorDeep} 70%);
+  border: 1px solid {victimTint};
+  z-index: 1;
+}
+.intruder {
+  background: linear-gradient(160deg, {intruderTint} 0%, {bgColorDeep} 70%);
+  border: 2px solid {intruderBorder};
+  box-shadow: 0 28px 96px {intruderTint};
+  z-index: 2;
+}
+.card-title {
+  font-size: 200px;
+  font-weight: 900;
+  color: {textColor};
+  line-height: 1;
+  letter-spacing: -4px;
+}
+.card-sub {
+  font-size: 36px;
+  font-weight: 800;
+  letter-spacing: 10px;
+  text-transform: uppercase;
+  color: {accentColor};
+  text-align: center;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Off-stage distances are derived from the stage width.
+  const INTRUDER_START_X = STAGE_W; // off-stage right
+  const VICTIM_END_X = -STAGE_W; // off-stage left, opposite direction
+
+  // Initial state — victim centered, intruder off-stage right
+  gsap.set("#victim", { x: 0, opacity: 1, rotation: 0 });
+  gsap.set("#intruder", { x: INTRUDER_START_X, opacity: 0, rotation: -INTRUDER_TILT });
+
+  // Single driver — the entry spring — runs 0→1 over the impact arc
+  const driver = { p: 0 };
+  tl.to(
+    driver,
+    {
+      p: 1,
+      duration: DRIVER_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`, // intruder spring
+      onUpdate: () => {
+        // Intruder: full 0→1 progress maps to enter (off-stage → center)
+        const intruderX = INTRUDER_START_X * (1 - driver.p);
+        const intruderOpacity = Math.min(1, driver.p * FADE_IN_SHARPNESS);
+        const intruderRot = -INTRUDER_TILT * (1 - driver.p); // settle to 0°
+        const intruder = document.getElementById("intruder");
+        intruder.style.transform = `translate(-50%, -50%) translateX(${intruderX}px) rotate(${intruderRot}deg)`;
+        intruder.style.opacity = String(intruderOpacity);
+
+        // Victim: completes exit at VICTIM_FRACTION of driver (intruder still flying in)
+        // so the impact MOMENT is the visual punch — by the time intruder centers,
+        // victim is already off-stage.
+        const victimP = Math.min(1, driver.p / VICTIM_FRACTION);
+        const victimX = VICTIM_END_X * victimP;
+        const victimOpacity = 1 - victimP;
+        const victim = document.getElementById("victim");
+        victim.style.transform = `translate(-50%, -50%) translateX(${victimX}px)`;
+        victim.style.opacity = String(victimOpacity);
+      },
+    },
+    DRIVER_AT,
+  );
+
+  // Climax dwell — intruder holds at center after settle (no additional motion;
+  // composition continues with intruder centered for ≥ DWELL_MIN seconds).
+
+  window.__timelines["collide-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **DRIVER_AT** — when the entry spring begins
+  - Range: phase-dependent (typically a few seconds in)
+  - Effects: too early skips setup beats; too late stalls the cut
+  - Constraints: must allow ≥ DWELL_MIN of climax dwell before composition ends
+  - Reference: example schedules the displacement after the prior reading beat resolves
+
+- **DRIVER_DUR** — full intruder entry duration
+  - Range: 0.6-1.4 s
+  - Effects: short = zippy/punchy impact; long = heavy/landed impact
+  - Constraints: tune against `BOUNCE_FACTOR` — higher bounce on long durations reads as floaty
+  - Reference: see the corresponding blueprint / example
+
+- **BOUNCE_FACTOR** — `back.out()` coefficient on the intruder spring
+  - Range: 1.2-2.0 (discrete choice within `back.out` family)
+  - Effects: low ≈ firm settle; high ≈ overshoot/bounce
+  - Constraints: ease family stays `back.out` (or upgrade to `elastic.out` if you want oscillation); changing family rewrites the feel
+  - Reference: examples typically sit between 1.4 and 1.6
+
+- **VICTIM_FRACTION** — fraction of `DRIVER_DUR` over which the victim completes its exit
+  - Range: 0.4-0.5
+  - Effects: < 0.4 victim disappears before impact reads; > 0.5 motion feels parallel, not causal
+  - Constraints: hard upper limit ~0.6; beyond that the collision metaphor breaks
+  - Reference: this rule's pattern uses ~0.5
+
+- **STAGE_W** — stage width in pixels, used to place elements off-stage
+  - Range: equal to the composition's `data-width`
+  - Effects: smaller values leave the off-stage element partially visible at start
+  - Constraints: must be ≥ composition width
+  - Reference: examples use the project's render width directly
+
+- **INTRUDER_TILT** — initial rotation (degrees) the intruder rotates from as it settles to 0°
+  - Range: 5-15°
+  - Effects: low = clean glide; high = visible "spin-and-plant"
+  - Constraints: keep sign consistent with entry direction (matches momentum transfer)
+  - Reference: ~10° is a typical mid-impact tilt
+
+- **FADE_IN_SHARPNESS** — multiplier controlling how quickly intruder opacity reaches 1
+  - Range: 3-8 (intruder reaches opacity 1 at `1/FADE_IN_SHARPNESS` of progress)
+  - Effects: low = soft fade alongside motion; high = pops in early and reads as solid
+  - Constraints: > 1; below 1 means intruder is still transparent at center
+  - Reference: most examples use a sharp early reveal
+
+- **DWELL_MIN** — minimum climax dwell after the intruder settles
+  - Range: ≥ 1.0 s
+  - Effects: shorter feels rushed and unreadable; longer stalls the comp
+  - Constraints: post-impact dwell is where the new content gets read — do not skip
+  - Reference: 1.0-1.5 s is typical
+
+## Variations
+
+### Impact rotation on victim
+
+The victim doesn't just slide off — it ALSO rotates from the impact angle:
+
+```js
+const victimRot = victimP * -VICTIM_KICK_DEG; // rotates as it slides
+victim.style.transform = `translate(-50%, -50%) translateX(${victimX}px) rotate(${victimRot}deg)`;
+```
+
+`VICTIM_KICK_DEG` is typically 15-25°; pick magnitude to match the perceived intruder weight.
+
+### Vertical collision
+
+Intruder enters from top, victim displaced downward. Same math with Y instead of X. Visual feels like "weight dropped on it."
+
+### Wobble after settle
+
+After the intruder centers, a damped sine wobble (`±WOBBLE_AMP_DEG` rotation, decaying over `WOBBLE_DUR`) before stillness. Adds "impact aftermath" before climax dwell.
+
+```js
+const wobble = { p: 0 };
+tl.to(
+  wobble,
+  {
+    p: Math.PI * WOBBLE_CYCLES * 2,
+    duration: WOBBLE_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const rot =
+        Math.sin(wobble.p) * WOBBLE_AMP_DEG * (1 - wobble.p / (Math.PI * WOBBLE_CYCLES * 2)); // linear decay
+      intruder.style.transform = `translate(-50%, -50%) rotate(${rot}deg)`;
+    },
+  },
+  DRIVER_AT + DRIVER_DUR,
+);
+```
+
+### Multi-victim ripple
+
+Intruder displaces multiple aligned cards, each victim getting a slightly delayed exit (cascade ripple). Each victim's `victimP` uses a different driver phase offset.
+
+## Key Principles
+
+- **Single driver = single source of truth** — the entry spring drives BOTH motions. Independent tweens for intruder and victim destroy the causal link; they'd just happen to be near each other in time, not collided.
+- **Victim completes at a fraction of driver** — by the time the intruder reaches center, the victim is GONE. The "hit" is the moment they overlap; after that the victim is just exiting space the intruder will fill.
+- **Directional momentum transfer** — intruder from positive X → victim moves negative X. Same axis. If they move on different axes, it looks like they passed each other, not collided.
+- **Intruder z-index ABOVE victim** — during overlap, the intruder should appear in FRONT (it's the "winner" of the collision). Otherwise the victim looks like it tunneled through.
+- **Intruder enters with rotation, settles flat** — adds momentum visualization. A small initial tilt → 0° at settle reads as "spinning in then planting."
+- **Climax dwell after impact** — the impact is the headline beat. Post-impact dwell is where the new content gets read.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Single driver, multiple derived values in same onUpdate** — don't tween intruder and victim with separate `tl.to()` calls; use ONE driver and compute both inside its onUpdate
+- **`overflow: hidden` on `.scene`** — off-stage motion exceeds the frame
+- **`will-change: transform, opacity`** on both cards
+- **Intruder z-index > victim z-index** — explicit, not relying on DOM order alone
+
+## Combinations
+
+- [hacker-flip-3d.md](hacker-flip-3d.md) — intruder text reveals via hacker-flip during the entry phase
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on intruder during climax dwell
+- [vertical-spring-ticker.md](vertical-spring-ticker.md) — intruder is a ticker that "shoves" the previous content out
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — single driver, multi-value onUpdate
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`

package/.agents/skills/hyperframes-animation/rules/scale-swap-transition.md

@@ -0,0 +1,298 @@
+---
+name: scale-swap-transition
+description: Coordinated shrink-out + spring pop-in morph-like transition between two elements — no SVG path interpolation needed.
+metadata:
+  tags: transition, morph, scale, swap, spring, pop
+---
+
+# Scale-Swap Transition
+
+Simulates a "morph" between two DOM elements by overlapping exit and entrance scale animations. Lighter weight than [card-morph-anchor](card-morph-anchor.md) (which morphs container dimensions) and easier than SVG path interpolation.
+
+## How It Works
+
+At a single trigger time, two coordinated tweens fire:
+
+1. **Outgoing element**: scale `1.0 → EXIT_SCALE` + opacity `1 → 0` (fast `power2.in`)
+2. **Incoming element**: scale `EXIT_SCALE → 1.0` + opacity `0 → 1` (bouncy `back.out(${BOUNCE_FACTOR})` with overshoot)
+
+A small `OVERLAP` window during which both are mid-tween creates the "morph" illusion. Incoming sits on top via z-index so the outgoing's fade-tail doesn't bleed through.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="swap-scene"
+  data-composition-id="swap-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="stack">
+    <div class="swap-wrap">
+      <div class="card outgoing" id="outgoing">
+        <div class="icon">{outgoingIcon}</div>
+        <div class="title">{outgoingLabel}</div>
+      </div>
+      <div class="card incoming" id="incoming">
+        <div class="icon">{incomingIcon}</div>
+        <div class="title">{incomingLabel}</div>
+        <div class="sub" id="sub">{incomingSubline}</div>
+      </div>
+    </div>
+    <div class="brand">{Brand}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBg};
+  font-family: {font};
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: STACK_GAP;
+}
+.swap-wrap {
+  position: relative;
+  width: SWAP_WRAP_W;
+  height: SWAP_WRAP_H;
+}
+.card {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: CARD_INNER_GAP;
+  border-radius: CARD_RADIUS;
+  padding: CARD_PADDING;
+  /* Both elements share transform-origin so they "morph" around the same anchor */
+  transform-origin: 50% 50%;
+  will-change: transform, opacity;
+}
+.card .icon {
+  font-size: ICON_SIZE;
+}
+.card .title {
+  font-size: TITLE_SIZE;
+  font-weight: 900;
+  letter-spacing: TITLE_TRACKING;
+  text-transform: uppercase;
+}
+.card .sub {
+  font-size: SUB_SIZE;
+  font-weight: 700;
+  color: {accentColor};
+  opacity: 0;
+}
+.outgoing {
+  z-index: 1;
+  background: {outgoingBg};
+  border: 1px solid {outgoingBorder};
+  color: {textColor};
+}
+.incoming {
+  /* Incoming starts hidden + smaller, will pop in */
+  z-index: 2;
+  background: {incomingBg};
+  border: 1px solid {incomingBorder};
+  color: {textColor};
+  opacity: 0;
+  transform: scale(EXIT_SCALE);
+}
+.brand {
+  font-size: BRAND_SIZE;
+  font-weight: 900;
+  letter-spacing: BRAND_TRACKING;
+  text-transform: uppercase;
+  color: {brandColor};
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Outgoing: shrink + fade fast
+  tl.to(
+    "#outgoing",
+    {
+      scale: EXIT_SCALE,
+      opacity: 0,
+      duration: EXIT_DUR,
+      ease: "power2.in",
+    },
+    TRIGGER,
+  );
+
+  // Incoming: scale up + fade in with overshoot, starts slightly BEFORE outgoing
+  // finishes (OVERLAP creates the morph illusion).
+  tl.to(
+    "#incoming",
+    {
+      scale: 1.0,
+      opacity: 1,
+      duration: ENTER_DUR,
+      ease: `back.out(${BOUNCE_FACTOR})`,
+    },
+    TRIGGER + EXIT_DUR - OVERLAP,
+  );
+
+  // Subline reveals AFTER the incoming card settles
+  tl.fromTo(
+    "#sub",
+    { opacity: 0, y: SUB_REVEAL_Y_PX },
+    { opacity: 1, y: 0, duration: SUB_REVEAL_DUR, ease: "power3.out" },
+    TRIGGER + EXIT_DUR + SUB_REVEAL_DELAY,
+  );
+
+  // Brand fades in early for context
+  tl.from(
+    ".brand",
+    { opacity: 0, y: BRAND_REVEAL_Y_PX, duration: BRAND_REVEAL_DUR, ease: "power3.out" },
+    BRAND_REVEAL_AT,
+  );
+
+  window.__timelines["swap-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Delayed inner content reveal
+
+The classic pattern: morph the container, then reveal inner text once the container has settled (as in the example above with `.sub`). The 0.2-0.4s gap between morph end and content reveal lets the viewer's eye land on the new container shape before reading the content.
+
+### Triple swap (3-state cycle)
+
+Chain: A→B→C with two triggers `TRIGGER_AB` and `TRIGGER_BC`. Each transition needs its own pair of tweens, and the previous incoming becomes the next outgoing. Useful for state evolution narratives (e.g. early-state → mid-state → final-state labels).
+
+```js
+tl.to("#stateA", { scale: EXIT_SCALE, opacity: 0, duration: EXIT_DUR }, TRIGGER_AB);
+tl.to(
+  "#stateB",
+  { scale: 1.0, opacity: 1, duration: ENTER_DUR, ease: `back.out(${BOUNCE_FACTOR})` },
+  TRIGGER_AB + EXIT_DUR - OVERLAP,
+);
+tl.to("#stateB", { scale: EXIT_SCALE, opacity: 0, duration: EXIT_DUR }, TRIGGER_BC);
+tl.to(
+  "#stateC",
+  { scale: 1.0, opacity: 1, duration: ENTER_DUR, ease: `back.out(${BOUNCE_FACTOR})` },
+  TRIGGER_BC + EXIT_DUR - OVERLAP,
+);
+```
+
+### Color-shift transition (no scale)
+
+For a flat morph between two same-shape states, drop the scale and keep only opacity + a brief background hue tween. Less dramatic but matches a more product-UI tone.
+
+## How to Choose Values
+
+### Timing (seconds)
+
+- **TRIGGER** — when the swap fires.
+  - Constraints: must be ≥ the outgoing element's settled time + a presence-dwell so the outgoing "lands" before transforming
+- **EXIT_DUR** — outgoing shrink + fade duration.
+  - Range: 0.3-0.5 s
+- **ENTER_DUR** — incoming pop-in duration.
+  - Range: 0.45-0.7 s (longer than `EXIT_DUR` to let the overshoot settle)
+- **OVERLAP** — how much the entrance starts before the exit finishes.
+  - Range: 0.1-0.2 s
+  - Constraints: too much (>0.3 s) makes both clearly visible together (no morph); too little (<0.05 s) leaves a visible empty gap
+- **SUB_REVEAL_DELAY** — gap between incoming settle and subline reveal.
+  - Range: 0.2-0.4 s; reveals during the morph compete with the swap for attention
+- **SUB_REVEAL_DUR** — subline fade-in.
+  - Range: 0.3-0.5 s
+- **BRAND_REVEAL_AT** — when the brand/context line fades in.
+  - Constraints: must be < `TRIGGER` (brand is context for the swap, not synchronous with it)
+- **BRAND_REVEAL_DUR** — brand fade-in duration.
+  - Range: 0.4-0.8 s
+
+### Physics
+
+- **EXIT_SCALE** — target scale for outgoing (and starting scale for incoming).
+  - Range: 0.6-0.8; smaller exits feel more dramatic but risk reading as "vanish" instead of "morph"
+- **BOUNCE_FACTOR** — `back.out(${BOUNCE_FACTOR})` overshoot on the incoming.
+  - Range: 1.4 (soft) - 1.8 (firm) - 2.2 (cartoony)
+
+### Positioning offsets
+
+- **SUB_REVEAL_Y_PX** — subline initial y offset (positive = below resting).
+  - Range: 8-20 px
+- **BRAND_REVEAL_Y_PX** — brand initial y offset.
+  - Range: 10-24 px
+
+### Layout
+
+- **STACK_GAP** — gap between swap container and brand line.
+  - Range: 40-96 px
+- **SWAP_WRAP_W / SWAP_WRAP_H** — fixed swap container dimensions; both cards `inset: 0` inside.
+  - Constraints: pick dimensions that fit both states' content; the wrap does not resize during the swap
+- **CARD_INNER_GAP** — gap between icon and title inside a card.
+  - Range: 16-32 px
+- **CARD_RADIUS / CARD_PADDING** — card corner radius and inner padding.
+  - Range: radius 24-40 px; padding 32-64 px
+- **ICON_SIZE / TITLE_SIZE / SUB_SIZE / BRAND_SIZE** — typographic sizes.
+  - Constraints: titles dominate (~80-120 px at 1080p); sub and brand are accent-sized
+- **TITLE_TRACKING / BRAND_TRACKING** — letter-spacing on uppercase labels.
+  - Range: 4-16 px (uppercase reads better with positive tracking)
+
+### Tokens
+
+- **{sceneBg}** — background gradient/color
+- **{font}** — typographic stack
+- **{textColor}** / **{accentColor}** / **{brandColor}** — semantic color tokens
+- **{outgoingBg}** / **{outgoingBorder}** — outgoing card surface + border (typically warm or pre-action hue)
+- **{incomingBg}** / **{incomingBorder}** — incoming card surface + border (typically cool or post-action hue)
+- **{outgoingIcon}** / **{incomingIcon}** — single glyph/emoji per state
+- **{outgoingLabel}** / **{incomingLabel}** — state labels
+- **{incomingSubline}** — supporting copy that fades in after the incoming settles
+- **{Brand}** — brand line shown beneath the swap
+
+## Key Principles
+
+- **Incoming z-index ABOVE outgoing** — without this, the outgoing's fade-tail (opacity 0.3-0.5) bleeds through the incoming's lower opacity and creates a "double-exposed" muddy frame
+- **Both elements share `transform-origin: 50% 50%`** — different origins make the morph feel like one thing teleporting somewhere else
+- **`OVERLAP` in the 0.1-0.2 s window** — too much overlap and both are clearly visible together (no morph); too little and there's a visible empty gap
+- **Bouncy ease ONLY for the incoming** — outgoing uses `power2.in` (rushing away), incoming uses `back.out(${BOUNCE_FACTOR})` (arriving with weight). Reverse it and the swap feels mechanical
+- **Inner content reveals AFTER container settles** — see `SUB_REVEAL_DELAY`. Reveals during the morph compete for attention and lose
+- **Climax dwell ≥1 s after final state lands** — see SKILL universal constraints. After incoming + subline both settle, hold for ≥1 s
+- **Brand reveal early, not at the swap** — context (brand, eyebrow) sets the stage; the swap is the headline. If brand reveals AT the swap, it competes
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on either swap element — competes with GSAP
+- **`will-change: transform, opacity`** on both swap elements
+- **Both elements use `position: absolute; inset: 0`** in the same wrapper — they occupy the same footprint, swap fades one out and pops one in
+- **Don't `display: none` the outgoing** after fade — leave it at `opacity: 0` so layout doesn't reflow
+
+## Combinations
+
+- [press-release-spring.md](press-release-spring.md) — button press TRIGGERS the swap (cause and effect)
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on the final state
+- [card-morph-anchor.md](card-morph-anchor.md) — alternative for SHAPE-changing transitions (this rule is for SAME-shape state swaps)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — two coordinated tweens with overlap
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`