mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
refactor(skills): rename graphic-overlays skill to talking-head-recut (#1720)
Rename the `graphic-overlays` workflow skill to `talking-head-recut`: - move skills/graphic-overlays/ -> skills/talking-head-recut/ - update SKILL.md frontmatter name, H1, and self-references - update all /graphic-overlays route references (hyperframes router, general-video, root + cli-template AGENTS.md/CLAUDE.md, docs, quickstart) - update telemetry --skill flag, example composition id, timeline key - update .prettierignore path and scripts/test-skills-fresh.sh Identifier-only rename: the graphic-overlay card mechanism, design references, and trigger wording are unchanged. Co-authored-by: kiritowoo <295860553+kiritowoo@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
kiritowoo
co-authored by
kiritowoo
Claude Opus 4.8
kiritowoo
Claude Opus 4.8
parent
1494f715fb
commit
56859b618f
+1
-1
@@ -13,7 +13,7 @@ packages/**/__goldens__/
|
||||
skills/**/assets/vendor/
|
||||
skills/**/*.min.js
|
||||
# reference snippets with intentional pseudo-markup (literal "..." attributes)
|
||||
skills/graphic-overlays/references/frames/polaroid.html
|
||||
skills/talking-head-recut/references/frames/polaroid.html
|
||||
|
||||
# Generated demo compositions — large video-pipeline output (GSAP/Three/WebGL
|
||||
# embedded), not hand-authored source; reformatting them is churn + risk. Listed
|
||||
|
||||
@@ -16,7 +16,7 @@ npx skills add heygen-com/hyperframes
|
||||
- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured screenshots + assets); for a product **launch / promo**, use `/product-launch-video`.
|
||||
- `/faceless-explainer` — arbitrary text, **no URL and no website capture** → faceless explainer, up to ~3 min (sweet spot ~30-90s); every visual is LLM-invented (typography / abstract graphics / diagram / data-viz).
|
||||
- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (verbatim rail + embedded climax, or pure-cinematic embed); the footage itself is untouched (no NLE-style editing).
|
||||
- `/graphic-overlays` — an existing talking-head / interview / podcast video (MP4) → the same footage packaged with designed **graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath, footage untouched. Replaces the removed `/footage-recut`. For plain captions/subtitles → `/embedded-captions`.
|
||||
- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage packaged with designed **graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath, footage untouched. Replaces the removed `/footage-recut`. For plain captions/subtitles → `/embedded-captions`.
|
||||
- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → code-change explainer, up to ~3 min (changelog / feature reveal / fix / refactor). A PR link, not a product website.
|
||||
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||
- `/general-video` — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes flow — design → plan → layout → build → validate, any length.
|
||||
|
||||
@@ -16,7 +16,7 @@ npx skills add heygen-com/hyperframes
|
||||
- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured screenshots + assets); for a product **launch / promo**, use `/product-launch-video`.
|
||||
- `/faceless-explainer` — arbitrary text, **no URL and no website capture** → faceless explainer, up to ~3 min (sweet spot ~30-90s); every visual is LLM-invented (typography / abstract graphics / diagram / data-viz).
|
||||
- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (verbatim rail + embedded climax, or pure-cinematic embed); the footage itself is untouched (no NLE-style editing).
|
||||
- `/graphic-overlays` — an existing talking-head / interview / podcast video (MP4) → the same footage packaged with designed **graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath, footage untouched. Replaces the removed `/footage-recut`. For plain captions/subtitles → `/embedded-captions`.
|
||||
- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage packaged with designed **graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath, footage untouched. Replaces the removed `/footage-recut`. For plain captions/subtitles → `/embedded-captions`.
|
||||
- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → code-change explainer, up to ~3 min (changelog / feature reveal / fix / refactor). A PR link, not a product website.
|
||||
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||
- `/general-video` — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes flow — design → plan → layout → build → validate, any length.
|
||||
|
||||
@@ -37,7 +37,7 @@ The installer shows a picker. Select the **core skills** below — every project
|
||||
| `/faceless-explainer` | Arbitrary text (no URL) → faceless explainer with its own TTS narration |
|
||||
| `/pr-to-video` | A GitHub PR → code-change explainer |
|
||||
| `/embedded-captions` | An existing talking-head video → the same footage with captions / subtitles |
|
||||
| `/graphic-overlays` | An existing talking-head video → footage packaged with designed graphic cards |
|
||||
| `/talking-head-recut` | An existing talking-head video → footage packaged with designed graphic cards |
|
||||
| `/motion-graphics` | A short, unnarrated, design-led motion graphic (logo sting, kinetic type, stat / chart) |
|
||||
| `/remotion-to-hyperframes` | Port an existing Remotion (React) composition to HyperFrames HTML |
|
||||
|
||||
|
||||
+1
-1
@@ -26,7 +26,7 @@ The installer shows a picker. Select the **core set** every project needs — th
|
||||
| `/hyperframes-registry` | Install catalog blocks and components |
|
||||
| `/general-video` | The general authoring workflow — the fallback for any video that doesn't match a specific workflow |
|
||||
|
||||
The **workflow skills** are optional — add the ones that match your inputs, and `/hyperframes` routes to whichever you've installed: `/product-launch-video`, `/website-to-video`, `/faceless-explainer`, `/pr-to-video`, `/embedded-captions`, `/graphic-overlays`, `/motion-graphics`, `/remotion-to-hyperframes`.
|
||||
The **workflow skills** are optional — add the ones that match your inputs, and `/hyperframes` routes to whichever you've installed: `/product-launch-video`, `/website-to-video`, `/faceless-explainer`, `/pr-to-video`, `/embedded-captions`, `/talking-head-recut`, `/motion-graphics`, `/remotion-to-hyperframes`.
|
||||
|
||||
<Tip>
|
||||
To skip the picker and install everything (core + every workflow) in one shot, run `npx skills add heygen-com/hyperframes --all`.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured visuals); a product **launch / promo** is `/product-launch-video`.
|
||||
- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
|
||||
- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
|
||||
- `/graphic-overlays` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
|
||||
- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
|
||||
- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
|
||||
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||
- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes authoring flow, any length.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured visuals); a product **launch / promo** is `/product-launch-video`.
|
||||
- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
|
||||
- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
|
||||
- `/graphic-overlays` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
|
||||
- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
|
||||
- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
|
||||
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||
- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes authoring flow, any length.
|
||||
|
||||
@@ -235,7 +235,7 @@ say "Verifying skill installation..."
|
||||
|
||||
ROUTER="hyperframes"
|
||||
WORKFLOWS=(product-launch-video website-to-video faceless-explainer embedded-captions \
|
||||
graphic-overlays pr-to-video motion-graphics general-video \
|
||||
talking-head-recut pr-to-video motion-graphics general-video \
|
||||
remotion-to-hyperframes slideshow)
|
||||
DOMAIN=(hyperframes-core hyperframes-creative hyperframes-animation hyperframes-cli hyperframes-media hyperframes-registry)
|
||||
|
||||
@@ -274,7 +274,7 @@ echo "Then type any request you want to test — the agent routes it to a workfl
|
||||
echo " • \"make a product launch video for https://your-site.com/\" → product-launch-video (exercises capture)"
|
||||
echo " • \"explain how transformers work as a faceless explainer video\" → faceless-explainer"
|
||||
echo " • \"make a video from this PR: owner/repo#123\" → pr-to-video"
|
||||
echo " • \"add lower-thirds / overlay cards to ./clip.mp4\" → graphic-overlays"
|
||||
echo " • \"add lower-thirds / overlay cards to ./clip.mp4\" → talking-head-recut"
|
||||
echo " • \"add captions/subtitles to ./clip.mp4\" → embedded-captions"
|
||||
echo " • \"turn https://your-site.com/ into a site tour video\" → website-to-video"
|
||||
echo " • \"a logo reveal / title card / data montage\" → general-video"
|
||||
|
||||
@@ -15,7 +15,7 @@ metadata: { "tags": "orchestrator, general-video, fallback, freeform, compositio
|
||||
|
||||
# general-video — general video workflow
|
||||
|
||||
> **Confirm the route before you build.** This is the **fallback** for custom composition authoring. If the input clearly fits a specialized workflow, prefer it: marketed product → `/product-launch-video`; general site → `/website-to-video`; topic explainer → `/faceless-explainer`; GitHub PR → `/pr-to-video`; existing footage → `/embedded-captions` · `/graphic-overlays`; short unnarrated motion graphic → `/motion-graphics`; Remotion port → `/remotion-to-hyperframes`. **Out of scope**: live / at-render-time data, NLE-style editing of a finished video, or producing footage HyperFrames can't capture. Unsure? **Read `/hyperframes` first.**
|
||||
> **Confirm the route before you build.** This is the **fallback** for custom composition authoring. If the input clearly fits a specialized workflow, prefer it: marketed product → `/product-launch-video`; general site → `/website-to-video`; topic explainer → `/faceless-explainer`; GitHub PR → `/pr-to-video`; existing footage → `/embedded-captions` · `/talking-head-recut`; short unnarrated motion graphic → `/motion-graphics`; Remotion port → `/remotion-to-hyperframes`. **Out of scope**: live / at-render-time data, NLE-style editing of a finished video, or producing footage HyperFrames can't capture. Unsure? **Read `/hyperframes` first.**
|
||||
|
||||
**Build exactly what was asked.** A title card is a title card — not a title card + three supporting scenes + ambient music + captions. If extra scenes or elements would genuinely improve the piece, _propose_ them; don't add them silently. For small edits (fix a color, adjust one duration, add one element), skip the planning steps and go straight to the build.
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@ Routing needs to know **what the video is about** — its input and subject. If
|
||||
| `/faceless-explainer` | **Explaining a topic / concept** from text — no product, no URL; every visual is LLM-invented |
|
||||
| `/pr-to-video` | A **GitHub PR / code change** → changelog / feature-reveal / fix / refactor explainer |
|
||||
| `/embedded-captions` | Adding **captions / subtitles** to an existing talking-head video (footage untouched) |
|
||||
| `/graphic-overlays` | Packaging an existing talking-head video with **designed graphic overlays** — lower-thirds, data callouts, kinetic titles, pull-quotes |
|
||||
| `/talking-head-recut` | Packaging an existing talking-head video with **designed graphic overlays** — lower-thirds, data callouts, kinetic titles, pull-quotes |
|
||||
| `/motion-graphics` | A short, **unnarrated, design-led motion graphic** — kinetic type, a stat / chart hit, a logo sting, a lower-third overlay |
|
||||
| `/music-to-video` | A **music track** → a **beat-synced** video — lyric video, slideshow, or kinetic promo; the music drives pacing (optional user images / videos cut onto the beat grid) |
|
||||
| `/slideshow` | A **presentation / pitch deck / interactive deck** — discrete slides, fragments, branching, hotspots; output is a navigable **deck**, not a rendered video |
|
||||
@@ -69,7 +69,7 @@ Routing needs to know **what the video is about** — its input and subject. If
|
||||
|
||||
- **Motion-first & unnarrated** (under ~10s, the motion _is_ the message) → `/motion-graphics`, regardless of input.
|
||||
- **A URL or script** — markets a specific product (even just naming the site) → `/product-launch-video`; a general non-product site → `/website-to-video`; a GitHub PR link → `/pr-to-video`; explains a concept with no product / site → `/faceless-explainer`. Genuinely unclear product-vs-topic, or launch-vs-general-site → ask one question.
|
||||
- **Existing footage** — plain spoken-word subtitles → `/embedded-captions`; designed overlay cards → `/graphic-overlays`. Neither edits the footage itself (re-timing / recolor / reframe / reorder / audio is NLE editing — out of scope).
|
||||
- **Existing footage** — plain spoken-word subtitles → `/embedded-captions`; designed overlay cards → `/talking-head-recut`. Neither edits the footage itself (re-timing / recolor / reframe / reorder / audio is NLE editing — out of scope).
|
||||
- **A music track is the input** (an audio file, or a video to pull audio from) with **no narration** → `/music-to-video` — the music's beats/energy drive the pacing. (Narrated pieces stay with the input-matched workflow above; `/motion-graphics` is for short unnarrated motion that isn't music-driven.)
|
||||
- **A presentation / pitch deck / interactive deck** (discrete slides, navigation, presenter mode) → `/slideshow` — output is a navigable deck, not a rendered video. An explicit "slideshow" request proceeds directly; an adjacent trigger ("deck / slides / presentation / convert this page") makes `/slideshow` confirm it's a slideshow before authoring, and switch to the appropriate non-slideshow workflow if not.
|
||||
- **Length is a guide, not a gate** — intent picks the workflow; go to `/general-video` only when the piece is clearly longer than ~3 min, or is a static / loop / custom format.
|
||||
@@ -115,7 +115,7 @@ After they run it, re-read the workflow's skill and continue.
|
||||
- **Output:** the same footage **untouched**, with a caption layer — **Standard** (verbatim lower-third rail + an embedded climax behind the subject) or **Cinematic** (every caption composited behind the subject). Any length.
|
||||
- **Triggers:** "add captions / subtitles to this video", "captions behind the subject", "cinematic captions for my clip".
|
||||
|
||||
### `/graphic-overlays`
|
||||
### `/talking-head-recut`
|
||||
|
||||
- **Input:** An existing **talking-head / interview / podcast video** (MP4) to package with on-screen graphics — actual footage. Transcribed locally (Whisper). The clip plays in full underneath, untouched.
|
||||
- **Output:** the same footage with timed **graphic-overlay cards** — kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, picture-in-picture — synced to the transcript. Any length.
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
# Attribution
|
||||
|
||||
The `graphic-overlays` skill (its card-based design system — styles, layouts, frames,
|
||||
The `talking-head-recut` skill (its card-based design system — styles, layouts, frames,
|
||||
fonts, and the GSAP-driven composition workflow) is **adapted from** the open-source
|
||||
**vtake-skills** project (`vtake-cut`):
|
||||
|
||||
> https://github.com/notedit/vtake-skills
|
||||
|
||||
Adaptations for this repo: renamed to `graphic-overlays`; transcription repointed to
|
||||
Adaptations for this repo: renamed to `talking-head-recut`; transcription repointed to
|
||||
local Whisper via `hyperframes transcribe` (dropping the third-party `@notedit/vtake`
|
||||
CLI and the `vtake.app` proxy); audio/metadata extraction inlined with `ffmpeg`/`ffprobe`;
|
||||
the fixed third-party brand outro removed in favour of an optional, neutral outro;
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
name: graphic-overlays
|
||||
name: talking-head-recut
|
||||
description: Package an existing talking-head / interview / podcast video by layering timed, designed GRAPHIC OVERLAY cards onto the playing video — titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript. The source video plays in full; the agent designs and writes each card's HTML in conversation, then renders to MP4 via hyperframes. Use when the user asks for graphic overlays, on-screen graphics / lower-thirds / data callouts / kinetic titles on a video, "package / dress up my video", "add overlay cards / graphic cards", or AI-composed graphic packaging of an existing video. NOT for plain subtitles (→ embedded-captions) or building a video from scratch (→ the creation workflows); when unsure overlays-vs-captions, see /hyperframes.
|
||||
---
|
||||
|
||||
# Graphic Overlays
|
||||
# Talking Head Recut
|
||||
|
||||
Graphic Overlays takes a local video that **plays in full** and layers a sequence of
|
||||
Talking Head Recut takes a local video that **plays in full** and layers a sequence of
|
||||
timed, designed **graphic cards** onto it — titles, lower-thirds, data callouts,
|
||||
quotes, side panels, picture-in-picture — synced to what's being said. The agent
|
||||
designs the cards (timing + content) and **writes each card's HTML directly in the
|
||||
@@ -913,7 +913,7 @@ ffmpeg -y -i "$VIDEO_PATH" -c:v libx264 -crf 18 -g 30 -keyint_min 30 \
|
||||
<body>
|
||||
<div
|
||||
id="stage"
|
||||
data-composition-id="graphic-overlays"
|
||||
data-composition-id="talking-head-recut"
|
||||
data-start="0"
|
||||
data-duration="121.2"
|
||||
data-fps="30"
|
||||
@@ -1042,7 +1042,7 @@ ffmpeg -y -i "$VIDEO_PATH" -c:v libx264 -crf 18 -g 30 -keyint_min 30 \
|
||||
// insert another tl.to('#video-wrap', ...) tween before its enter ──
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["graphic-overlays"] = tl;
|
||||
window.__timelines["talking-head-recut"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
@@ -1136,7 +1136,7 @@ decides where the actual visible card sits.
|
||||
- Build each card's static hero frame first: the moment where the card is fully visible and readable.
|
||||
- Confirm video, cards, subtitles/captions, and diagrams do not unintentionally overlap.
|
||||
- Confirm hidden video areas are clipped by the frame and not visible outside intended bounds.
|
||||
- Register one paused master timeline as `window.__timelines["graphic-overlays"]`.
|
||||
- Register one paused master timeline as `window.__timelines["talking-head-recut"]`.
|
||||
- Build timelines synchronously at page load; no `async`, `setTimeout`, Promises, or media `play()` calls.
|
||||
- Do not use `Math.random()` or `Date.now()` in render paths.
|
||||
- Do not use `repeat: -1`; calculate finite repeats from the video duration.
|
||||
@@ -1152,7 +1152,7 @@ decides where the actual visible card sits.
|
||||
```bash
|
||||
cd "$WORK_DIR"
|
||||
PRODUCER_BROWSER_GPU_MODE=hardware npx hyperframes render public \
|
||||
--skill=graphic-overlays \
|
||||
--skill=talking-head-recut \
|
||||
-o output.mp4 \
|
||||
--fps 30
|
||||
```
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
# V—Take Visual Design Library
|
||||
|
||||
This directory is a **reference library** for the graphic-overlays skill. Style, layout,
|
||||
This directory is a **reference library** for the talking-head-recut skill. Style, layout,
|
||||
and video frame are three **orthogonal** dimensions you can freely mix when
|
||||
designing a takeaway video.
|
||||
|
||||
@@ -10,7 +10,7 @@ Style × Layout × VideoFrame
|
||||
```
|
||||
|
||||
Read a reference file when you decide to use that dimension. Each file is a
|
||||
self-contained HTML fragment that follows the graphic-overlays card-HTML contract
|
||||
self-contained HTML fragment that follows the talking-head-recut card-HTML contract
|
||||
(scoped `<style>`, no `<script>`, no external URLs, animations only via
|
||||
`data-anim-*`).
|
||||
|
||||
Reference in New Issue
Block a user