mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-05-07 02:51:50 +00:00
20859cc408
Pulls the hyperframes skill up to the latest state of heygen-com/hyperframes skill content. Opened 2026-04-17; upstream has shipped CLI, layout, and path changes since. - SKILL.md: promote the visual-style check to a proper HARD-GATE (DESIGN.md > named style > ask 3 questions, with the #333/#3b82f6/Roboto tells); expand Step 6 to cover audio-reactive (mandatory per-frame tl.call() sampling loop — a single long tween does NOT react to audio), caption exit guarantee (hard tl.set kill after group.end), marker highlighting, and scene transitions; add the animation-map script to Verification; link the new features.md. - references/cli.md: add capture and validate (both shipped commands, both referenced from the workflow but missing from the reference). Add --lang to tts with the voice-prefix auto-inference table and espeak-ng dependency note (heygen-com/hyperframes#351, 2026-04-20 — after this PR opened). - references/website-to-video.md: update all paths to the capture/ subfolder layout introduced in heygen-com/hyperframes#345 (capture/screenshots/, capture/assets/, capture/extracted/tokens.json). Old captured/ prefix was broken — agents following the skill were looking for files in wrong locations. - references/features.md (new): distilled coverage for captions (language rule, tone table, word grouping, fitTextFontSize, exit guarantee), TTS (multilingual phonemization, speed tuning), audio-reactive (data format, mapping table, sampling pattern), marker highlighting (highlight/circle/burst/scribble/sketchout), and transitions (energy/ mood tables, presets, shader-compatible CSS rules). Five topics the original PR didn't cover.
145 lines
5.1 KiB
Markdown
145 lines
5.1 KiB
Markdown
# Website to Video
|
||
|
||
Capture a website, produce a professional video from it. Use when the user provides a URL and wants a video — social ad, product tour, 30-second promo, etc.
|
||
|
||
The workflow has 7 steps. Each produces an artifact that gates the next. **Do not skip steps** — each artifact prevents a downstream failure mode.
|
||
|
||
## Step 1: Capture & Understand
|
||
|
||
```bash
|
||
npx hyperframes capture https://example.com -o example-video
|
||
```
|
||
|
||
Produces `example-video/capture/` with:
|
||
- `capture/screenshots/` — above-the-fold + section screenshots (up to `--max-screenshots`)
|
||
- `capture/assets/` — logos, hero images, background video (if any)
|
||
- `capture/extracted/tokens.json` — colors, fonts, and spacing tokens
|
||
- `capture/extracted/visible-text.txt` — extracted headings, paragraphs, CTAs
|
||
- `capture/extracted/fonts.json` — font families and stacks detected in computed styles
|
||
- `capture/asset-descriptions.md` — auto-generated asset catalog
|
||
|
||
All subsequent steps read from the `capture/` subfolder — `capture/extracted/tokens.json`, `capture/assets/hero.png`, etc. Never strip the `capture/` prefix when referencing these files.
|
||
|
||
**Gate:** Print a site summary — name, top 3 colors, primary + display fonts, hero asset path, one-sentence vibe. Keep it in your context — don't re-capture.
|
||
|
||
## Step 2: Write DESIGN.md
|
||
|
||
Small brand reference at the project root. 6 sections, ~90 lines. This is the cheat sheet — not the creative plan.
|
||
|
||
```markdown
|
||
# DESIGN
|
||
|
||
## Brand
|
||
- Name: Example Co.
|
||
- One-line mission: "…"
|
||
|
||
## Colors
|
||
- Background: #0B0F14
|
||
- Primary: #00E0A4 (accent, CTA)
|
||
- Secondary: #7A8B9B (body text)
|
||
- Text: #FFFFFF
|
||
|
||
## Typography
|
||
- Display: "Inter Tight", 700, tight letter-spacing
|
||
- Body: "Inter", 400
|
||
|
||
## Motion
|
||
- Mood: precise, technical, confident
|
||
- Eases: `power3.out` for entrances, `expo.in` for exits
|
||
|
||
## Assets
|
||
- Logo: `capture/assets/logo.svg`
|
||
- Hero image: `capture/assets/hero.png`
|
||
|
||
## What NOT to Do
|
||
- No purple, no pastels, no serif body
|
||
- No playful/bubbly eases (`elastic`, `bounce`)
|
||
- No drop shadows on text
|
||
```
|
||
|
||
**Gate:** `DESIGN.md` exists in the project directory.
|
||
|
||
## Step 3: Write SCRIPT.md
|
||
|
||
Narration script. Story backbone. **Scene durations come from the narration, not from guessing.**
|
||
|
||
```markdown
|
||
# SCRIPT
|
||
|
||
## Scene 1 — Hook (0:00–0:04)
|
||
"What if your dashboards wrote themselves?"
|
||
|
||
## Scene 2 — Problem (0:04–0:11)
|
||
"Teams spend hours stitching together queries, charts, and callouts — every Monday."
|
||
|
||
## Scene 3 — Solution (0:11–0:22)
|
||
"Example Co. watches your data streams and proposes the dashboard you'd have built — in seconds."
|
||
|
||
## Scene 4 — CTA (0:22–0:28)
|
||
"Try it free at example.com."
|
||
```
|
||
|
||
Run `npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav` to generate TTS audio. Note the exact duration — that's the video's duration.
|
||
|
||
**Gate:** `SCRIPT.md` + `narration.wav` exist and durations match the plan (±0.3s).
|
||
|
||
## Step 4: Storyboard
|
||
|
||
Text-only scene plan: for each scene, describe the hero frame — what's on screen at the scene's most-visible moment.
|
||
|
||
```markdown
|
||
# STORYBOARD
|
||
|
||
## Scene 1 (0:00–0:04) — Hook
|
||
Hero frame: giant "WHAT IF YOUR DASHBOARDS WROTE THEMSELVES?" in display font, centered, on near-black. Logo top-left at 40% opacity.
|
||
Entrance: each word staggers in, 0.08s apart.
|
||
Transition out: flash-through-white into Scene 2.
|
||
```
|
||
|
||
One paragraph per scene. Do NOT skip this step — it's where you catch narrative gaps before writing HTML.
|
||
|
||
**Gate:** `STORYBOARD.md` exists. Each scene has: hero frame, entrance, transition.
|
||
|
||
## Step 5: Composition
|
||
|
||
Write `index.html` scene-by-scene:
|
||
- Each scene is a `<div class="scene scene-N">` positioned absolutely, full-bleed.
|
||
- Static HTML+CSS for the hero frame first (no GSAP).
|
||
- Layer the narration `<audio>` at `data-start="0"` on a high track index.
|
||
- Add a transitions component (`flash-through-white`, `liquid-wipe`, etc.) between each scene.
|
||
- THEN add GSAP entrances (`gsap.from()`), no exits — transitions own the exit.
|
||
- Register `window.__timelines["root"] = tl`.
|
||
|
||
Install transitions as needed:
|
||
|
||
```bash
|
||
npx hyperframes add flash-through-white
|
||
```
|
||
|
||
## Step 6: Render
|
||
|
||
```bash
|
||
npx hyperframes lint --strict # must pass
|
||
npx hyperframes validate # WCAG contrast audit
|
||
npx hyperframes render --quality draft --output draft.mp4
|
||
```
|
||
|
||
Watch the draft. Note issues in a `REVIEW.md` bullet list (scene, timestamp, issue). Fix, re-render.
|
||
|
||
When happy:
|
||
|
||
```bash
|
||
npx hyperframes render --quality high --output final.mp4
|
||
```
|
||
|
||
## Step 7: Deliver
|
||
|
||
- Report file path + duration + file size to the user.
|
||
- If the user wants a vertical cut, re-render with a 9:16 composition (`data-width="1080" data-height="1920"`) — typically requires a separate `index-vertical.html` with tighter typography and re-stacked scene layout.
|
||
|
||
## Common Failure Modes
|
||
|
||
- **Skipped DESIGN.md** → colors drift scene-to-scene; output feels like "AI slides."
|
||
- **Skipped STORYBOARD.md** → scenes overlap or hero frames collide with transitions.
|
||
- **Exit animations** before transitions → empty frames when the transition fires.
|
||
- **Narration longer than `data-duration`** → audio clips mid-sentence. Update the composition's `data-duration` to match the TTS output length + 0.5s buffer.
|