Todo Feature Media — Implementation Plan (Story -> EffectCraft Pipeline)

Target Architecture

We use a unified Story -> EffectCraft 60fps WebM Pipeline that reuses AppWeaver's existing StoryDefinition<TState> scenarios without requiring custom DOM keyframe players or manual Chrome sanitization.

Core Principles

  1. Single Source of Truth (StoryDefinition<TState>):
    • Stories defined in plugins/<id>/stories.ts (and command-specific story files) serve as the sole source of truth for both interactive in-app walkthroughs and high-fidelity showcase videos.
    • Leverages story.showcase and step.showcase: { title, description, delayMs }, plus focus_target, wait_for_action, run_command, and set_state.
  2. Focused Widget Capture (apps/landing/scripts/story-media/capture-story.ts):
    • Headless Playwright runner boots http://127.0.0.1:5553/?story=<storyId>&capture=1 in unauthenticated demo sandbox mode at 2x DPR.
    • Walkthrough overlay chrome (.story-walkthrough), demo help drawers (.widget-help-panel), and unrelated input forms (.todo-ai-prompt-form) are suppressed in parent and Shadow DOM to ensure pure, content-height widget captures (cardWidth: 901, cardHeight: 1012 at 2x DPR).
    • Isolates the relevant .card widget. Captures:
      • Full widget state before and after action (state-1-before.png, state-1-after.png)
      • Bounding box of the target relative to the card ({ x, y, w, h })
      • Crisp cutout crop of the target (state-1-crop.png)
      • Active showcase title and description
    • Writes an internal resumable manifest.json.
  3. Cinematic EffectCraft Generation (apps/landing/scripts/story-media/compile-effectcraft.ts):
    • Dynamic display scaling: $K = \min(0.75, 920/\text{cardWidth}, 900/\text{cardHeight}) = 0.75$, centering a 759px high card with comfortable 160px top/bottom margins on a 1080p canvas.
    • Spotlight Focus & Blur: Ramps ADBE Gaussian Blur 2 to 18 (Repeat Edge Pixels enabled) on the base card during focus steps, while positioning state-1-crop.png on top with a cyan vector accent border and subtle 108% zoom push.
    • Click Feedback & Cross-Fade: Expanding click ripple timed to the filter toggle action, cross-fading to state-1-after.png at 2.4s.
    • 3-Second Clean Board Payoff: From 2.5s to 5.5s, holds the unblurred, sharp champion-filtered tree at 103% hero scale so viewers can read all branch champions in context.
    • Typography Hierarchy:
      • Headline: Two-line high-contrast pairing using AvenirNext-Bold at 60pt (Line 1: "Cut the noise." in white [0.97, 0.97, 0.97]; Line 2: "Keep the winners." in cyan [0.31, 0.79, 0.79]).
      • Body: AvenirNext-Medium at 25pt (leading: 38, tracking: 5, C_DESC: [0.76, 0.79, 0.82]), comfortable 2-line layout without text collisions.
      • Badge: CourierNewPS-BoldMT at 20pt, centered inside an unrounded (roundness: 0) sharp olive box with a clean 37px air gap above the headline.
    • Top-Left Anchoring & Pixel Alignment:
      • Anchors all footage layers (lBefore, lAfter, and lCrop1) by [0, 0] at CARD_TOP_LEFT = [CARD[0] - (IMG_W * K) / 2, CARD[1] - (IMG_H * K) / 2], eliminating the 48px vertical misalignment bug caused by dynamic card height variations before vs. after filtering.
    • Renders 60 FPS WebM (champions.webm), high-res poster at 3.5s (poster.png), and spotlight frame at 1.8s (spotlight.png).
  4. Unified Command Entry Point (apps/landing/scripts/story-media/generate.ts):
    • Single command bun apps/landing/scripts/story-media/generate.ts --story <id> [--fps 60] [--reuse-capture] connects capture and compilation in-memory.

Progress

1. Feature Definition & Story Authoring

2. URL Bootstrap & Capture Mode

3. Pipeline Implementation (apps/landing/scripts/story-media/)

Verification & Status