christiansalazar-wk/ai-lore

General Video Workflow

Step 1 — Clarify the Brief

Question	Why
Goal? (awareness, demo, tutorial, ad)	pacing and CTA
Audience?	tone, vocabulary, style
Duration?	scene count
Aspect ratio?	16:9, 9:16, 1:1
Brand colors and fonts?	creative direction
Assets available?	media plan
Narration needed?	TTS or pre-recorded

Step 2 — Beat Sheet

00:00 — Hook
00:05 — Context
00:15 — Core content (1–3 beats)
00:45 — CTA / close

Step 3 — Scaffold

npx hyperframes init my-video --template blank
cd my-video

Step 4 — Composition Checklist

• data-hf-scene with descriptive name
• data-hf-duration set
• data-hf-transition if not a hard cut
• Background track is first child in DOM
• Narration clip if needed
• Text clips have data-hf-animate
• All clips have data-hf-start and data-hf-duration

<!DOCTYPE html>
<html data-hf-version="1">
<head>
  <meta charset="UTF-8" />
  <meta name="hf:canvas-width" content="1920" />
  <meta name="hf:canvas-height" content="1080" />
  <meta name="hf:fps" content="30" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet" />
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; }
    :root { --bg: #0d1117; --accent: #58a6ff; --text: #e6edf3; }
  </style>
</head>
<body>
  <div data-hf-scene="hook" data-hf-duration="5s" data-hf-transition="fade">
    <div data-hf-track="bg" data-hf-z="0">
      <div data-hf-clip data-hf-start="0s" data-hf-duration="5s"
           style="width:100%;height:100%;background:var(--bg);position:absolute;"></div>
    </div>
    <div data-hf-track="narration" data-hf-z="1">
      <div data-hf-clip data-hf-tts="Here's why this matters."
           data-hf-tts-voice="en-US-neural-f1" data-hf-start="0.5s"></div>
    </div>
    <div data-hf-track="title" data-hf-z="2">
      <div data-hf-clip data-hf-start="0.3s" data-hf-duration="4.5s"
           data-hf-animate="slide-up"
           style="position:absolute;top:400px;left:0;right:0;text-align:center;">
        <h1 style="font-size:96px;font-weight:900;color:var(--text);">Big Claim Here</h1>
      </div>
    </div>
  </div>
  <div data-hf-scene="content" data-hf-duration="10s" data-hf-transition="cut"></div>
  <div data-hf-scene="cta" data-hf-duration="5s" data-hf-transition="fade"></div>
</body>
</html>

Step 5 — Lint and Preview

npx hyperframes lint
npx hyperframes preview --open

Step 6 — Render

export HEYGEN_API_KEY=your_key
npx hyperframes render --out output.mp4

Quality Checklist

• Watch full video — no jump cuts, no silent gaps
• Text readable (min 24px at 1080p)
• Narration pacing feels natural
• Music doesn't overpower narration
• CTA on screen ≥ 3 seconds
• Logo in first and last scene
• Correct aspect ratio