tejas-captions

name	tejas-captions
description	Phrase-chunk caption system for Tejas's personal video content — Geist card, 3-5 word chunks, muted→paper active word, clean non-overlapping exits. Use when building or editing captions for Tejas's talking-head or technical shorts. For AIS/client work, use the older caption recipe in /short-form-video or /hyperframes instead.

Tejas · Phrase-Chunk Captions

A caption system for Tejas's personal-content videos. Encodes the warm-monochrome + shadcn-modern aesthetic. See MOTION_PHILOSOPHY.md §3.2 and the design spec §4 for the philosophy.

When to fire

• Any new composition under video-projects/ authored in the Tejas aesthetic
• Rebuilding an existing project's captions.html into the phrase-chunk model
• Re-syncing captions after audio edit (use the existing shift() pattern from may-shorts-19)

DO NOT fire for AIS projects, may-shorts-* (other than future Tejas ones), clickup-demo, or client work. Those keep their existing karaoke styles.

The model

• Transcripts come word-timed from npx hyperframes transcribe <audio>.mp4 --model small.en --json.
• Words are grouped into chunks of 3–5 words, hard max 5.
• Chunk breaks on: (a) punctuation , . ? ! ; — punctuated word ends its chunk; (b) pauses ≥ 300ms between consecutive word end/start timestamps.
• One chunk visible at a time. The outgoing chunk's exit animation fully completes (including visibility-hide) BEFORE the incoming chunk's enter begins.

Visual locked

• Wrap: position: absolute; left: 48px; right: 48px; bottom: 240px; display: flex; justify-content: center;
• Card: background: rgba(10,10,9,0.78); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(250,250,246,0.08); border-radius: 12px; padding: 12px 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(250,250,246,0.06);
• Text: font: 700 54px/1.15 "Geist", sans-serif; letter-spacing: -0.015em;
• Words start color: var(--tejas-muted); (zinc-500). On their start: tween to var(--tejas-paper) + scale: 1.04 in 0.22s expo.out. On their end: scale back to 1 in 0.14s power2.out; color stays paper until chunk exit.

Timing

For chunk with first-word-start t0 and last-word-end t1:

• Fade-in at fadeInAt = t0 - 0.14, duration 0.18s power2.out, y: 8→0, opacity: 0→1
• Per-word active/end tweens fire at each word's start / end within the chunk
• Fade-out at fadeOutAt = t1 + 0.12, duration 0.22s power2.in, y: 0→-6, opacity: 1→0
• Visibility hidden at hideAt = fadeOutAt + FADE_OUT + 0.05 = t1 + 0.39
• Next chunk's fadeInAt MUST be ≥ previous chunk's hideAt. If not, either: (a) shorten the previous chunk by moving word boundaries, (b) shrink the POST_HOLD / PRE_ROLL values for that pair, or (c) merge the two chunks.

Keyword emphasis (inline)

Mark a word's kw: true in the transcript data. On that word's start:

• Its color tween ends at var(--tejas-paper) with scale: 1.10 (not 1.04).
• A child <span class="cap-kw-underline"> tweens transform: scaleX(0→1) in 0.18s expo.out, transform-origin: left center.
• On chunk exit, the underline fades with the chunk.

Reserved for one word per chunk max. Use sparingly — the payoff word only.

Canonical captions.html recipe

The complete reference implementation below is from video-projects/brain-energy/compositions/captions.html. When invoking this skill on a new project, adapt the CHUNKS array and COMP_DURATION constant to match the new transcript and clip duration; all styling, timing constants, and DOM-building logic stay the same.

<template id="captions-template">
  <div
    data-composition-id="captions"
    data-start="0"
    data-width="1080"
    data-height="1920"
    data-duration="37.17"
  >
    <div class="cap-stage" id="cap-stage"></div>

    <style>
      [data-composition-id="captions"] {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      [data-composition-id="captions"] .cap-stage {
        position: absolute;
        left: 48px;
        right: 48px;
        bottom: 240px;
        height: 0;
        pointer-events: none;
      }
      [data-composition-id="captions"] .cap-card {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
      }
      [data-composition-id="captions"] .cap-inner {
        background: rgba(10, 10, 9, 0.78);
        backdrop-filter: blur(14px) saturate(1.1);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        border: 1px solid rgba(250, 250, 246, 0.08);
        border-radius: 12px;
        padding: 12px 22px;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(250, 250, 246, 0.06);
        font-family: "Geist", "Inter", sans-serif;
        font-weight: 700;
        font-size: 54px;
        line-height: 1.15;
        letter-spacing: -0.015em;
        color: var(--tejas-muted);
        max-width: 960px;
        text-align: center;
        white-space: normal;
      }
      [data-composition-id="captions"] .cap-word {
        display: inline-block;
        transform-origin: center center;
        color: var(--tejas-muted);
        will-change: transform, color;
        position: relative;
      }
      [data-composition-id="captions"] .cap-kw-underline {
        position: absolute;
        left: 3%;
        right: 3%;
        bottom: -6px;
        height: 3px;
        background: var(--tejas-paper);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        will-change: transform;
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <script>
      (function () {
        // === Phrase-chunk transcript ===
        // Pulled from assets/brainenergy.json (word-timed Whisper output).
        // Chunks grouped at punctuation / pauses >= 300ms, max 5 words each.
        // `kw: true` marks the one payoff word per chunk (if any).
        const CHUNKS = [
          { words: [
            { w: "Your", s: 0.15, e: 0.25 },
            { w: "brain", s: 0.35, e: 0.56 },
            { w: "mogs", s: 0.56, e: 0.81, kw: true },
            { w: "every", s: 0.81, e: 1.12 },
            { w: "computer", s: 1.12, e: 2.04 }
          ]},
          { words: [
            { w: "in", s: 2.04, e: 2.12 },
            { w: "terms of", s: 2.18, e: 2.51 },
            { w: "energy", s: 2.51, e: 2.83 },
            { w: "efficiency.", s: 2.91, e: 3.36 }
          ]},
          { words: [
            { w: "Your", s: 3.51, e: 3.58 },
            { w: "brain", s: 3.58, e: 3.86 },
            { w: "runs at", s: 3.86, e: 4.19 },
            { w: "about", s: 4.19, e: 4.47 },
            { w: "20 watts.", s: 4.47, e: 5.12, kw: true }
          ]},
          { words: [
            { w: "That's", s: 5.27, e: 5.37 },
            { w: "like a", s: 5.47, e: 5.67 },
            { w: "dim", s: 5.67, e: 5.82 },
            { w: "light bulb,", s: 5.82, e: 6.41 }
          ]},
          { words: [
            { w: "even", s: 6.41, e: 6.59 },
            { w: "less than an", s: 6.61, e: 7.07 },
            { w: "iPhone", s: 7.07, e: 7.35 },
            { w: "charger.", s: 7.35, e: 7.84 }
          ]},
          { words: [
            { w: "To do what", s: 7.84, e: 8.25 },
            { w: "your brain", s: 8.25, e: 8.69 },
            { w: "does in a", s: 8.76, e: 9.09 },
            { w: "single", s: 9.09, e: 9.39 },
            { w: "conversation,", s: 9.39, e: 10.19 }
          ]},
          { words: [
            { w: "AI takes", s: 10.23, e: 10.65 },
            { w: "about", s: 10.65, e: 10.92 },
            { w: "20", s: 11.01, e: 11.36 },
            { w: "kilowatts.", s: 11.36, e: 12.16, kw: true }
          ]},
          { words: [
            { w: "But the", s: 12.16, e: 12.42 },
            { w: "thing that", s: 12.51, e: 12.91 },
            { w: "keeps researchers", s: 12.91, e: 13.71 },
            { w: "up", s: 13.71, e: 13.80 }
          ]},
          { words: [
            { w: "is that we", s: 13.89, e: 14.16 },
            { w: "don't actually", s: 14.16, e: 14.56 },
            { w: "know", s: 14.56, e: 14.72 },
            { w: "why.", s: 14.72, e: 14.96, kw: true }
          ]},
          { words: [
            { w: "The brain", s: 15.11, e: 15.42 },
            { w: "is as", s: 15.42, e: 15.63 },
            { w: "efficient", s: 15.63, e: 16.12 },
            { w: "as it is.", s: 16.22, e: 16.72 }
          ]},
          { words: [
            { w: "We just", s: 16.72, e: 16.98 },
            { w: "know it does", s: 17.07, e: 17.67 },
            { w: "something", s: 17.78, e: 18.24 },
            { w: "fundamentally", s: 18.24, e: 18.84 },
            { w: "different.", s: 18.90, e: 19.12 }
          ]},
          { words: [
            { w: "Than", s: 19.27, e: 19.30 },
            { w: "every other", s: 19.30, e: 19.76 },
            { w: "computer on the", s: 19.76, e: 20.28 },
            { w: "planet.", s: 20.38, e: 20.76 }
          ]},
          { words: [
            { w: "AI companies", s: 20.76, e: 21.51 },
            { w: "are spending", s: 21.51, e: 22.24 },
            { w: "billions of", s: 22.24, e: 22.82, kw: true },
            { w: "dollars", s: 22.82, e: 23.15 }
          ]},
          { words: [
            { w: "trying to", s: 23.19, e: 23.58 },
            { w: "bridge this", s: 23.58, e: 24.06 },
            { w: "gap.", s: 24.06, e: 24.24 }
          ]},
          { words: [
            { w: "But the", s: 24.24, e: 24.50 },
            { w: "answer to this", s: 24.59, e: 25.09 }
          ]},
          { words: [
            { w: "may actually", s: 25.16, e: 25.69 },
            { w: "lie in your", s: 25.69, e: 26.14 },
            { w: "skull.", s: 26.14, e: 26.56, kw: true }
          ]},
          { words: [
            { w: "I'm a", s: 26.63, e: 26.81 },
            { w: "CS student", s: 26.91, e: 27.51 },
            { w: "at", s: 27.62, e: 27.68 },
            { w: "CMU,", s: 27.68, e: 28.08 }
          ]},
          { words: [
            { w: "and I'm", s: 28.08, e: 28.34 },
            { w: "obsessed with", s: 28.41, e: 28.96 },
            { w: "this", s: 28.96, e: 29.16 },
            { w: "problem.", s: 29.16, e: 29.64 }
          ]},
          { words: [
            { w: "So I'm", s: 29.64, e: 29.94 },
            { w: "building a way", s: 30.03, e: 30.63 },
            { w: "to copy", s: 30.74, e: 30.98 },
            { w: "exactly", s: 30.98, e: 31.32 }
          ]},
          { words: [
            { w: "what the", s: 31.41, e: 31.79 },
            { w: "brain does,", s: 31.79, e: 32.40 }
          ]},
          { words: [
            { w: "and", s: 32.40, e: 32.51 },
            { w: "publishing", s: 32.59, e: 33.00 },
            { w: "all of it.", s: 33.15, e: 33.44 }
          ]},
          { words: [
            { w: "If you", s: 33.44, e: 33.64 },
            { w: "want to", s: 33.64, e: 33.88 },
            { w: "build something", s: 33.88, e: 34.39 }
          ]},
          { words: [
            { w: "along with me", s: 34.50, e: 34.88 },
            { w: "that helps", s: 34.88, e: 35.30 },
            { w: "save the", s: 35.30, e: 35.70 },
            { w: "planet,", s: 35.70, e: 36.18 }
          ]},
          { words: [
            { w: "follow", s: 36.18, e: 36.52 },
            { w: "along for", s: 36.52, e: 36.95 },
            { w: "more.", s: 36.95, e: 37.35 }
          ]}
        ];

        const COMP_DURATION = 37.17;
        const FADE_IN = 0.18;
        const FADE_OUT = 0.22;
        const PRE_ROLL = 0.14;
        const POST_HOLD = 0.12;
        const HIDE_BUFFER = 0.05;

        const MUTED = "var(--tejas-muted)";
        const PAPER = "var(--tejas-paper)";

        const stage = document.querySelector('[data-composition-id="captions"] #cap-stage');
        if (!stage) return;

        // Build DOM for each chunk
        CHUNKS.forEach(function (chunk, ci) {
          const card = document.createElement("div");
          card.className = "cap-card";
          card.id = "cap-c-" + ci;

          const inner = document.createElement("div");
          inner.className = "cap-inner";

          chunk.words.forEach(function (w, wi) {
            const span = document.createElement("span");
            span.className = "cap-word";
            span.id = "cap-w-" + ci + "-" + wi;
            span.textContent = w.w;
            if (w.kw) {
              const ul = document.createElement("span");
              ul.className = "cap-kw-underline";
              ul.id = "cap-ul-" + ci + "-" + wi;
              span.appendChild(ul);
            }
            inner.appendChild(span);
            if (wi < chunk.words.length - 1) {
              inner.appendChild(document.createTextNode(" "));
            }
          });

          card.appendChild(inner);
          stage.appendChild(card);
        });

        const tl = gsap.timeline({ paused: true });

        CHUNKS.forEach(function (chunk, ci) {
          const t0 = chunk.words[0].s;
          const t1 = chunk.words[chunk.words.length - 1].e;
          const cardSel = '[data-composition-id="captions"] #cap-c-' + ci;

          const fadeInAt = Math.max(t0 - PRE_ROLL, 0);
          const fadeOutAt = t1 + POST_HOLD;
          const hideAt = fadeOutAt + FADE_OUT + HIDE_BUFFER;

          // Reset words to muted before the chunk appears
          chunk.words.forEach(function (w, wi) {
            const wordSel = '[data-composition-id="captions"] #cap-w-' + ci + "-" + wi;
            tl.set(wordSel, { color: MUTED, scale: 1.0 }, fadeInAt);
            if (w.kw) {
              const ulSel = '[data-composition-id="captions"] #cap-ul-' + ci + "-" + wi;
              tl.set(ulSel, { scaleX: 0 }, fadeInAt);
            }
          });

          tl.set(cardSel, { visibility: "visible" }, fadeInAt);
          tl.fromTo(
            cardSel,
            { opacity: 0, y: 8 },
            { opacity: 1, y: 0, duration: FADE_IN, ease: "power2.out" },
            fadeInAt
          );

          chunk.words.forEach(function (w, wi) {
            const wordSel = '[data-composition-id="captions"] #cap-w-' + ci + "-" + wi;
            const activeScale = w.kw ? 1.10 : 1.04;
            tl.to(
              wordSel,
              { color: PAPER, scale: activeScale, duration: 0.22, ease: "expo.out" },
              w.s
            );
            // After end, scale returns to 1.0 (kw keeps paper color)
            tl.to(
              wordSel,
              { scale: 1.0, duration: 0.14, ease: "power2.out" },
              w.e
            );
            if (w.kw) {
              const ulSel = '[data-composition-id="captions"] #cap-ul-' + ci + "-" + wi;
              tl.to(ulSel, { scaleX: 1, duration: 0.18, ease: "expo.out" }, w.s);
            }
          });

          tl.to(
            cardSel,
            { opacity: 0, y: -6, duration: FADE_OUT, ease: "power2.in" },
            fadeOutAt
          );
          tl.set(cardSel, { visibility: "hidden" }, hideAt);
        });

        // Anchor tween — Law 10 (fills SLOT_DURATION).
        tl.to({}, { duration: COMP_DURATION }, 0);

        window.__timelines = window.__timelines || {};
        window.__timelines["captions"] = tl;
      })();
    </script>
  </div>
</template>

Checklist before moving on

• All chunks <= 5 words
• Punctuation / pause breaks honored
• next.fadeInAt >= prev.hideAt for every consecutive pair
• Every word has start and end timestamps
• Timeline ends with tl.to({}, { duration: COMP_DURATION }, 0) anchor (Law 10)
• data-composition-id="captions" on root; timeline registered at window.__timelines["captions"]
• npx hyperframes lint passes