hve-spielberg

hve-spielberg

AI-powered video production pipeline for Claude Code and GitHub Copilot CLI. From design thinking to final render — 6 automated phases that turn your app into a polished promo, showcase, or tutorial video.

/hve-spielberg

Demo

▶ Watch the 60-second promo on YouTube — 1920×1080, ElevenLabs voiceover (Matilda) + Freesound music. Regenerate locally via example/README.md § "Reproducing the render".

The promo above was built by hve-spielberg itself, end-to-end, using only what ships in this repo:

• Vercel design system (vendored at design-systems/vercel/DESIGN.md)
• Phase 3–4 HyperFrames composition (example/scenes/, example/index.html)
• Phase 5 ElevenLabs voiceover (Matilda) + Freesound music (CC-BY) + ffmpeg mix
• npx hyperframes render → MP4 at 1920×1080, 30fps

Everything in example/ is the actual artifact — not a staged mock-up. To reproduce: run example/voiceover.py, then the normalize + music-mix ffmpeg steps in example/README.md to produce voiceover-with-music.mp3 (the file index.html references — render is silent without it), then npx hyperframes render.

What It Does

hve-spielberg is an agent skill (Claude Code / GitHub Copilot CLI) that orchestrates end-to-end video production:

1. Understands your product through design thinking (empathize, define, ideate)
2. Builds a narrative with scene storyboarding and emotional arc
3. Captures your app automatically via Chrome DevTools
4. Authors HTML scene templates matching your brand DNA — pick from 10 curated design systems (Stripe, Linear, Apple, Notion, Vercel, Airbnb, GitHub, Cal, Arc, Bento), 8 HyperFrames named styles, or derive from screenshots
5. Produces the video in HyperFrames (HTML + GSAP, headless-Chromium rendered)
6. Adds voiceover + music with ElevenLabs TTS (or local Kokoro-82M fallback), npx hyperframes transcribe for timing verification, and Freesound music

Three Modes

Mode	Structure	Best For
Promo	Hook → Pain → Solution → Features → CTA	Marketing, launches, ads
Showcase	Intro → Walkthrough → Highlights → Closer	Portfolio, demos, case studies
Tutorial	Cold Open → Step-by-Step Chapters → Recap	Walkthroughs, how-tos, onboarding

Pipeline

Phase 0: DISCOVERY         Phase 1: STORYTELLING       Phase 2: CAPTURE
├ Design thinking          ├ Narrative structure        ├ Chrome DevTools MCP
├ Codebase/feature scan    ├ Scene storyboard           ├ Auto-navigate app
├ Product context Q&A      ├ Emotional arc              ├ Screenshot key views
└ Goal/audience analysis   └ Script outline             └ Interaction states

Phase 3: DESIGN            Phase 4: PRODUCTION         Phase 5: AUDIO & RENDER
├ hyperframes skill        ├ HyperFrames root index     ├ ElevenLabs TTS
├ DESIGN.md (brand+motion) ├ Sub-composition wiring     ├ Whisper verification
├ Scene HTML templates     ├ GSAP transitions           ├ Freesound Music API
└ Per-scene preview        └ lint / inspect / validate  └ npx hyperframes render

Each phase has a user-approval checkpoint before proceeding to the next.

Prerequisites

Quick check: run ./scripts/check_requirements.sh to verify everything below in one shot. Add --fix to auto-install the user-scoped pieces (companion skills, chrome-headless-shell, Whisper); system packages and API keys are printed for you to set up.

No local checkout? The doctor is self-contained — run it straight from GitHub:

# report only
curl -fsSL https://raw.githubusercontent.com/nebrass/hve-spielberg/main/scripts/check_requirements.sh | bash

# auto-install the user-scoped deps (--fix is forwarded via `bash -s --`)
curl -fsSL https://raw.githubusercontent.com/nebrass/hve-spielberg/main/scripts/check_requirements.sh | bash -s -- --fix

Prefer to read the script before running it (recommended for any curl … | bash)? Download, inspect, then execute:

curl -fsSL https://raw.githubusercontent.com/nebrass/hve-spielberg/main/scripts/check_requirements.sh -o check_requirements.sh
less check_requirements.sh && bash check_requirements.sh        # add --fix to auto-install