@mevdragon/vidfarm-devcli 0.13.0 → 0.15.0

package/.agents/skills/hyperframes-animation/rules/center-outward-expansion.md

@@ -0,0 +1,227 @@
+---
+name: center-outward-expansion
+description: Elements start clustered at screen center and expand outward to their final positions, driven by a shared progress value.
+metadata:
+  tags: expansion, scatter, center, reveal, layout, sync, burst
+---
+
+# Center-Outward Expansion
+
+Elements begin at a shared center point and radiate outward to their final positions. The expansion can be the entry beat itself, or **driven by another animation's progress** (e.g. a counting number growing) for coordinated motion.
+
+## How It Works
+
+Each element has a `targetX/Y` (its final layout position) and a shared `centerX/Y`. A `progress` value (0→1) interpolates each element between center and target:
+
+```js
+const x = centerX + (targetX - centerX) * progress;
+const y = centerY + (targetY - centerY) * progress;
+```
+
+When `progress = 0` all elements overlap at the center; when `progress = 1` they're at their final spots.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  data-composition-id="burst-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="burst-wrap">
+    <div class="burst-item" data-target-x="-360" data-target-y="-180">{itemA}</div>
+    <div class="burst-item" data-target-x="360" data-target-y="-180">{itemB}</div>
+    <div class="burst-item" data-target-x="-360" data-target-y="180">{itemC}</div>
+    <div class="burst-item" data-target-x="360" data-target-y="180">{itemD}</div>
+    <div class="burst-item" data-target-x="0" data-target-y="-360">{itemE}</div>
+    <div class="burst-item" data-target-x="0" data-target-y="360">{itemF}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.burst-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+.burst-item {
+  position: absolute;
+  /* Items start at the wrap center via the absolute + 50% trick.
+     We tween translate offsets via GSAP, not left/top. */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: {itemSize};
+  height: {itemSize};
+  display: grid;
+  place-items: center;
+  background: {itemBgColor};
+  border-radius: 28px;
+  font-family: {font};
+  font-weight: 900;
+  font-size: 96px;
+  color: {textColor};
+  will-change: transform;
+}
+```
+
+## 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 });
+
+  const items = document.querySelectorAll(".burst-item");
+
+  // Each element gets its own from→to that lerps center (translate(-50%, -50%))
+  // → target offset. xPercent/yPercent bakes the self-centering; x/y animates
+  // toward the target.
+  items.forEach((el, i) => {
+    const targetX = Number(el.dataset.targetX);
+    const targetY = Number(el.dataset.targetY);
+    tl.fromTo(
+      el,
+      { xPercent: -50, yPercent: -50, x: 0, y: 0, scale: 0.6, opacity: 0 },
+      {
+        x: targetX,
+        y: targetY,
+        scale: 1,
+        opacity: 1,
+        duration: EXPAND_DUR,
+        ease: EXPAND_EASE,
+      },
+      i * STAGGER + ENTRY_AT, // stagger; ENTRY_AT offsets the burst beat
+    );
+  });
+
+  window.__timelines["burst-scene"] = tl;
+</script>
+```
+
+## How to Choose Values
+
+- **ITEM_COUNT** — number of elements in the burst
+  - Range: 3–8
+  - Effects: 3 = sparse; 8 = busy. > 8 causes visual chaos where cards overlap mid-expansion
+  - Constraints: at low counts, prefer wider angular spread (target positions further apart)
+
+- **EXPAND_DUR** — duration of each item's center → target tween
+  - Range: 1.0–1.8 s
+  - Effects: shorter = snappy burst; longer = floats outward
+  - Constraints: if driven by a counter, must equal the counter's duration (chord)
+
+- **EXPAND_EASE** — shared ease across all items
+  - Discrete choice: `power2.out`, `power3.out`, `expo.out`
+  - Selection: `power3.out` is the default — fling out then settle. `power2.out` is gentler. `expo.out` makes them stop dramatically. Avoid `in` easings (they read as items being sucked back in mid-air).
+  - Constraint: if driven by another animation, must be identical to the driver's ease
+
+- **STAGGER** — gap between successive items' start times
+  - Range: 0.04–0.08 s
+  - Effects: < 0.04 = simultaneous chord; > 0.08 feels lazy / arpeggiated
+  - Constraints: ITEM_COUNT × STAGGER must be < EXPAND_DUR or the last items still moving when others have landed reads as ragged
+
+- **ENTRY_AT** — offset applied to the whole burst start
+  - Range: 0 – 0.5 s
+  - Effects: > 0 gives a beat of compositional quiet before the burst
+
+- **START_PROGRESS** — fraction of the center→target path where items begin (for partially-spread variant)
+  - Range: 0 (exact center) – 0.5
+  - Effects: 0 = full cluster, dramatic spread; 0.3 = avoids initial pile-up at center
+
+## Variations
+
+### Synced expansion (driven by a counter)
+
+If the burst should mirror a counting animation's progress:
+
+```js
+// Counter tween defines a state.value 0 → TARGET over COUNT_DUR
+const counterState = { value: 0 };
+const burstState = { p: 0 };
+
+// Shared tween — same duration, same ease — visually a "chord"
+tl.to(
+  counterState,
+  {
+    value: COUNT_TARGET,
+    duration: COUNT_DUR,
+    ease: COUNT_EASE,
+    onUpdate: () => (counterEl.textContent = Math.round(counterState.value).toLocaleString()),
+  },
+  0,
+);
+
+tl.to(
+  burstState,
+  {
+    p: 1,
+    duration: COUNT_DUR,
+    ease: COUNT_EASE,
+    onUpdate: () =>
+      items.forEach((el) => {
+        const tx = Number(el.dataset.targetX) * burstState.p;
+        const ty = Number(el.dataset.targetY) * burstState.p;
+        el.style.transform = `translate(-50%, -50%) translate(${tx}px, ${ty}px)`;
+      }),
+  },
+  0,
+);
+```
+
+### Starting partially-spread
+
+To avoid the initial clustered mess (6+ elements stacked at center), start at `START_PROGRESS`:
+
+```js
+{ x: targetX * START_PROGRESS, y: targetY * START_PROGRESS, scale: 0.4, opacity: 0 }
+```
+
+### Idle micro-float at final position
+
+Pair with `sine-wave-loop` after expansion lands — keeps elements alive instead of frozen.
+
+## Key Principles
+
+- **Driver vs driven** — if the burst stands on its own, use a per-item stagger; if it shadows another animation (counter, audio beat), share the same eased progress so they read as one beat
+- **Stagger inside the 0.04-0.08 s band** — too tight and the cluster never separates visually, too loose and the burst feels lazy
+- **Out-easing for the expansion** — out-easing makes items "fling" out then settle. In-easing looks like they're sucked back in mid-air
+- **Element count: 3-8** — fewer feels empty, more causes visual chaos at the center where cards overlap mid-expansion
+- **❗ Don't put a label below the burst as the "real headline"** — if you do, the eye snaps to the label and ignores the burst. The burst IS the beat. If a label is needed, use big block-caps and reveal it post-burst, in the same stacked layout.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Use translate, not left/top** — translating composes cleanly with the centering `translate(-50%, -50%)` trick; mutating `left`/`top` fights the centering and causes pixel jitter
+- **`will-change: transform`** on burst items — many simultaneous transforms benefit from compositor hints
+- **No `position: absolute` parents inside `burst-wrap` other than items themselves** — sibling absolute elements would steal the centered baseline
+
+## Combinations
+
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — counter peak drives the burst peak (chord)
+- [sine-wave-loop.md](sine-wave-loop.md) — idle motion after the burst lands
+- [card-morph-anchor.md](card-morph-anchor.md) — burst out of a morphed card
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + stagger
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`

package/.agents/skills/hyperframes-animation/rules/context-sensitive-cursor.md

@@ -0,0 +1,257 @@
+---
+name: context-sensitive-cursor
+description: Cursor color and styling that adapt to the current text segment being typed — accent color on highlights, dim on placeholders, etc.
+metadata:
+  tags: cursor, color, context, typewriter, styling, segment
+---
+
+# Context-Sensitive Cursor
+
+In a typewriter sequence, the cursor's color (and optionally height/blink rate) matches the **active text segment**. If the typewriter is currently typing a brand name, the cursor is the brand accent color; on a placeholder, it dims to gray. Enhances visual cohesion vs a single fixed cursor color across all text states.
+
+## How It Works
+
+The text is authored as a SEQUENCE of `{text, t, segment}` entries where `segment` is a string identifier ('main' / 'highlight' / 'brand' / 'success'). The driver tween's onUpdate determines the current segment based on `time`, then sets the cursor's CSS color (and optionally other props) to match that segment's palette.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="cursor-scene"
+  data-composition-id="cursor-scene"
+  data-start="0"
+  data-duration="{DURATION}"
+  data-track-index="0"
+>
+  <div class="terminal">
+    <div class="prompt">$</div>
+    <div class="text-wrap">
+      <span class="text" id="text"></span><span class="cursor" id="cursor">_</span>
+    </div>
+  </div>
+</div>
+```
+
+## CSS
+
+Placeholders: `{monoFont}` is the project's monospace stack (proportional fonts cause cursor drift mid-segment); `{bgColor}` is the dark backdrop; `{textColor}` is the readable foreground; `{promptColor}` is the segment-default color for the leading prompt glyph.
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  font-family: {monoFont};
+}
+.terminal {
+  display: flex;
+  align-items: baseline;
+  gap: 24px;
+  font-size: 72px;
+  font-weight: 800;
+  color: {textColor};
+  white-space: pre;
+}
+.prompt {
+  color: {promptColor};
+}
+.text-wrap {
+  display: inline-flex;
+  align-items: baseline;
+  min-width: 1200px;
+}
+.text {
+  color: {textColor};
+  white-space: pre;
+}
+/* Cursor highlights based on active segment via per-frame background swap */
+.cursor {
+  display: inline-block;
+  width: {cursorWidth}px;
+  height: {cursorHeight}px;
+  background: {textColor}; /* default — overridden per segment in onUpdate */
+  margin-left: {cursorGap}px;
+  vertical-align: {cursorBaselineFix}px;
+}
+```
+
+## 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 });
+
+  // Sequence with per-entry segment label.
+  // Each entry: { t: absoluteSeconds, text: cumulative visible string, segment: paletteKey, color: hex }.
+  // As the driver crosses each `t`, the cursor color swaps to that segment's accent —
+  // viewer's eye locks onto the keyword being typed.
+  // Shape: a monotonic timeline of N entries where adjacent entries usually share text-prefix
+  // but may differ in `segment` (which is what makes the cursor color shift mid-line).
+  const SEQUENCE = [
+    { t: 0, text: "", segment: "main", color: "{mainColor}" },
+    { t: T_LEADIN_END, text: "{leadInChunk}", segment: "main", color: "{mainColor}" },
+    { t: T_BRAND_IN, text: "{leadInBrandPrefix}", segment: "brand", color: "{brandColor}" }, // brand segment starts
+    { t: T_BRAND_OUT, text: "{leadInBrandFull}", segment: "main", color: "{mainColor}" }, // back to main
+    { t: T_CMD_IN, text: "{leadInCmdPrefix}", segment: "cmd", color: "{cmdColor}" }, // command segment
+    { t: T_BRAND_2, text: "{leadInCmdBrand}", segment: "brand", color: "{brandColor}" }, // brand again (e.g. filename)
+    { t: T_SUCCESS, text: "{leadInDone}", segment: "success", color: "{successColor}" }, // completion mark
+  ];
+
+  function entryAt(time) {
+    for (let i = SEQUENCE.length - 1; i >= 0; i--) {
+      if (time >= SEQUENCE[i].t) return SEQUENCE[i];
+    }
+    return SEQUENCE[0];
+  }
+
+  const textEl = document.getElementById("text");
+  const cursorEl = document.getElementById("cursor");
+
+  // Discrete state driver — writes text + cursor color
+  const driver = { t: 0 };
+  tl.to(
+    driver,
+    {
+      t: DURATION,
+      duration: DURATION,
+      ease: "none",
+      onUpdate: () => {
+        const entry = entryAt(driver.t);
+        textEl.textContent = entry.text;
+        cursorEl.style.background = entry.color;
+      },
+    },
+    0,
+  );
+
+  // Deterministic blink via sin (NOT CSS animation).
+  // Phase sweep = (2π) × BLINK_CYCLES_PER_SCENE drives a square wave at sign(sin(p)).
+  const blink = { p: 0 };
+  tl.to(
+    blink,
+    {
+      p: Math.PI * 2 * BLINK_CYCLES_PER_SCENE,
+      duration: DURATION,
+      ease: "none",
+      onUpdate: () => {
+        cursorEl.style.opacity = Math.sin(blink.p) > 0 ? "1" : "0";
+      },
+    },
+    0,
+  );
+
+  window.__timelines["cursor-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Non-blinking during active typing
+
+When letters are being added (driver moved forward in the last `TYPING_GRACE` seconds), suppress blink — cursor stays solid. When no typing activity (`driver.t - lastChangeTime > TYPING_GRACE`), resume blink.
+
+```js
+let lastChangeTime = 0,
+  lastText = "";
+// In onUpdate:
+if (entry.text !== lastText) {
+  lastChangeTime = driver.t;
+  lastText = entry.text;
+}
+const isTyping = driver.t - lastChangeTime < TYPING_GRACE;
+cursorEl.style.opacity = isTyping ? "1" : Math.sin(blink.p) > 0 ? "1" : "0";
+```
+
+### Cursor HEIGHT shifts on segment
+
+Larger cursor on brand segment for emphasis (`cursorHeightEmphasis > cursorHeight`):
+
+```js
+cursorEl.style.height =
+  entry.segment === "brand" ? `${cursorHeightEmphasis}px` : `${cursorHeight}px`;
+```
+
+### Cursor reverses contrast on dark text
+
+If a segment is rendered DARK text on light bg, cursor should swap to dark too. Manage via `entry.color` as the SOURCE OF TRUTH and read from there.
+
+## Key Principles
+
+- **Cursor color shifts make brand moments POP** — eye lands on the brand name because the cursor color shifts to brand accent. Without it, cursor is visual noise.
+- **`background` property on the cursor div** — NOT `color` (cursor is a colored block, not a glyph)
+- **Deterministic blink via sin** — never CSS `@keyframes blink`. HF seek will desync.
+- **Cursor `display: inline-block`** — `display: inline` ignores width/height.
+- **`vertical-align: -8px`** (or similar) — visually anchor cursor to text baseline, not full line-height.
+- **`white-space: pre`** on text and parent — preserve trailing spaces so cursor sits at end of segment, not after collapsed space.
+- **Color palette aligned with brand system** — 3-4 colors max for segments (main / brand / cmd / success). More and the segmentation reads as random.
+
+## How to Choose Values
+
+- **DURATION** — total scene length in seconds
+  - Range: 4-8 s for a single typed line; longer if the line is long
+  - Effects: too short truncates the typing; too long leaves a dead tail after the success state
+  - Constraints: must be `≥ SEQUENCE[last].t + (closing dwell)`
+  - Reference: see the corresponding blueprint's example HTML
+
+- **SEQUENCE entry `t` values** — absolute seconds where each new visible text + segment kicks in
+  - Range: monotonically increasing; spacing 0.2-0.5 s between micro-additions (per-word or per-token), longer between segment swaps
+  - Effects: too-tight spacing collapses the typing feel into a slideshow; too-loose drags
+  - Constraints: ordered ascending; entries do not need uniform spacing — slow down on highlights
+  - Reference: see the corresponding blueprint's example HTML
+
+- **Segment palette: mainColor / brandColor / cmdColor / successColor** — the cursor-fill swatches
+  - Range: 3-4 discrete colors max; each should be distinguishable at small cursor width
+  - Effects: too many segments and the swaps read as random; too few and the brand moment loses pop
+  - Constraints: `brandColor` and `successColor` may be similar in hue but should differ in saturation/luminance so a brand→success transition is visible
+  - Reference: see the corresponding blueprint's example HTML
+
+- **cursorWidth / cursorHeight / cursorGap / cursorBaselineFix** — cursor block geometry
+  - Range: cursorWidth 8-24 px; cursorHeight ≈ 0.85-1.0 × fontSize; cursorGap 4-12 px; cursorBaselineFix small negative number to drop below the baseline
+  - Effects: too-thin cursor disappears in render compression; too-tall cursor visually outranks the text
+  - Constraints: must use `display: inline-block` (a `width` on `display: inline` is ignored)
+  - Reference: see the corresponding blueprint's example HTML
+
+- **cursorHeightEmphasis** (Variations) — height when the active segment is the brand
+  - Range: 1.1-1.25 × `cursorHeight`
+  - Effects: subtle bump reads as emphasis; large bump reads as glitch
+  - Constraints: `cursorHeightEmphasis > cursorHeight`
+  - Reference: see the corresponding blueprint's example HTML
+
+- **BLINK_CYCLES_PER_SCENE** — how many full blink cycles span `DURATION`
+  - Range: choose so the period `DURATION / BLINK_CYCLES_PER_SCENE` ≈ 0.6-1.2 s; e.g. an 8-second scene with ~1 s period uses BLINK_CYCLES_PER_SCENE = 8
+  - Effects: short period (many cycles) reads as glitchy / agitated; long period reads as terminal-idle
+  - Constraints: must be a whole number when `DURATION` is fixed — the sin sweep ends mid-cycle otherwise and the cursor pops on the last frame
+  - Reference: see the corresponding blueprint's example HTML
+
+- **TYPING_GRACE** (Variations) — seconds after a text change during which blink is suppressed
+  - Range: 0.15-0.3 s
+  - Effects: low end still blinks while letters are still appearing; high end keeps cursor solid through long holds
+  - Constraints: must be smaller than the shortest dwell between two adjacent SEQUENCE entries — otherwise the cursor never blinks
+  - Reference: see the corresponding blueprint's example HTML
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS animation** on cursor — must be timeline-driven (blink + color)
+- **Cursor `display: inline-block`** — required for width/height
+- **`white-space: pre`** on text container and text — preserve trailing space
+- **Monospace font** — proportional fonts cause cursor to drift mid-segment
+
+## Combinations
+
+- [discrete-text-sequence.md](discrete-text-sequence.md) — uses the same SEQUENCE array pattern; this rule adds the cursor styling layer
+- [camera-cursor-tracking.md](camera-cursor-tracking.md) — camera tracks the cursor across the typing
+- [press-release-spring.md](press-release-spring.md) — after typing completes, a button press confirms the command
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — onUpdate driving cursor color + sin blink
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`