Skip to content

scene-table.md

Latest commit

 

History

History
100 lines (69 loc) · 4.46 KB

scene-table.md

File metadata and controls

100 lines (69 loc) · 4.46 KB
Raw

engram — Showcase Scene Table

Source-of-truth scene composition for the engram product showcase. Drives showcase.html (Hyperframes scenes), captions.vtt, chapters.vtt, and the rendered MP4. Total runtime: 24s. All scene durations are budgets, not floors — keep them tight.

Composition

# Beat Duration Visual Caption
0 Poster static engram wordmark on dot grid + graph constellation "engram — your AI agent forgets everything. Fix it in 30s."
1 Context (Problem) 0–5s Claude Code session: agent re-reads auth.ts for the 4th time. Token counter ticks: 5,400 → 10,800 → 16,200 → 21,600. Red diff strikethrough on identical re-reads. "Your AI agent re-reads the same files. Every session. Every time."
2 Action (Install) 5–11s Terminal types npm install -g engramx → engram init → engram install-hook. Output streams: 451 nodes, 7 hooks installed. Amber ✓ checks land in sequence. "Three commands. No accounts. No cloud."
3 Action (Intercept) 11–18s Same Claude session: agent calls Read(auth.ts). PreToolUse hook fires (amber pulse). Context packet (~500 tokens) replaces raw file. Token counter ticks down: 21,600 → 2,400. "Hooks at the boundary. Returns a context packet, not the file."
4 Payoff (Results) 18–24s Dashboard tab: 88.1% fewer context tokens (structural) · $0 cloud · 451 nodes · 1005 edges. Mistake memory ⚠ chip surfaces a prior bug. "88.1% fewer context tokens. $0 cloud. Persistent memory."

Scene production rules

  • Every scene opens on a single visible interaction — one mouse hover, one keypress, one packet.
  • Caption text is shown baked into the video (lower-third, JetBrains Mono, amber accent on key terms) AND exposed via WebVTT for accessibility.
  • Transitions between scenes: 400ms clip-path wipe from left edge, amber-tinted seam.
  • No audio in the default delivery. Optional ambient track only on the long-form 60s tutorial.
  • All numbers shown are real numbers from the v2.0.2 release, not placeholders.

Branded cursor

The video uses a custom 24×24 SVG cursor in amber (#f59e0b), drawn as a filled arrow with 1px black outline. Real OS cursors look amateur in a recorded scene. The cursor fades to 30% opacity when not actively pointing.

Captions VTT (canonical)

The captions file at ./captions.vtt is generated from this table. If a scene caption changes, regenerate the VTT. Do not edit the VTT by hand and let the table drift.

Cue format: each scene becomes one cue spanning its duration window.

Chapters VTT

Cue 1 (0:00–0:05) — Problem Cue 2 (0:05–0:11) — Install Cue 3 (0:11–0:18) — Intercept Cue 4 (0:18–0:24) — Result

Used by the live HTML player's chapter scrubber and by the social-platform "skip to" labels.

Reduced-motion storyboard fallback

When prefers-reduced-motion: reduce, the live player swaps for a 4-frame storyboard. Each frame is the strongest single still of its scene plus the caption. Ordered identically to the table above.

Frames live at:

  • ./storyboard/01-problem.svg
  • ./storyboard/02-install.svg
  • ./storyboard/03-intercept.svg
  • ./storyboard/04-payoff.svg

A reduced-motion visitor gets the same information, just static. WCAG-compliant.

Asset deliverables

Asset Path Format Notes
Live HTML player ./showcase.html HTML Self-contained, opens in browser, scrubbable
Hyperframes scenes ./showcase.html (same file, scene divs) HTML Render input for the MP4
Captions ./captions.vtt WebVTT Generated from this table
Chapters ./chapters.vtt WebVTT Generated from this table
Poster ./poster.svg SVG First-frame, used in <video poster> and GitHub README
MP4 (rendered) ./showcase.mp4 H.264 1280×720 Generated by hyperframes render
WebM (rendered) ./showcase.webm VP9 1280×720 Smaller fallback, served first
Storyboard frames ./storyboard/*.svg SVG Reduced-motion fallback

Render command

# Once: clone hyperframes locally
git clone https://github.com/heygen-com/hyperframes ~/tools/hyperframes
cd ~/tools/hyperframes && npm install

# Each render
cd ~/engram
npx hyperframes render \
  --input docs/demos/showcase.html \
  --output docs/demos/showcase.mp4 \
  --width 1280 --height 720 --fps 30 --duration 24

See ./README.md in this folder for the full render guide.