{
  "id": "hyperframes-tiktok-karaoke-talking-head",
  "surface": "video",
  "title": "HyperFrames: 9:16 TikTok Talking-Head with Karaoke Captions",
  "summary": "A vertical 1080×1920 HyperFrames short — TTS-narrated talking-head over a face-cam loop, with karaoke-style word-synced captions, animated lower third, and a tiktok-follow overlay at the end. Mirrors the may-shorts-19 archetype from the HyperFrames student kit.",
  "category": "Short Form",
  "tags": ["hyperframes", "vertical", "tiktok", "captions", "karaoke", "tts"],
  "model": "hyperframes-html",
  "aspect": "9:16",
  "prompt": "Build a 25-second HyperFrames vertical short (1080×1920, 30fps) for a TikTok-style talking-head clip with karaoke captions. Generate the narration with `npx hyperframes tts` first, then transcribe word-level timings with `npx hyperframes transcribe`. Pull `npx hyperframes add tiktok-follow` and `npx hyperframes add yt-lower-third` (we'll use the lower-third as a name plate, mid-clip). Use the css-patterns reference for word highlighting (marker / clip-path / scatter).\n\nVisual identity: warm canvas #1a1410, single hot accent #ff5e3a, off-white #fff8f1 for text. Display: \"Druk Wide\" 84px (or \"Anton\") for caption words; body \"Inter\" 26px for the lower-third name plate. Captions should be tone-adaptive — emphasis words pop with the marker-sweep pattern; numbers use clip-path slam.\n\nLayer structure (root composition):\n• Track 0: <video> face-cam.mp4 (muted, playsinline) full-bleed, slightly cropped, with a 8px inset border in #ff5e3a at 30% opacity.\n• Track 1: <audio> narration.mp3 (data-volume=1) generated by `hyperframes tts`.\n• Track 2: caption stack (sub-composition `captions.html` loaded via data-composition-src). Captions group by 2–3 words per chunk, max 28 chars per line, sit at y=78% of screen. Each word entry: y=24→0 + opacity 0→1 ease power3.out 0.18s, with the active word color-flipping to #ff5e3a on its own start frame (use tl.set(...) inside the timeline at the word's data-start, not at construction time). Exit by clip-path inset wipe over 0.12s right before the next chunk enters.\n• Track 3: lower-third (`yt-lower-third` block, repurposed) entering at 5.0s from x=-360→0 ease expo.out 0.7s, holding 4s, exiting via the transition at 9.5s.\n• Track 4: tiktok-follow overlay enters at 22.0s, holds to 25s end, no exit.\n\nNon-negotiables: captions never overlap or run off-frame — use `window.__hyperframes.fitTextFontSize(...)` for any chunk longer than 22 chars; min font 60px on captions for legibility on mobile; deterministic only; all timelines paused:true; root data-duration=25.\n\nQuality: run `npx hyperframes lint`, then `npx hyperframes validate` (WCAG contrast must clear 4.5:1 against the face-cam frame at 5 sample timestamps), then `npx hyperframes inspect --samples 12`. Fix any overflow, then dispatch render. Output: `tiktok-karaoke-25s.mp4`.",
  "previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png",
  "source": {
    "repo": "heygen-com/hyperframes",
    "license": "Apache-2.0",
    "author": "HeyGen",
    "url": "https://x.com/HeyGen/status/2047333014024396873"
  }
}