npm - hyperframes - Versions diffs - 0.2.2 → 0.2.3-alpha.2 - Mend

hyperframes 0.2.2 → 0.2.3-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/studio/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-DA_l-VKo.js"></script>
+    <script type="module" crossorigin src="/assets/index-B0VCLOXQ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BT9D8I7B.css">
   </head>
   <body>

package/dist/templates/_shared/CLAUDE.md CHANGED Viewed

@@ -4,13 +4,11 @@
 **Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `class="clip"`, `window.__timelines`, `data-*` attributes) that are NOT in generic web docs. Skipping them produces broken compositions.
-| Skill                    | Command                 | When to use                                                                                            |
-| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------ |
-| **hyperframes-compose**  | `/hyperframes-compose`  | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
-| **hyperframes-captions** | `/hyperframes-captions` | Any text synced to audio: captions, subtitles, lyrics, karaoke. Also covers transcription strategy.    |
-| **gsap-core**            | `/gsap-core`            | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults                              |
-| **gsap-timeline**        | `/gsap-timeline`        | Timeline sequencing, position parameter, labels, nesting                                               |
-| **gsap-performance**     | `/gsap-performance`     | Animation performance — transforms over layout props, will-change, batching                            |
+| Skill               | Command            | When to use                                                                                                     |
+| ------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
+| **hyperframes**     | `/hyperframes`     | Creating or editing HTML compositions, captions, TTS, audio-reactive animation, marker highlights               |
+| **hyperframes-cli** | `/hyperframes-cli` | CLI commands: init, lint, preview, render, transcribe, tts                                                      |
+| **gsap**            | `/gsap`            | GSAP animations — tweens, timelines, easing, ScrollTrigger, plugins, React/Vue/Svelte, performance optimization |
 > **Skills not available?** Ask the user to run `npx hyperframes skills` and restart their
 > agent session, or install manually: `npx skills add heygen-com/hyperframes` and

package/dist/templates/blank/index.html CHANGED Viewed

@@ -48,21 +48,19 @@
         data-volume="1"
       ></audio>
-      <div
-        id="captions-comp"
-        data-composition-id="captions"
-        data-composition-src="compositions/captions.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="3"
-        data-width="1920"
-        data-height="1080"
-      ></div>
+      <!--
+        Add your clips here. Example:
+        <div id="title" class="clip" data-start="0" data-duration="5" data-track-index="1"
+             style="font-size: 64px; color: #fff; padding: 40px">
+          Hello World
+        </div>
+      -->
     </div>
     <script>
       window.__timelines = window.__timelines || {};
       const tl = gsap.timeline({ paused: true });
+      // Example: tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
       window.__timelines["main"] = tl;
     </script>
   </body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "hyperframes",
-  "version": "0.2.2",
+  "version": "0.2.3-alpha.2",
   "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
   "repository": {
     "type": "git",
@@ -21,14 +21,13 @@
     "build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
     "build:studio": "cd ../studio && bun run build",
     "build:runtime": "tsx scripts/build-runtime.ts",
-    "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/_shared dist/templates/ && cp -r ../../skills/hyperframes-compose ../../skills/hyperframes-captions ../../skills/hyperframes-tts dist/skills/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
+    "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills dist/docker && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/_shared dist/templates/ && cp -r ../../skills/hyperframes ../../skills/hyperframes-cli ../../skills/gsap dist/skills/ && cp src/docker/Dockerfile.render dist/docker/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@hono/node-server": "^1.8.0",
     "@puppeteer/browsers": "^2.13.0",
     "adm-zip": "^0.5.16",
-    "cheerio": "^1.2.0",
     "citty": "^0.2.1",
     "compare-versions": "^6.1.1",
     "esbuild": "^0.25.0",
@@ -49,7 +48,6 @@
     "@types/mime-types": "^3.0.1",
     "@types/node": "^22.0.0",
     "adm-zip": "^0.5.16",
-    "cheerio": "^1.2.0",
     "hono": "^4.0.0",
     "linkedom": "^0.18.12",
     "mime-types": "^3.0.2",

package/dist/skills/hyperframes-captions/SKILL.md DELETED Viewed

@@ -1,212 +0,0 @@
----
-name: hyperframes-captions
-description: Captions, subtitles, lyrics, and karaoke synced to audio in HyperFrames. Tone-adaptive — detects script energy and applies matching typography, color, and animation with per-word styling.
-trigger: Syncing text to audio timing — captions, subtitles, lyrics, karaoke, transcription overlays, word-level or phrase-level text timed to speech or music.
----
-# Captions
-## Language Rule (Non-Negotiable)
-**Never use `.en` models unless the user explicitly states the audio is English.** `.en` models (small.en, medium.en) TRANSLATE non-English audio into English instead of transcribing it. This silently destroys the original language.
-When transcribing:
-1. If the user says the language → use `--model small --language <code>` (no `.en` suffix)
-2. If the user says it's English → use `--model small.en`
-3. If the language is unknown → use `--model small` (no `.en`, no `--language`) — whisper auto-detects
-**Default model is `small` (not `small.en`).** Only add `.en` when explicitly told the audio is English.
----
-Analyze the spoken content to determine caption style. If the user specifies a style, use that. Otherwise, detect tone from the transcript.
-## Transcript Source
-The project's `transcript.json` contains a normalized word array with word-level timestamps:
-```json
-[
-  { "text": "Hello", "start": 0.0, "end": 0.5 },
-  { "text": "world.", "start": 0.6, "end": 1.2 }
-]
-```
-This is the only format the captions composition consumes. Use it directly:
-```js
-const words = JSON.parse(transcriptJson); // [{ text, start, end }]
-```
-For transcription commands, whisper model selection, external APIs (OpenAI, Groq), and supported input formats, see [transcript-guide.md](./transcript-guide.md).
-## Style Detection (Default — When No Style Is Specified)
-Read the full transcript before choosing a style. The style comes from the content, not a template.
-### Four Dimensions
-**1. Visual feel** — the overall aesthetic personality:
-- Corporate/professional scripts → clean, minimal, restrained
-- Energetic/marketing scripts → bold, punchy, high-impact
-- Storytelling/narrative scripts → elegant, warm, cinematic
-- Technical/educational scripts → precise, high-contrast, structured
-- Social media/casual scripts → playful, dynamic, friendly
-**2. Color palette** — driven by the content's mood:
-- Dark backgrounds with bright accents for high energy
-- Muted/neutral tones for professional or calm content
-- High contrast (white on black, black on white) for clarity
-- One accent color for emphasis — not multiple
-**3. Font mood** — typography character, not specific font names:
-- Heavy/condensed for impact and energy
-- Clean sans-serif for modern and professional
-- Rounded for friendly and approachable
-- Serif for elegance and storytelling
-**4. Animation character** — how words enter and exit:
-- Scale-pop/slam for punchy energy
-- Gentle fade/slide for calm or professional
-- Word-by-word reveal for emphasis
-- Typewriter for technical or narrative pacing
-## Per-Word Styling
-Scan the script for words that deserve distinct visual treatment. Not every word is equal — some carry the message.
-### What to Detect
-- **Brand names / product names** — larger size, unique color, distinct entrance
-- **ALL CAPS words** — the author emphasized them intentionally. Scale boost, flash, or accent color.
-- **Numbers / statistics** — bold weight, accent color. Numbers are the payload in data-driven content.
-- **Emotional keywords** — "incredible", "insane", "amazing", "revolutionary" → exaggerated animation (overshoot, bounce)
-- **Proper nouns** — names of people, places, events → distinct accent or italic
-- **Call-to-action phrases** — "sign up", "get started", "try it now" → highlight, underline, or color pop
-### How to Apply
-For each detected word, specify:
-- Font size multiplier (e.g., 1.3x for emphasis, 1.5x for hero moments)
-- Color override (specific hex value)
-- Weight/style change (bolder, italic)
-- Animation variant (overshoot entrance, glow pulse, scale pop)
-- **Marker highlight mode** — for visual emphasis beyond color/scale, add a marker-style effect: highlight sweep behind the word, hand-drawn circle around it, burst lines radiating from it, or scribble underline beneath it. See the `/marker-highlight` skill for patterns and the energy-to-mode mapping table.
-## Script-to-Style Mapping
-| Script tone          | Font mood                             | Animation                               | Color                                        | Size                 |
-| -------------------- | ------------------------------------- | --------------------------------------- | -------------------------------------------- | -------------------- |
-| Hype/launch          | Heavy condensed, 800-900 weight       | Scale-pop, back.out(1.7), fast 0.1-0.2s | Bright accent on dark (cyan, yellow, lime)   | Large 72-96px        |
-| Corporate/pitch      | Clean sans-serif, 600-700 weight      | Fade + slide-up, power3.out, 0.3s       | White/neutral on dark, single muted accent   | Medium 56-72px       |
-| Tutorial/educational | Mono or clean sans, 500-600 weight    | Typewriter or gentle fade, 0.4-0.5s     | High contrast, minimal color                 | Medium 48-64px       |
-| Storytelling/brand   | Serif or elegant sans, 400-500 weight | Slow fade, power2.out, 0.5-0.6s         | Warm muted tones, low opacity (0.85-0.9)     | Smaller 44-56px      |
-| Social/casual        | Rounded sans, 700-800 weight          | Bounce, elastic.out, word-by-word       | Playful colors, colored backgrounds on pills | Medium-large 56-80px |
-## Word Grouping by Tone
-Group size affects pacing. Fast content needs fast caption turnover.
-- **High energy:** 2-3 words per group. Quick turnover matches rapid delivery.
-- **Conversational:** 3-5 words per group. Natural phrase length.
-- **Measured/calm:** 4-6 words per group. Longer groups match slower pace.
-Break groups on sentence boundaries (period, question mark, exclamation), pauses (150ms+ gap), or max word count — whichever comes first.
-## Positioning
-- **Landscape (1920x1080):** Bottom 80-120px, centered
-- **Portrait (1080x1920):** Lower middle ~600-700px from bottom, centered
-- Never cover the subject's face
-- Use `position: absolute` — never relative (causes overflow)
-- One caption group visible at a time
-## Text Overflow Prevention
-Use `window.__hyperframes.fitTextFontSize()` to measure actual rendered text width and compute the correct font size. This replaces character-count heuristics with pixel-accurate measurement powered by [pretext](https://github.com/chenglou/pretext).
-```js
-GROUPS.forEach(function (group, gi) {
-  var result = window.__hyperframes.fitTextFontSize(group.text.toUpperCase(), {
-    fontFamily: "Outfit",
-    fontWeight: 900,
-    maxWidth: 1600,
-  });
-  wordEls.forEach(function (el) {
-    el.style.fontSize = result.fontSize + "px";
-  });
-});
-```
-| Option         | Default    | Description                                          |
-| -------------- | ---------- | ---------------------------------------------------- |
-| `maxWidth`     | `1600`     | Container width in px (1600 landscape, 900 portrait) |
-| `baseFontSize` | `78`       | Starting font size — used when text fits             |
-| `minFontSize`  | `42`       | Floor — never shrink below this                      |
-| `fontWeight`   | `900`      | Must match the CSS font-weight                       |
-| `fontFamily`   | `"Outfit"` | Must match the CSS font-family                       |
-| `step`         | `2`        | Decrement step in px per iteration                   |
-`fontWeight` and `fontFamily` must match the CSS applied to the text elements exactly, or measurements will be inaccurate.
-**Safety nets (still required in CSS):**
-- `max-width: 1600px` (landscape) or `max-width: 900px` (portrait) on caption container
-- `overflow: hidden` as a fallback for `fits: false` edge cases
-- `position: absolute` on all caption elements
-- Explicit `height` on caption container (e.g., `200px`)
-## Caption Exit Guarantee
-Captions that stick on screen are the most common caption bug. Every caption group **must** have a hard kill after its exit animation.
-```js
-// Animate exit (soft — can fail if tweens conflict)
-tl.to(groupEl, { opacity: 0, scale: 0.95, duration: 0.12, ease: "power2.in" }, group.end - 0.12);
-// Hard kill at group.end (deterministic — guarantees invisible)
-tl.set(groupEl, { opacity: 0, visibility: "hidden" }, group.end);
-```
-**Why both?** The `tl.to` exit can fail to fully hide a group when karaoke word-level tweens conflict with the parent exit tween, `fromTo` entrance tweens lock values that override later tweens, or timeline scrubbing lands between the exit start and end. The `tl.set` at `group.end` is a deterministic kill — it fires at an exact time, doesn't animate, and can't be overridden.
-**Self-lint rule:** After building the timeline, verify every caption group has a hard kill:
-```js
-GROUPS.forEach(function (group, gi) {
-  var el = document.getElementById("cg-" + gi);
-  if (!el) return;
-  tl.seek(group.end + 0.01);
-  var computed = window.getComputedStyle(el);
-  if (computed.opacity !== "0" && computed.visibility !== "hidden") {
-    console.warn(
-      "[caption-lint] group " + gi + " still visible at t=" + (group.end + 0.01).toFixed(2) + "s",
-    );
-  }
-});
-tl.seek(0);
-```
-Place this **before** `window.__timelines[id] = tl` so it runs at composition init.
-## References
-For dynamic animation techniques (karaoke, clip-path reveals, slam words, scatter exits, elastic entrances, 3D rotation, audio-reactive captions, pretext-based positioning and grouping), see [dynamic-techniques.md](./dynamic-techniques.md).
-For animated text emphasis (highlight sweeps, hand-drawn circles, burst lines, scribble underlines, sketchout effects) that pairs with per-word styling, see the `/marker-highlight` skill.
-For transcription commands, whisper models, external APIs, and troubleshooting, see [transcript-guide.md](./transcript-guide.md).
-## Constraints
-- **Deterministic.** No `Math.random()`, no `Date.now()`.
-- **Sync to transcript timestamps.** Words appear when spoken.
-- **One group visible at a time.** No overlapping caption groups.
-- **Every caption group must have a hard `tl.set` kill at `group.end`.** Exit animations alone are not sufficient.
-- **Check project root** for font files before defaulting to Google Fonts.

package/dist/skills/hyperframes-compose/SKILL.md DELETED Viewed

@@ -1,155 +0,0 @@
----
-name: hyperframes-compose
-description: Create video compositions, animations, title cards, or overlays in HyperFrames HTML. Use when asked to build any HTML-based video content.
----
-# Compose Video
-HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
-## Approach
-Before writing HTML, think at a high level:
-1. **What** — what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.
-2. **Structure** — how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions).
-3. **Timing** — which clips drive the duration, where do transitions land, what's the pacing.
-4. **Execute** — then implement using the rules below.
-For small edits (fix a color, adjust timing, add one element), skip straight to the rules.
-When no `visual-style.md` or animation direction is provided, follow [house-style.md](./house-style.md) for motion defaults, sizing, and color palettes.
-## Data Attributes
-### All Clips
-| Attribute          | Required                          | Values                                                 |
-| ------------------ | --------------------------------- | ------------------------------------------------------ |
-| `id`               | Yes                               | Unique identifier                                      |
-| `data-start`       | Yes                               | Seconds or clip ID reference (`"el-1"`, `"intro + 2"`) |
-| `data-duration`    | Required for img/div/compositions | Seconds. Video/audio defaults to media duration.       |
-| `data-track-index` | Yes                               | Integer. Same-track clips **cannot overlap**.          |
-| `data-media-start` | No                                | Trim offset into source (seconds)                      |
-| `data-volume`      | No                                | 0-1 (default 1)                                        |
-`data-track-index` does **not** affect visual layering — use CSS `z-index`.
-### Composition Clips
-| Attribute                    | Required | Values                                       |
-| ---------------------------- | -------- | -------------------------------------------- |
-| `data-composition-id`        | Yes      | Unique composition ID                        |
-| `data-duration`              | Yes      | Takes precedence over GSAP timeline duration |
-| `data-width` / `data-height` | Yes      | Pixel dimensions (1920x1080 or 1080x1920)    |
-| `data-composition-src`       | No       | Path to external HTML file                   |
-## Composition Structure
-Every composition is a `<template>` wrapping a `<div>` with `data-composition-id`. Each must include its own GSAP script and register its timeline:
-```html
-<template id="my-comp-template">
-  <div data-composition-id="my-comp" data-width="1920" data-height="1080">
-    <!-- content -->
-    <style>
-      [data-composition-id="my-comp"] {
-        /* scoped styles */
-      }
-    </style>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      // tweens...
-      window.__timelines["my-comp"] = tl;
-    </script>
-  </div>
-</template>
-```
-Load in root: `<div id="el-1" data-composition-id="my-comp" data-composition-src="compositions/my-comp.html" data-start="0" data-duration="10" data-track-index="1"></div>`
-## Video and Audio
-Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
-```html
-<video
-  id="el-v"
-  data-start="0"
-  data-duration="30"
-  data-track-index="0"
-  src="video.mp4"
-  muted
-  playsinline
-></video>
-<audio
-  id="el-a"
-  data-start="0"
-  data-duration="30"
-  data-track-index="2"
-  src="video.mp4"
-  data-volume="1"
-></audio>
-```
-## Timeline Contract
-- All timelines start `{ paused: true }` — the player controls playback
-- Register every timeline: `window.__timelines["<composition-id>"] = tl`
-- Framework auto-nests sub-timelines — do NOT manually add them
-- Duration comes from `data-duration`, not from GSAP timeline length
-- Never create empty tweens to set duration
-## Rules (Non-Negotiable)
-**Deterministic:** No `Math.random()`, `Date.now()`, or time-based logic. The renderer must produce identical output every time.
-**GSAP:** Only animate visual properties (`opacity`, `x`, `y`, `scale`, `rotation`, `color`, `backgroundColor`, `borderRadius`, transforms). Do NOT animate `visibility`, `display`, or call `video.play()`/`audio.play()`.
-**Animation conflicts:** Never animate the same property on the same element from multiple timelines simultaneously — causes flickering in headless renders.
-**Never do:**
-1. Forget `window.__timelines` registration
-2. Use video for audio — always muted video + separate `<audio>`
-3. Nest video inside a timed div — use a non-timed wrapper
-4. Use `data-layer` (use `data-track-index`) or `data-end` (use `data-duration`)
-5. Animate video element dimensions — animate a wrapper div
-6. Call play/pause/seek on media — framework owns playback
-7. Create a top-level container without `data-composition-id`
-## Editing Existing Compositions
-- Read the full composition first — match existing fonts, colors, animation patterns
-- Only change what was requested — don't rewrite untouched sections
-- Don't rewrite entire files for small changes
-- Preserve timing of unrelated clips
-## Typography and Assets
-- Every composition loads its own fonts (`@import` or `@font-face` in `<style>`)
-- Use `font-display: block` for local fonts — renderer needs fonts loaded before capturing
-- Add `crossorigin="anonymous"` to media loaded from external URLs
-- Minimum readable text: 20px landscape, 18px portrait
-- For dynamic text that may overflow its container, use `window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })` to compute the largest font size that fits on one line. Returns `{ fontSize, fits }`. Options: `baseFontSize` (default 78), `minFontSize` (default 42), `step` (default 2). `fontFamily` and `fontWeight` must match the CSS applied to the element.
-- All files (video, audio, fonts, images) live at the project root alongside `index.html`
-- From sub-compositions, use `../` to reference root files
-For PiP, title cards, and slide show patterns, see [patterns.md](./patterns.md).
-For data, stats, and infographics, see [data-in-motion.md](./data-in-motion.md).
-For typewriter text and other GSAP animation effects, see the `gsap-effects` skill.
-For audio-driven animation (beat sync, glow, pulse), see the `audio-reactive` skill.
-## Output Checklist
-- [ ] Every top-level container has `data-composition-id`
-- [ ] Every composition has `data-width`, `data-height`, `data-duration`
-- [ ] Compositions in own HTML files, loaded via `data-composition-src`
-- [ ] `<template>` wrapper on sub-compositions
-- [ ] `window.__timelines` registered for every composition
-- [ ] 100% deterministic — no randomness
-- [ ] Each composition includes GSAP: `<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>`
-- [ ] `npx hyperframes lint` passes with 0 errors
-- [ ] `npx hyperframes validate` passes with 0 errors (run both before opening the studio)

package/dist/skills/hyperframes-tts/SKILL.md DELETED Viewed

@@ -1,79 +0,0 @@
----
-name: hyperframes-tts
-description: Generate speech audio locally using Kokoro-82M (no API key). Use when asked to create narration, voiceover, or text-to-speech audio for compositions, or when a user needs spoken audio from text. Covers voice selection, speed tuning, and integrating TTS output with compositions and captions.
----
-# Text-to-Speech
-## Voice Selection
-Match voice to content. Default is `af_heart`.
-| Content type      | Voice                 | Why                           |
-| ----------------- | --------------------- | ----------------------------- |
-| Product demo      | `af_heart`/`af_nova`  | Warm, professional            |
-| Tutorial / how-to | `am_adam`/`bf_emma`   | Neutral, easy to follow       |
-| Marketing / promo | `af_sky`/`am_michael` | Energetic or authoritative    |
-| Documentation     | `bf_emma`/`bm_george` | Clear British English, formal |
-| Casual / social   | `af_heart`/`af_sky`   | Approachable, natural         |
-Run `npx hyperframes tts --list` for all 54 voices (8 languages: EN, JP, ZH, KO, FR, DE, IT, PT).
-## Speed Tuning
-- **0.7-0.8** — Tutorial, complex content, accessibility
-- **1.0** — Natural pace (default)
-- **1.1-1.2** — Intros, transitions, upbeat content
-- **1.5+** — Rarely appropriate; test carefully
-## Composing with TTS Audio
-Generate a voiceover and use it as the audio track:
-```bash
-npx hyperframes tts "Your script here" --voice af_nova --output narration.wav
-```
-Then reference it in the composition as a standard `<audio>` element:
-```html
-<audio
-  id="narration"
-  data-start="0"
-  data-duration="auto"
-  data-track-index="2"
-  src="narration.wav"
-  data-volume="1"
-></audio>
-```
-## TTS + Captions Workflow
-Generate speech, then transcribe it back for word-level caption timestamps:
-```bash
-# 1. Generate speech
-npx hyperframes tts script.txt --voice af_heart --output narration.wav
-# 2. Transcribe for word-level timestamps
-npx hyperframes transcribe narration.wav
-# 3. Result: narration.wav + transcript.json ready for captions
-```
-This avoids manually timing captions — whisper extracts precise word boundaries from the generated audio.
-## Long Scripts
-For scripts longer than a few paragraphs, write the text to a `.txt` file and pass the path:
-```bash
-npx hyperframes tts script.txt --voice bf_emma --output narration.wav
-```
-The model handles long text well but very long inputs (>5 minutes of speech) may benefit from splitting into segments.
-## Requirements
-- Python 3.8+ with `kokoro-onnx` and `soundfile` installed (`pip install kokoro-onnx soundfile`)
-- Model downloads automatically on first use (~311 MB + ~27 MB voices, cached in `~/.cache/hyperframes/tts/`)

package/dist/templates/blank/compositions/captions.html DELETED Viewed

@@ -1,95 +0,0 @@
-<template id="captions-template">
-  <div
-    data-composition-id="captions"
-    data-width="1920"
-    data-height="1080"
-    data-duration="__VIDEO_DURATION__"
-  >
-    <div id="captions-container"></div>
-    <style>
-      [data-composition-id="captions"] {
-        width: 1920px;
-        height: 1080px;
-        pointer-events: none;
-      }
-      [data-composition-id="captions"] #captions-container {
-        position: absolute;
-        bottom: 100px;
-        left: 50%;
-        transform: translateX(-50%);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 150px;
-      }
-      .caption-group {
-        position: absolute;
-        opacity: 0;
-        font-family: "Inter", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        color: #ffffff;
-        text-shadow:
-          0 2px 8px rgba(0, 0, 0, 0.8),
-          0 0 2px rgba(0, 0, 0, 0.9);
-        white-space: nowrap;
-        max-width: 1600px;
-        overflow: hidden;
-      }
-    </style>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script>
-      (function () {
-        window.__timelines = window.__timelines || {};
-        const tl = gsap.timeline({ paused: true });
-        const script = [];
-        if (script.length === 0) {
-          window.__timelines["captions"] = tl;
-          return;
-        }
-        const container = document.getElementById("captions-container");
-        // Group words into lines (max 5 words per line)
-        const lines = [];
-        for (let i = 0; i < script.length; i += 5) {
-          const lineWords = script.slice(i, i + 5);
-          lines.push({
-            text: lineWords.map((w) => w.text).join(" "),
-            start: lineWords[0].start,
-            end: lineWords[lineWords.length - 1].end,
-          });
-        }
-        lines.forEach((line, index) => {
-          const el = document.createElement("div");
-          el.className = "caption-group";
-          el.textContent = line.text;
-          container.appendChild(el);
-          tl.fromTo(
-            el,
-            { opacity: 0, y: 20 },
-            { opacity: 1, y: 0, duration: 0.3, ease: "power3.out" },
-            line.start,
-          );
-          const hideTime =
-            index < lines.length - 1 ? Math.min(line.end, lines[index + 1].start) : line.end;
-          tl.to(el, { opacity: 0, y: -10, duration: 0.25, ease: "power2.in" }, hideTime - 0.25);
-          tl.set(el, { opacity: 0, visibility: "hidden" }, hideTime);
-        });
-        window.__timelines["captions"] = tl;
-      })();
-    </script>
-  </div>
-</template>