@opendirectory.dev/skills 0.1.69 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendirectory.dev/skills",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {

package/registry.json

@@ -480,6 +480,16 @@
     "version": "1.2.0",
     "path": "skills/vid-product-launch"
   },
+  {
+    "name": "vid-sizzle-reel",
+    "description": "Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages.",
+    "tags": [
+      "Branding"
+    ],
+    "author": "OpenDirectory",
+    "version": "1.0.0",
+    "path": "skills/vid-sizzle-reel"
+  },
   {
     "name": "where-your-customer-lives",
     "description": "Given a product utility and ICP, researches the internet to find the specific channels.",

package/skills/vid-sizzle-reel/README.md

@@ -0,0 +1,133 @@
+# vid-sizzle-reel
+
+Generate a high-energy sizzle reel or hype video from brand assets and key messages. Fast-paced montage format with dynamic cuts, bold text overlays, and optional beat-synced music.
+
+Use it for launch days, investor pitches, conference openers, event promos, and social media campaign kickoffs. The goal is to create excitement, not to explain.
+
+This is different from a product launch video. A sizzle reel has no single story arc. It has energy, rhythm, and one punchy message per cut.
+
+---
+
+## Install
+
+```bash
+npx "@opendirectory.dev/skills" install vid-sizzle-reel --target claude
+```
+### Video Tutorial
+Watch this quick video to see how it's done:
+
+https://github.com/user-attachments/assets/cea8b565-2002-4a87-8857-d902bfcfdc1c
+
+### Step 1: Download the skill from GitHub
+1. Click the **Code** button on this repo's GitHub page.
+2. Select **Download ZIP** to download the repository.
+3. Extract the ZIP file on your computer.
+
+### Step 2: Install the Skill in Claude
+1. Open your **Claude desktop app**.
+2. Go to the sidebar on the left side and click on the **Customize** section.
+3. Click on the **Skills** tab, then click on the **+** (plus) icon button to create a new skill.
+4. Choose the option to **Upload a skill**, and drag and drop the `.zip` file (or you can extract it and drop the folder, both work).
+
+> **Note:** Make sure you are uploading the folder that contains the `SKILL.md` file!
+
+---
+
+## How It Works
+
+1. Provide your key messages and brand assets.
+2. The agent builds a HyperFrames HTML composition with GSAP animation timelines.
+3. The HyperFrames CLI captures frames via headless Chromium and assembles an MP4 via FFmpeg.
+
+No Runway. No Pika. No AI video APIs. Works offline.
+
+---
+
+## Sizzle Reel Structure
+
+| Section | Timing (60s) | Content |
+|---------|-------------|---------|
+| Cold Open | 0-5s | One stat or impact phrase. No brand name. |
+| Build | 5-40s | Key messages flash one at a time, rising energy |
+| Peak | 40-55s | Maximum intensity; strongest message at full scale |
+| Land | 55-60s | Logo, tagline, CTA URL |
+
+Timing scales automatically for 30s and 90s durations.
+
+---
+
+## Input Parameters
+
+| Parameter | Required | Default | Description |
+|-----------|----------|---------|-------------|
+| `key_messages` | Yes | | 3-5 phrases that flash on screen (you write these) |
+| `brand_assets` | | | Logo URL or path, brand colors (hex), key screenshots |
+| `tone` | | `energetic` | `energetic` / `cinematic` / `emotional` / `professional` |
+| `music` | | | File path or BPM/genre string (e.g. `"128bpm electronic"`) |
+| `duration` | | `60` | `30` / `60` / `90` seconds |
+| `aspect_ratio` | | `16:9` | `16:9` / `9:16` |
+| `cut_style` | | auto | `fast` (1-2s) / `cinematic` (3-5s); auto derives from tone |
+| `end_card` | | auto | Logo + tagline + CTA URL for the Land section |
+
+---
+
+## Tone Reference
+
+| Tone | Reference Feel | Cut Style | Best For |
+|------|---------------|-----------|----------|
+| `energetic` | Product Hunt launch day | fast (1-2s) | Social media, launch days, developer tools |
+| `cinematic` | Apple product reveal | cinematic (3-5s) | Investor decks, B2C premium, Series A+ |
+| `emotional` | Kickstarter campaign | mixed (2-4s) | Consumer products, mission-driven brands |
+| `professional` | B2B conference opener | 2s cuts | Enterprise SaaS, internal events, sales decks |
+
+---
+
+## Output
+
+```
+sizzle/
+└── [slug]/
+    ├── index.html           (HyperFrames composition source)
+    └── sizzle-reel.mp4      (H.264, 1080p, yuv420p)
+```
+
+Open `index.html` in any browser to preview the animation before exporting.
+
+---
+
+## Prompt Tips
+
+Write the key messages yourself. These are the exact phrases that appear on screen. The agent cannot invent good copy for your brand. 3 sharp lines beats 10 vague ones.
+
+Choose music before visuals. The BPM drives the cut style. The cut style drives every timing decision in the video.
+
+Cold open: one number. Not a sentence, not a tagline. One specific, surprising number. It earns 5 seconds of attention before the audience knows who you are.
+
+Land section: logo plus one line plus one URL. Anything more dilutes the CTA.
+
+Match tone to channel. Energetic for social and Product Hunt. Cinematic for investor decks. Professional for conference openers.
+
+---
+
+## Prompt Examples
+
+Good:
+```
+Sizzle reel, 60 seconds. Tone: energetic. Key messages: ['AI skills, ready to install' /
+'52+ skills across GTM, content, and research' / 'Works with Claude, Codex, and Gemini' /
+'Zero setup. Instant value.']. Music: 128bpm electronic. Cut style: fast.
+End card: OpenDirectory + 'AI skills, ready to install' + 'opendirectory.dev'. Aspect: 16:9.
+```
+
+Bad:
+```
+hype video for our company
+```
+
+---
+
+## Requirements
+
+- Node.js 22+
+- FFmpeg (`brew install ffmpeg` / `apt install ffmpeg`)
+- HyperFrames (installed automatically via `npx skills add heygen-com/hyperframes`)

package/skills/vid-sizzle-reel/SKILL.md

@@ -0,0 +1,403 @@
+---
+name: vid-sizzle-reel
+description: 'Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages. Fast-paced montage format with dynamic cuts, bold text overlays, and optional music. 4-section structure: Cold Open, Build, Peak, Land. 4 tone presets. Beat-sync cuts when music is provided. Built on HyperFrames (GSAP + headless Chromium + FFmpeg). Trigger when user says "sizzle reel", "hype video", "highlight reel", "launch hype", "conference opener", "event promo video", "investor pitch video", or "brand video montage".'
+compatibility: [claude-code, gemini-cli, github-copilot]
+author: OpenDirectory
+version: 1.0.0
+---
+
+# vid-sizzle-reel
+
+Generates a high-energy sizzle reel or hype video from brand assets and key messages.
+Pipeline: HyperFrames HTML composition (GSAP timelines) → headless Chromium → FFmpeg H.264 MP4.
+No Runway. No Pika. No AI video APIs. Zero runtime cost beyond Node.js + FFmpeg.
+
+**Differentiation from `vid-product-launch`:**
+- `vid-product-launch` tells a narrative story — one earned reveal, five sections, tension arc
+- `vid-sizzle-reel` creates energy and excitement — fast cuts, music-first, no single story beat
+
+---
+
+## Critical Rules (read before every generation)
+
+1. **Write the key messages yourself — or ask the user to write them.** These are the exact phrases that appear on screen. "AI will figure it out" produces filler. 3-5 sharp lines is the entire content of a sizzle reel.
+
+2. **Brand name appears ONLY in the Land section.** Cold Open and Build create tension without naming the brand. The Land section is the payoff.
+
+3. **Declare the rhythm pattern in a comment at the top of the script before writing any HTML.** Format: `// RHYTHM: flash-sequence | Cold[0-5s]: stat | Build[5-40s]: msg(1.5s)|flash|... | Peak[40-55s]: ... | Land[55-60s]: logo+CTA`. Every timing decision checks against this.
+
+4. **Build end-state layout in CSS first — no GSAP yet.** Position every element at its most-visible moment in static CSS. Then add GSAP entrances with `gsap.from()` and exits with `gsap.to()`. Never position at animated start state.
+
+5. **`class="clip"` on every timed element.** Required by HyperFrames. Without it, the element is invisible to the player.
+
+6. **`data-start`, `data-duration`, `data-track-index` on every clip.** No exceptions. Same-track clips cannot overlap — use different track indices.
+
+7. **No `Math.random()`.** HyperFrames requires deterministic compositions. Use seeded PRNG (mulberry32) for any pseudo-random values.
+
+8. **All GSAP timelines start `{ paused: true }` and register to `window.__timelines["comp-id"]`.** The HyperFrames player controls playback — never call `tl.play()`.
+
+9. **Never `position: absolute` on `.scene-content` containers.** Use `width:100%; height:100%; padding:Npx; display:flex`. Reserve `position:absolute` for decorative elements only.
+
+10. **Music: separate `<audio>` element with `data-track-index`.** Video must be `muted playsinline`. Never put audio in a `<video>` element.
+
+11. **Read `references/cut-patterns.md` AND `references/tone-presets.md` before generating any HTML.**
+
+12. **Never dump HTML in chat.** Save to file. Show summary only.
+
+---
+
+## Step 1: Intake
+
+**Required:**
+- `key_messages` — 3-5 punchy lines to flash on screen (user must write these)
+
+**Optional parameters and defaults:**
+
+| Parameter | Default | Description |
+|---|---|---|
+| brand_assets | none | Logo URL/path, brand colors (hex), key screenshots |
+| tone | energetic | energetic / cinematic / emotional / professional |
+| music | none | File path, or BPM/genre string (e.g. "128bpm electronic") |
+| duration | 60 | 30 / 60 / 90 seconds |
+| aspect_ratio | 16:9 | 16:9 (1920x1080) / 9:16 (1080x1920) |
+| cut_style | auto | fast (1-2s) / cinematic (3-5s) — auto derives from tone |
+| end_card | auto | Logo + tagline + CTA URL for Land section |
+
+`cut_style` auto-defaults: energetic → `fast`; professional → `fast` (2s); cinematic → `cinematic`; emotional → `mixed`
+
+**If `key_messages` is missing, ask exactly:**
+
+> "To generate the sizzle reel, I need your key messages — the exact phrases that will flash on screen. Give me 3-5 punchy lines. These are the most important thing you're writing for this video.
+>
+> Examples: 'Used by 500+ growth teams' / 'From days to minutes' / 'Works with Claude, Codex, Gemini'
+>
+> Also useful: tone (energetic/cinematic/emotional/professional), duration (30/60/90s), any brand colors or logo URL."
+
+If key_messages are present → proceed to Step 2 immediately.
+
+---
+
+## Step 2: Install HyperFrames
+
+Install HyperFrames skills (first time only — skip if already installed):
+
+```bash
+npx skills add heygen-com/hyperframes
+```
+
+Verify environment:
+```bash
+node --version   # must be >= 22
+ffmpeg -version  # must be present
+```
+
+Scaffold the project:
+```bash
+npx hyperframes init sizzle-[slug] --example kinetic-type --non-interactive
+cd sizzle-[slug]
+```
+
+Slug: kebab-case from end_card brand name or first key_message, max 25 chars.
+
+---
+
+## Step 3: Internal Architecture (never shown to user)
+
+**1. Derive cut-point timing from `duration` + `cut_style`:**
+
+| Section | 30s | 60s | 90s |
+|---|---|---|---|
+| Cold Open | 0-5s | 0-5s | 0-8s |
+| Build | 5-25s | 5-40s | 8-65s |
+| Peak | 25-28s | 40-55s | 65-80s |
+| Land | 28-30s | 55-60s | 80-90s |
+
+Convert every boundary to milliseconds. Calculate per-scene duration from `cut_style`:
+- `fast`: 1.2s-1.8s per message (use 1.5s default)
+- `cinematic`: 3.5s-5.0s per message (use 4.0s default)
+- `mixed`: 2.0s-4.0s varying by section energy
+
+**2. Map key_messages to scenes:**
+- Cold Open (1 scene): one impact stat or question — NO brand name, builds intrigue
+- Build: one scene per key_message
+- Peak: repeat the strongest message at double scale, or combine 2 messages in rapid flash
+- Land: brand name + tagline + CTA URL
+
+**3. Detect beat sync if music provided:**
+```bash
+npx hyperframes tts --analyze-beats [music-file]
+```
+If unavailable, calculate from BPM: `beat_ms = 60000 / BPM`. Align cuts to every 2nd beat.
+
+**4. Select tone preset** — read `references/tone-presets.md` for CSS tokens.
+
+**5. Declare rhythm pattern** — write comment at top of script:
+```js
+// RHYTHM: flash-sequence
+// Cold Open [0-5000ms]: stat
+// Build [5000-40000ms]: msg-1(1500ms)|flash|msg-2(1500ms)|flash|msg-3(1500ms)|flash|msg-4(1500ms)|flash|build-accum(10000ms)
+// Peak [40000-55000ms]: msg-strongest(1200ms)|flash|msg-2nd(1200ms)|flash|HOLD(5600ms)
+// Land [55000-60000ms]: logo+tagline+cta
+```
+
+**6. Determine pixel dimensions:**
+- `16:9` → W=1920, H=1080
+- `9:16` → W=1080, H=1920
+
+---
+
+## Step 4: HyperFrames HTML Composition
+
+Read `references/cut-patterns.md` and the HyperFrames skill (`/hyperframes`) before writing any code.
+
+**Required HTML skeleton:**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+[font CDN link from tone preset]
+<style>
+:root {
+  [all CSS tokens from tone preset]
+}
+
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+</style>
+</head>
+<body>
+<div
+  data-composition-id="sizzle-[slug]"
+  data-width="[W]"
+  data-height="[H]"
+  style="position:relative;width:[W]px;height:[H]px;overflow:hidden;background:var(--bg)"
+>
+
+  [if cut-flash: true]
+  <div id="cut-flash"
+    style="position:absolute;inset:0;background:var(--cut-flash-bg);opacity:0;pointer-events:none;z-index:200"></div>
+  [end if]
+
+  [if film-grain: true]
+  <canvas id="grain-overlay"
+    width="240" height="135"
+    style="position:absolute;inset:0;width:[W]px;height:[H]px;pointer-events:none;opacity:0.022;mix-blend-mode:overlay;z-index:50"></canvas>
+  [end if]
+
+  [if vignette: true]
+  <div id="vignette-overlay"
+    style="position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.65) 100%);pointer-events:none;z-index:51"></div>
+  [end if]
+
+  <!-- Scenes — one div per scene -->
+  <div id="scene-cold"
+    class="clip"
+    data-start="0"
+    data-duration="5"
+    data-track-index="0"
+    style="position:absolute;inset:0;opacity:0"
+  >
+    <div class="scene-content" style="width:100%;height:100%;padding:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box">
+      [cold open content — one stat or impact phrase, no brand name]
+    </div>
+  </div>
+
+  [one div per Build scene, data-start increments by cut duration]
+  [Peak scene(s)]
+  [Land scene — brand name + tagline + CTA]
+
+  [if music provided]
+  <audio id="music"
+    class="clip"
+    data-start="0"
+    data-duration="[total_duration]"
+    data-track-index="10"
+    data-volume="0.85"
+    src="[music_path]"
+  ></audio>
+  [end if]
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  <script>
+  // ── RHYTHM DECLARATION ──────────────────────────────────────────────────────
+  // RHYTHM: [flash-sequence | cinematic-hold | beat-sync | mixed]
+  // Cold Open [0-Nms]: ...
+  // Build [N-Nms]: ...
+  // Peak [N-Nms]: ...
+  // Land [N-Nms]: ...
+
+  // ── SEEDED PRNG (for grain only — no other random values) ───────────────────
+  function mulberry32(seed) {
+    return function() {
+      seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+      let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+      t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+      return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    };
+  }
+
+  [if film-grain: true]
+  // ── FILM GRAIN (cinematic/emotional only) ───────────────────────────────────
+  const grainCanvas = document.getElementById('grain-overlay');
+  const grainCtx = grainCanvas ? grainCanvas.getContext('2d') : null;
+  // Grain updated by GSAP ticker (not per-frame capture — HyperFrames handles this)
+  [end if]
+
+  // ── GSAP TIMELINE ───────────────────────────────────────────────────────────
+  const tl = gsap.timeline({ paused: true });
+
+  // ── COLD OPEN ───────────────────────────────────────────────────────────────
+  [cold open entrance and exit tweens — see cut-patterns.md for exact pattern]
+
+  // ── BUILD SECTION ───────────────────────────────────────────────────────────
+  [per-message tweens — flash-sequence or cinematic-hold from cut-patterns.md]
+
+  // ── PEAK SECTION ─────────────────────────────────────────────────────────────
+  [peak tweens — same pattern as build but tighter timing]
+
+  // ── LAND SECTION ─────────────────────────────────────────────────────────────
+  [land entrances — logo, tagline, CTA. No exit — holds to end]
+
+  // ── TIMELINE REGISTRATION ────────────────────────────────────────────────────
+  window.__timelines = window.__timelines || {};
+  window.__timelines["sizzle-[slug]"] = tl;
+  </script>
+</div>
+</body>
+</html>
+```
+
+**Design quality rules:**
+- Cold open stat: ≥160px font size for 16:9, ≥100px for 9:16
+- Key messages: ≥80px font size — readable at a glance
+- Land section brand name: ≥120px for 16:9
+- All colors from preset token variables — no free hex except `var(--accent)` literal hex inside canvas `fillStyle`
+- `scene-content` always uses `padding + flex` — never `position:absolute` on content container
+- `class="clip"` on every element with `data-start`
+
+---
+
+## Step 5: Self-QA (fix every failure before Step 6)
+
+**Content:**
+- [ ] `key_messages` — each phrase appears exactly once, no duplicates
+- [ ] Brand name appears ONLY in Land section (not cold open, not build, not peak)
+- [ ] Cold open contains NO brand name and NO product name — only stat or impact phrase
+- [ ] Land section has: brand name + tagline + CTA URL (three elements minimum)
+- [ ] end_card CTA URL present on final frame
+
+**HyperFrames contract:**
+- [ ] `class="clip"` on every element with `data-start`
+- [ ] `data-start`, `data-duration`, `data-track-index` on every clip
+- [ ] `data-composition-id` on the root composition div
+- [ ] `window.__timelines["sizzle-[slug]"] = tl` registered
+- [ ] All timelines start `{ paused: true }`
+- [ ] No `Math.random()` — seeded PRNG only
+- [ ] No `tl.play()` or `tl.resume()` calls
+
+**GSAP / Layout:**
+- [ ] `gsap.from()` for all entrances (FROM offscreen TO CSS position)
+- [ ] `gsap.to()` for all exits (FROM CSS position TO offscreen)
+- [ ] No `position:absolute` on `.scene-content` containers
+- [ ] Rhythm pattern declared in comment at top of script
+
+**Cut timing:**
+- [ ] `fast` tone: average cut duration ≤ 2.0s
+- [ ] `cinematic` tone: average cut duration ≥ 3.0s
+- [ ] Cut flash fires at every cut boundary for `energetic` tone (60ms, opacity 0→1→0)
+- [ ] Same-track clips do NOT overlap (check all `data-track-index` groupings)
+
+**SFX:**
+- [ ] `window.__sfxTimeline` present and placed before timeline registration
+- [ ] `word-hit` event per key message
+- [ ] `whoosh` at Build → Peak transition boundary
+- [ ] `cta-chime` at Land start
+- [ ] No SFX fires before 500ms
+
+---
+
+## Step 6: Lint, Render, Output
+
+```bash
+npx hyperframes lint
+npx hyperframes inspect --json
+```
+
+Fix all lint errors. Fix all inspect errors (text overflow, clip escaping containers). Then render:
+
+```bash
+npx hyperframes render --output sizzle/[slug]/sizzle-reel.mp4
+```
+
+Output:
+```
+## Sizzle Reel: [brand name from end_card]
+Tone: [tone] | Duration: [N]s | Cut style: [cut_style] | Aspect: [ratio]
+Rhythm: [declared pattern]
+
+Sections
+  Cold Open [0-Ns]:  [impact stat or phrase]
+  Build     [N-Ns]:  [N key messages listed]
+  Peak      [N-Ns]:  [strongest message at max scale]
+  Land      [N-Ns]:  [brand name] + "[tagline]" + [CTA URL]
+
+Files
+  Source: sizzle/[slug]/index.html
+  Output: sizzle/[slug]/sizzle-reel.mp4
+```
+
+---
+
+## SFX Timeline (embed in every composition)
+
+The same FFmpeg-synthesized SFX system as `vid-product-launch`. Place `window.__sfxTimeline` immediately before the GSAP timeline registration.
+
+SFX type reference for sizzle reel:
+
+| Type | Sound | Duration | Placement |
+|---|---|---|---|
+| `word-hit` | Sub punch (50Hz) + transient click (2.2kHz) + noise burst | 180ms | One per key_message scene start |
+| `whoosh` | Two-band noise sweep (1.1kHz body + 4-8kHz air) | 700ms | At Build → Peak boundary |
+| `cta-chime` | A major chord (440+554+659+880Hz) + aecho bell shimmer | 1.2s | Exactly at Land start |
+
+```js
+window.__sfxTimeline = [
+  // one word-hit per key_message (computed from scene start times)
+  { ms: MSG_1_START_MS,           sfx: 'word-hit',   vol: 0.50 },
+  { ms: MSG_2_START_MS,           sfx: 'word-hit',   vol: 0.50 },
+  { ms: MSG_3_START_MS,           sfx: 'word-hit',   vol: 0.50 },
+  // ... repeat for each message
+  { ms: PEAK_START_MS - 700,      sfx: 'whoosh',     vol: 0.55 },
+  { ms: LAND_START_MS,            sfx: 'cta-chime',  vol: 0.65 },
+];
+```
+
+Compute all `ms` values from declared section timing constants. Never hardcode.
+
+---
+
+## Prompt Tips (show when user asks for guidance)
+
+> "Write the key messages yourself. They are the entire content of this video. 3 sharp lines beats 10 vague ones every time."
+>
+> "Choose music before choosing visuals. The BPM determines the cut style. The cut style determines every timing decision."
+>
+> "Cold open: one number. Not a sentence, not a tagline — one specific, surprising number. It earns 5 seconds of attention."
+>
+> "The Land section is not a credits page. Logo + one line + one URL. Anything more dilutes the CTA."
+>
+> "Match tone to channel. Energetic for social and Product Hunt. Cinematic for B2C premium and investor decks. Professional for enterprise conferences. Emotional for crowdfunding."
+
+Good:
+```
+Sizzle reel, 60 seconds. Tone: energetic. Key messages: ['AI skills, ready to install' /
+'52+ skills across GTM, content, research' / 'Works with Claude, Codex, Gemini' /
+'Zero setup. Instant value.']. Music: 128bpm electronic. Cut style: fast.
+End card: OpenDirectory + 'AI skills, ready to install' + 'opendirectory.dev'. Aspect: 16:9.
+```
+
+Bad:
+```
+hype video for our company
+```

package/skills/vid-sizzle-reel/references/cut-patterns.md

@@ -0,0 +1,156 @@
+# Cut Patterns — vid-sizzle-reel
+
+Four named rhythm patterns with GSAP timing examples.
+Read before declaring rhythm in Step 3. Declare the rhythm pattern explicitly before writing any HTML.
+
+---
+
+## flash-sequence
+
+**Use for:** `energetic` tone. Fast 1-2s cuts with white flash at every transition.
+
+**Rhythm notation:** `flash-flash-flash-HOLD-flash-flash-PEAK-land`
+
+**Flash element (place in every scene, hidden by default):**
+```html
+<div id="cut-flash"
+  style="position:fixed;inset:0;background:var(--cut-flash-bg);opacity:0;pointer-events:none;z-index:200"></div>
+```
+
+**GSAP cut flash (fire at every scene end time `T`):**
+```js
+// Fire at T = scene end, duration = 0.06s
+tl.to("#cut-flash", { opacity: 1, duration: 0.03, ease: "none" }, T);
+tl.to("#cut-flash", { opacity: 0, duration: 0.03, ease: "none" }, T + 0.03);
+```
+
+**Full scene GSAP pattern (1.5s scene starting at T):**
+```js
+// Build end-state in CSS first. Then:
+// Entrance: slam-in
+tl.fromTo(".msg-1", { scale: 1.08, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.12, ease: "power3.out" }, T + 0.06);
+// Hold for 1.2s
+// Exit: flash handles visual cut — no explicit exit tween needed for flash-sequence
+// Cut flash at T + 1.5
+tl.to("#cut-flash", { opacity: 1, duration: 0.03, ease: "none" }, T + 1.47);
+tl.to("#cut-flash", { opacity: 0, duration: 0.03, ease: "none" }, T + 1.50);
+```
+
+**Scene count per duration:**
+- 30s: 12-18 cuts (avg 1.7s each)
+- 60s: 25-35 cuts (avg 1.8s each)
+- 90s: 35-50 cuts (avg 1.9s each)
+
+---
+
+## cinematic-hold
+
+**Use for:** `cinematic` and `emotional` tones. 3-5s scenes with slow cross-dissolve transitions.
+
+**Rhythm notation:** `slow-SLOW-hold-BREATHE-slow-PEAK-land`
+
+**Dissolve pattern (no flash element — opacity handled by GSAP):**
+```js
+const SCENE_DUR = 4.0;   // agent adjusts per section
+const FADE_IN   = 0.7;   // entrance duration
+const FADE_OUT  = 0.5;   // exit overlap before next scene
+
+// Entrance at T
+tl.from(".msg-1", { opacity: 0, filter: "blur(8px)", duration: FADE_IN, ease: "power2.out" }, T);
+// Exit at T + SCENE_DUR - FADE_OUT
+tl.to(".msg-1",   { opacity: 0, y: -15, duration: FADE_OUT, ease: "power2.in" }, T + SCENE_DUR - FADE_OUT);
+```
+
+**Overlap:** next scene entrance starts `FADE_OUT` before current scene exits — creates cross-dissolve feel.
+
+**Scene count per duration:**
+- 30s: 6-8 scenes (avg 4s each)
+- 60s: 12-16 scenes (avg 4s each)
+- 90s: 18-24 scenes (avg 4s each)
+
+---
+
+## beat-sync
+
+**Use for:** Any tone when `music` is provided as a file. Cut points derived from audio analysis.
+
+**How to get cut points:**
+```bash
+npx hyperframes tts --analyze-beats [music-file]
+# Outputs JSON: { beats: [0.48, 0.96, 1.44, ...], bpm: 128 }
+```
+
+If `npx hyperframes tts` beat analysis is unavailable, calculate from BPM:
+```
+beat_interval_ms = 60000 / BPM
+# 128 BPM → 468.75ms per beat
+# Align cuts to every 2nd or 4th beat for readability
+# 128 BPM → cut every 937.5ms (2 beats) or every 1875ms (4 beats)
+```
+
+**GSAP pattern (cut on beat offset `B`):**
+```js
+const BEATS = [0.94, 1.88, 2.81, 3.75, 5.63, 7.50]; // agent fills from analysis
+BEATS.forEach((b, i) => {
+  // Exit current element
+  tl.to(`.msg-${i}`, { opacity: 0, scale: 0.95, duration: 0.08, ease: "power2.in" }, b - 0.08);
+  // Cut flash (energetic) or instant cut
+  if (tone === 'energetic') {
+    tl.to("#cut-flash", { opacity: 1, duration: 0.03 }, b - 0.03);
+    tl.to("#cut-flash", { opacity: 0, duration: 0.03 }, b);
+  }
+  // Entrance next element
+  tl.from(`.msg-${i + 1}`, { opacity: 0, y: 20, duration: 0.15, ease: "power3.out" }, b + 0.02);
+});
+```
+
+---
+
+## build-sequence
+
+**Use for:** Build section of all tones. Staggered sequential reveals — no hard cuts, elements accumulate.
+
+**Use case:** Multiple data points, feature lists, or stats that build up within a single scene.
+
+**Pattern: elements appear and stay (no exit until scene ends)**
+```js
+const ITEMS = [".item-1", ".item-2", ".item-3"]; // max 4 items
+const SCENE_START = 10.0;
+const ITEM_STAGGER = 1.4;  // seconds between each item entrance
+
+ITEMS.forEach((sel, i) => {
+  tl.from(sel, {
+    opacity: 0,
+    y: 30,
+    duration: 0.5,
+    ease: "power3.out"
+  }, SCENE_START + i * ITEM_STAGGER);
+});
+
+// Exit all together at scene end
+tl.to(ITEMS, {
+  opacity: 0,
+  y: -20,
+  stagger: 0.05,
+  duration: 0.4,
+  ease: "power2.in"
+}, SCENE_START + ITEMS.length * ITEM_STAGGER + 1.0);
+```
+
+**Use when:** Build section has 3+ key messages that benefit from accumulation. Switch to `flash-sequence` or `cinematic-hold` for single-message-per-scene pacing.
+
+---
+
+## Rhythm Declaration Format
+
+Before writing HTML, write this comment at the top of the composition script:
+
+```js
+// RHYTHM: flash-sequence
+// Cold Open [0-5s]:   one-stat | flash
+// Build     [5-40s]:  msg-1(1.5s) | flash | msg-2(1.5s) | flash | msg-3(1.5s) | flash | msg-4(2s) | flash | build-accum(8s)
+// Peak      [40-55s]: full-speed-flash | msg-5(1s) | flash | msg-6(1s) | flash | msg-7(1s) | HOLD(4s)
+// Land      [55-60s]: logo-fade | tagline | cta
+```
+
+This is the reference all subsequent timing decisions check against. If a scene doesn't fit the declared rhythm, adjust the scene — not the rhythm.

package/skills/vid-sizzle-reel/references/tone-presets.md

@@ -0,0 +1,196 @@
+# Tone Presets — vid-sizzle-reel
+
+Four tone-matched presets. Read before generating any HTML.
+Apply ALL tokens from the chosen preset. No free hex values or font-family strings outside these tables.
+
+---
+
+## energetic
+
+**Reference feel:** Product Hunt launch day. High-BPM. Bold all-caps. White flash cuts.
+
+**Font CDN:**
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@700;900&display=swap" rel="stylesheet">
+```
+
+**CSS tokens:**
+```css
+:root {
+  --bg:             #000000;
+  --bg-secondary:   #0A0A0A;
+  --text-primary:   #FFFFFF;
+  --text-secondary: #888888;
+  --accent:         #00F0FF;
+  --accent-2:       #FF2D55;
+  --divider:        rgba(255,255,255,0.10);
+  --font-display:   'DM Sans', system-ui, sans-serif;
+  --font-mono:      'DM Mono', monospace;
+  --tracking-tight: -0.03em;
+  --tracking-wide:  0.08em;
+  --display-size:   180px;
+  --headline-size:  80px;
+  --label-size:     18px;
+  --body-size:      22px;
+  --cut-flash-bg:   #FFFFFF;
+  --cut-flash-dur:  0.06s;
+}
+```
+
+**Effects:**
+- `film-grain: false`
+- `vignette: false`
+- `cut-flash: true` — white `#FFFFFF` overlay, 60ms opacity 0→1→0 at every cut point
+- `dot-grid: true` — `radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 48px 48px`
+- Text entrance: slam-in (`scale 1.08→1, opacity 0→1, 120ms`)
+- Text style: ALL CAPS, letter-spacing 0.08em
+
+**Cut timing:** `fast` — 1.0s to 1.8s per cut
+
+**Background treatment:** Pure `#000000`. Dot-grid on all scenes except cold open (which uses pure black for maximum contrast).
+
+---
+
+## cinematic
+
+**Reference feel:** Apple product reveal video. Deliberate pacing, premium dark palette.
+
+**Font CDN:**
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Cormorant:wght@700;800&display=swap" rel="stylesheet">
+```
+
+**CSS tokens:**
+```css
+:root {
+  --bg:             #050505;
+  --bg-secondary:   #0D0D0D;
+  --text-primary:   #F5F5F5;
+  --text-secondary: #999999;
+  --accent:         #D4AF37;
+  --accent-2:       rgba(212,175,55,0.25);
+  --divider:        rgba(255,255,255,0.07);
+  --font-display:   'Cormorant', 'Cormorant Garamond', Georgia, serif;
+  --font-body:      'Cormorant Garamond', Georgia, serif;
+  --tracking-tight: -0.02em;
+  --tracking-wide:  0.12em;
+  --display-size:   160px;
+  --headline-size:  64px;
+  --label-size:     16px;
+  --body-size:      22px;
+  --cut-flash-bg:   rgba(255,255,255,0.0);
+  --cut-flash-dur:  0s;
+}
+```
+
+**Effects:**
+- `film-grain: true` — canvas 240×135, opacity 0.022, seeded PRNG per frame
+- `vignette: true` — `radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.65) 100%)`
+- `cut-flash: false` — cross-dissolve via `opacity 1→0→1` over 400ms instead
+- `dot-grid: false`
+- Text entrance: materialise (`filter blur 8px→0px, opacity 0→1, 700ms, easeOutCubic`)
+- Text style: mixed case, letter-spacing `--tracking-tight`
+
+**Cut timing:** `cinematic` — 3.0s to 5.0s per scene
+
+**Background treatment:** Pure `#050505`. Film grain + vignette create depth.
+
+---
+
+## emotional
+
+**Reference feel:** Kickstarter campaign video. Warm, personal, intimate.
+
+**Font CDN:**
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Lora:wght@400;600&display=swap" rel="stylesheet">
+```
+
+**CSS tokens:**
+```css
+:root {
+  --bg:             #FAF7F2;
+  --bg-secondary:   #F2EDE4;
+  --text-primary:   #2C1810;
+  --text-secondary: #6B4C3B;
+  --accent:         #B87333;
+  --accent-2:       rgba(184,115,51,0.18);
+  --divider:        rgba(44,24,16,0.10);
+  --font-display:   'Playfair Display', Georgia, serif;
+  --font-body:      'Lora', Georgia, serif;
+  --tracking-tight: -0.01em;
+  --tracking-wide:  0.06em;
+  --display-size:   140px;
+  --headline-size:  56px;
+  --label-size:     15px;
+  --body-size:      21px;
+  --cut-flash-bg:   rgba(250,247,242,0.0);
+  --cut-flash-dur:  0s;
+}
+```
+
+**Effects:**
+- `film-grain: true` — canvas 240×135, opacity 0.018, warm tint (blend: multiply)
+- `vignette: true` — softer, `radial-gradient(ellipse at center, transparent 45%, rgba(44,24,16,0.40) 100%)`
+- `cut-flash: false` — soft cross-dissolve over 600ms
+- `dot-grid: false`
+- Text entrance: word-by-word gentle fade (`opacity 0→1, 500ms, easeOut, 120ms stagger`)
+- Text style: lowercase or mixed case, italic accent words
+
+**Cut timing:** `mixed` — 2.0s to 4.0s, varying by scene energy
+
+**Background treatment:** `--bg` warm ivory. Vignette + grain create warmth.
+
+---
+
+## professional
+
+**Reference feel:** B2B SaaS conference opener. Clean, structured, trustworthy.
+
+**Font CDN:**
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
+```
+
+**CSS tokens:**
+```css
+:root {
+  --bg:             #FFFFFF;
+  --bg-secondary:   #F5F7FA;
+  --text-primary:   #0A0A0A;
+  --text-secondary: #6B7280;
+  --accent:         #4B9FFF;
+  --accent-2:       rgba(75,159,255,0.12);
+  --divider:        rgba(10,10,10,0.08);
+  --font-display:   'Inter', system-ui, sans-serif;
+  --font-body:      'Inter', system-ui, sans-serif;
+  --tracking-tight: -0.02em;
+  --tracking-wide:  0.04em;
+  --display-size:   150px;
+  --headline-size:  60px;
+  --label-size:     14px;
+  --body-size:      20px;
+  --cut-flash-bg:   rgba(255,255,255,0.0);
+  --cut-flash-dur:  0s;
+}
+```
+
+**Effects:**
+- `film-grain: false`
+- `vignette: false`
+- `cut-flash: false` — clean instant cut via `display` switching (handled by HyperFrames `data-start`)
+- `dot-grid: false`
+- Text entrance: slide up (`y 20→0, opacity 0→1, 350ms, easeOutCubic`)
+- Text style: sentence case, clean weight hierarchy (900 display, 600 headline, 400 body)
+
+**Cut timing:** `2s` — 1.8s to 2.4s per scene, consistent rhythm
+
+**Background treatment:** White or `--bg-secondary`. Accent blue for key numbers and CTAs.