From 19b14e0b488a66f95068ec0bcb592face96fd5fe Mon Sep 17 00:00:00 2001 From: Tejas Makwana Date: Thu, 12 Nov 2026 22:46:18 +0530 Subject: [PATCH] feat(skills): changelog-video builds the v2 Studio-light weekly video The weekly video now starts from examples/v2, the Nov 2-9 build in the look of the hyperframes.studio launch film: paper ground and the Studio window, the real UI acting out each change, headlines a phone can read, Annie at ~160 wpm with music and a sound on every action. One script, tools/build_audio.py, owns pacing holds, voice phrases and sound cues. Sound effects come from media-use's credited library and the music is the skill's existing bgm.mp3. Co-Authored-By: Claude Opus 5.5 --- .agents/skills/changelog-video/SKILL.md | 250 +++--- .../assets/fonts/TT_Norms_Pro_Light.woff2 | Bin 0 -> 97736 bytes .../changelog-video/examples/v2/BRIEF.md | 89 ++ .../examples/v2/assets/framey-v4.js | 775 ++++++++++++++++++ .../examples/v2/assets/img/hf-logo-light.svg | 31 + .../examples/v2/assets/prism.js | 429 ++++++++++ .../examples/v2/compositions/hook.html | 131 +++ .../examples/v2/compositions/outro.html | 91 ++ .../examples/v2/compositions/t1.html | 117 +++ .../examples/v2/compositions/t2.html | 182 ++++ .../examples/v2/compositions/t3.html | 253 ++++++ .../examples/v2/compositions/t4.html | 201 +++++ .../examples/v2/compositions/t5.html | 95 +++ .../changelog-video/examples/v2/index.html | 157 ++++ .../examples/v2/tools/build_audio.py | 146 ++++ .../changelog-video/references/look-v2.md | 45 + .claude/skills/changelog-video/SKILL.md | 250 +++--- .../assets/fonts/TT_Norms_Pro_Light.woff2 | Bin 0 -> 97736 bytes .../changelog-video/examples/v2/BRIEF.md | 89 ++ .../examples/v2/assets/framey-v4.js | 775 ++++++++++++++++++ .../examples/v2/assets/img/hf-logo-light.svg | 31 + .../examples/v2/assets/prism.js | 429 ++++++++++ .../examples/v2/compositions/hook.html | 131 +++ .../examples/v2/compositions/outro.html | 91 ++ .../examples/v2/compositions/t1.html | 117 +++ .../examples/v2/compositions/t2.html | 182 ++++ .../examples/v2/compositions/t3.html | 253 ++++++ .../examples/v2/compositions/t4.html | 201 +++++ .../examples/v2/compositions/t5.html | 95 +++ .../changelog-video/examples/v2/index.html | 157 ++++ .../examples/v2/tools/build_audio.py | 146 ++++ .../changelog-video/references/look-v2.md | 45 + 32 files changed, 5680 insertions(+), 304 deletions(-) create mode 100644 .agents/skills/changelog-video/assets/fonts/TT_Norms_Pro_Light.woff2 create mode 100644 .agents/skills/changelog-video/examples/v2/BRIEF.md create mode 100644 .agents/skills/changelog-video/examples/v2/assets/framey-v4.js create mode 100644 .agents/skills/changelog-video/examples/v2/assets/img/hf-logo-light.svg create mode 100644 .agents/skills/changelog-video/examples/v2/assets/prism.js create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/hook.html create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/outro.html create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/t1.html create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/t2.html create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/t3.html create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/t4.html create mode 100644 .agents/skills/changelog-video/examples/v2/compositions/t5.html create mode 100644 .agents/skills/changelog-video/examples/v2/index.html create mode 100644 .agents/skills/changelog-video/examples/v2/tools/build_audio.py create mode 100644 .agents/skills/changelog-video/references/look-v2.md create mode 100644 .claude/skills/changelog-video/assets/fonts/TT_Norms_Pro_Light.woff2 create mode 100644 .claude/skills/changelog-video/examples/v2/BRIEF.md create mode 100644 .claude/skills/changelog-video/examples/v2/assets/framey-v4.js create mode 100644 .claude/skills/changelog-video/examples/v2/assets/img/hf-logo-light.svg create mode 100644 .claude/skills/changelog-video/examples/v2/assets/prism.js create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/hook.html create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/outro.html create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/t1.html create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/t2.html create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/t3.html create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/t4.html create mode 100644 .claude/skills/changelog-video/examples/v2/compositions/t5.html create mode 100644 .claude/skills/changelog-video/examples/v2/index.html create mode 100644 .claude/skills/changelog-video/examples/v2/tools/build_audio.py create mode 100644 .claude/skills/changelog-video/references/look-v2.md diff --git a/.agents/skills/changelog-video/SKILL.md b/.agents/skills/changelog-video/SKILL.md index 765bf050c83..e6e1e1523c7 100644 --- a/.agents/skills/changelog-video/SKILL.md +++ b/.agents/skills/changelog-video/SKILL.md @@ -1,197 +1,143 @@ --- name: changelog-video -description: Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill. +description: Turn a weekly changelog .md into the finished weekly HyperFrames video (square 1080, ~45-50 s, the Studio-light look from the hyperframes.studio launch film, real product UI acting out each change, Annie voiceover, music and a sound on every action). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained: fonts, lexicon, the reference build and its audio script ship in this skill. metadata: internal: true --- -# Changelog → Branded Video +# Changelog → weekly video (v2, Studio light) Input: a changelog .md (themes + items, like the weekly HyperFrames digest). -Output: a lint-clean, seam-gate-green HyperFrames project in -`projects/active/weekly-changelog-/`. Render only when asked. +Output: a check-clean HyperFrames project in `projects/active/weekly-changelog-/`. +Render only when asked. -**Load first, non-negotiable:** `motion-doctrine` (+ `cut-the-curve`, -`oversized-cursor` if a cursor appears, `seam-craft`) and `captions-overlay`. -This skill supplies the changelog-specific pipeline; the doctrine supplies the -motion law. +The reference build is `examples/v2/`: the Nov 2-9, 2026 week, built as seven scenes +(hook, t1-t5, outro). Every new week starts from a copy of it and replaces the scene +content; the kit (ground, type, window, chips, cursor, pacing, audio script) stays. +`references/look-v2.md` is the look and motion grammar, measured from the site's launch +film. Read both before writing any scene. -## The prime directive: visualize, don't list +The previous dark look (`examples/master-skeleton.html`, `references/build-spec.md`) is +kept for reference only. Do not mix the two. -Every theme is illustrated by an **animated mock of the actual UI or a -faithful analog** acting out the change in experience — never text bullets. -Route every theme/item through `references/visualization-registry.md` BEFORE -writing the script; the registry decides ui-recreate / ui-analog / terminal / -checklist. Text checklist is the LAST resort, reserved for genuinely -non-visual items (reliability fix lists). +## The prime directive: show the product doing it -## Pipeline +Every highlight is the real HyperFrames UI (rebuilt and decluttered, never a screen +recording) acting out the change: a render matching its preview, an inspector setting, a +Studio tab, a terminal line. Route each item through `references/visualization-registry.md` +first. A text list is the last resort, for items with nothing to show. -### 0 · Bootstrap the project from THIS skill's assets — non-negotiable +## Pipeline -**Do this before writing any composition HTML. Skipping it always produces a video that looks like a similar project you built before, NOT this skill's brand — that's the single most common way this skill goes off-brand.** The skill's assets, fonts, and scaffold are the skill; the SKILL.md prompt is a router. +### 0 · Bootstrap from this skill (always) ```bash -mkdir -p project/assets/fonts -cp /assets/fonts/*.woff2 project/assets/fonts/ -cp /assets/bgm.mp3 project/bgm.mp3 -ffmpeg -y -stream_loop 15 -i /assets/bg-pattern.mp4 -t \ - -vf "scale=1080:1080,fps=30,eq=saturation=0.72,drawbox=c=black@0.5:t=fill" \ - -an -c:v libx264 -crf 20 -pix_fmt yuv420p project/assets/bg-pattern-s.mp4 -cp /examples/master-skeleton.html project/index.html +P=projects/active/weekly-changelog- +mkdir -p $P/assets/fonts $P/assets/audio $P/assets/sfx +cp -R /examples/v2/. $P/ +cp /assets/fonts/TT_Norms_Pro_{Light,Normal,Bold}.woff2 \ + /assets/fonts/tt_norms_pro_mono_regular-webfont.woff2 $P/assets/fonts/ +cp /assets/bgm.mp3 $P/assets/audio/bgm.mp3 +cp skills/media-use/audio/assets/sfx/*.mp3 $P/assets/sfx/ ``` -Then **read `references/build-spec.md` end-to-end** (not skimmed) — it defines the brand tokens (TT Norms Pro + ABC Solar Display + TT Norms Mono, cream `#f5f6f4`, rationed green `#5ef17c`, glass cards with green-tinted borders, kicker/sec-chip pill shape, 32px caption rail at `top: 990`) that every scene inherits from the scaffold. - -Only THEN begin steps 1-6 below. Steps 1-4 (parse, route, script, VO) plan what goes into the scaffold; step 5 fills placeholders (``, ``, ``, ``, scene bodies) inside the already-copied `project/index.html` — you do NOT rewrite the scaffold's chrome, fonts, palette, or layout shell. - -If you catch yourself reaching for `cp` on a prior video's `index.html`, or writing your own `@font-face` declarations, or designing a WebGL shader background instead of using the encoded bg-pattern MP4 above: STOP. Delete the current `index.html` and restart at the `cp` of the master-skeleton scaffold. Rebuilding scene content on the right scaffold is cheaper than retrofitting brand into the wrong scaffold. +Never start from a prior week's project or write your own `@font-face`: the copied +`index.html` holds the shared kit CSS (`.k-paper`, `.k-stage`, `.k-hl`, `.k-win`, `.k-bar`, +`.k-dark`, `.k-chip`, `.k-cursor`) every scene uses. -### 1 · Parse + editorial cut +### 1 · Pick the five -- Extract: week range, headline stats (releases, commits), themes, items. -- **Budget: 45-60s total.** Title ≤2s, outro ≤3.5s, 4 themes ≈ 9-12s each. -- Per theme keep ONE hero visualization + at most 3 spoken items. Everything - else exists only as the outro's "full digest" pointer. Cutting is the job: - a changelog with 30 items still yields ≤14 spoken beats. -- Order themes by story: marquee feature → product surface → performance → - reliability (the digest usually already reads this way). +- Extract: week range, release count and versions, themes, items. +- Keep **five highlights**, each a change a user will feel. Lead with the one that helps the + most people. Everything else lives in the digest the outro points to. +- **Budget: 45-50 s.** Hook ~6 s, five scenes of 4-9 s, outro ~6.5 s. -### 2 · Visualization routing +### 2 · Plan the scenes (`BRIEF.md`) -For each theme, pick the surface from `references/visualization-registry.md` -and write one line: `theme → surface → the 2-4 sequenced actions the mock -performs, each tied to a script phrase`. If no registry surface fits and no -faithful analog exists, it's a checklist scene — don't invent fake UI for -something we can't represent honestly. +Rewrite the copied `BRIEF.md` (it is the Nov 2-9 plan) for this week, one section per +scene in the same shape: ground (`.k-paper` or `.k-stage`), the headline (one bold run + one light run, 7 +words max), the VO line, and the 2-4 timed actions the UI performs, each on a VO phrase. -### 3 · Two-layer script (spoken vs display) +- **Hook:** the prompt "What shipped in HyperFrames this week?" is typed and sent; the + release chips land; five flip to the week's themes; one opens into the first scene. +- **Highlight scenes:** a different framing each time (app as a floating card, one pane + filling the frame, a punch-in on one control, a terminal). The thing that is clicked + becomes the next shot. +- **Outro:** "That's the week." then the official logo wiped in on the end card with the + notes URL. The logo appears nowhere else. -Write the script as **token lines** per `references/script-voice.md`: -conversational register, every technical term carrying a `spoken` phonetic -form from `references/lexicon.json` while `display` keeps standard spelling. -Captions show `display`; the VO reads `spoken`. Any term not in the lexicon: -STOP and ask the user how it's pronounced, then add it to the lexicon. -Save as `script-tokens.json` in the project. +### 3 · Two-layer script -### 4 · VO — Annie (HeyGen, pinned) +Write the VO as token lines per `references/script-voice.md`: conversational, every +technical term with a `spoken` form from `references/lexicon.json`. A term not in the +lexicon: ask how it's said, then add it. Target **~160 words a minute** (about 120 words +for 46 s); faster than ~175 reads as rushed. -```bash -# spoken-layer text only; words JSON = ground-truth timestamps of the SPOKEN text -# Repo-native path: the changelog-video skill runs from the hyperframes repo root, -# so it uses the tracked hyperframes-media TTS helper directly (no `npx hyperframes -# skills` install step). If you've copied the skill into another repo, swap in -# your own path to the media-use / hyperframes-media heygen-tts.mjs. -node skills/hyperframes-media/scripts/heygen-tts.mjs ./vo-spoken.txt \ - -o voiceover.mp3 --words vo-words.json \ - --voice 330290724a1b470fb63153f34d4c0183 # Annie — lifelike (do not substitute) -``` - -Requires `heygen` CLI ≥0.3.0 authenticated (`heygen auth login --oauth`). -Then align spoken timestamps back to display tokens: +### 4 · VO: Annie (HeyGen, pinned) ```bash -node /scripts/align-captions.mjs \ - --tokens script-tokens.json --words vo-words.json --out captions.json +node skills/media-use/audio/scripts/heygen-tts.mjs ./vo-spoken.txt \ + -o assets/audio/vo.wav --words vo-words.json \ + --voice 330290724a1b470fb63153f34d4c0183 # Annie (do not substitute) ``` -`captions.json` is the caption-rail input (display spelling, spoken timing). -The aligner prints `MISMATCH` warnings — resolve every one before building -(usually a lexicon spelling the TTS renders as multiple words). **The audio -is the clock**: all beat times come from `vo-words.json`; a VO regen re-opens -every seam. - -**Word-timings are a hard gate.** Before moving on to step 5, verify -`vo-words.json` is non-empty and has a `words: [...]` array with `start`/`end` -per word. If it's empty (0 bytes) or missing the array — a known failure mode -when the TTS provider returns audio but no timestamp payload — DO NOT proceed -without them. Fallback: forced-align the produced audio against the display -script using local whisper: - -```bash -uvx --from openai-whisper whisper voiceover.mp3 \ - --model base.en --language en --word_timestamps True \ - --output_format json --output_dir . -# then run align-captions.mjs with --words voiceover.json (same shape) -``` - -Whisper mishears TTS renderings ("gee-sap" → "gsap", "heyjen" → "hey Jen", -etc.) — captions still use the DISPLAY spelling from `script-tokens.json`; -whisper only supplies the timestamps. `align-captions.mjs` handles the join. -This fallback is the difference between a captioned build and a silently -uncaptioned one. +Requires the `heygen` CLI ≥0.3.0, authenticated. `vo-words.json` must hold per-word +`start`/`end`; if it is empty, forced-align with whisper (`uvx --from openai-whisper whisper +assets/audio/vo.wav --model base.en --word_timestamps True --output_format json`). ### 5 · Build -Follow `references/build-spec.md` exactly: brand tokens + fonts (bundled in -`/assets/`), the animated background encode, scene scaffold, -chrome, caption rail, one rationed green moment per scene. Then the doctrine -order: `ledger.json` (all ordinary seams cut-the-curve LEFT) → seam-stamp → -internal beats on VO words → seam-gate verify. - -**Captions are non-optional.** The master-skeleton ships a caption-rail IIFE -that reads a `LINES` array — leaving that array empty is a shipped bug, not a -style choice. Populate it from `captions.json` before proceeding to step 6: - -```javascript -// paste in place of "const LINES = /* … */ []" in the caption-rail IIFE: -const LINES = /* contents of captions.json */ [ - { id: 0, end: 2.74, w: [["This", 0.0], ["week,", 0.30], …] }, - … -]; -``` - -If `align-captions.mjs` was skipped or `LINES` is `[]`, the frame check in -step 6 will fail — do not paper over it by removing `#cap-line` from the -scaffold. +1. Write each scene in `compositions/.html` from the example's patterns: `