Hyperframes V2

A personal video editing studio. Drop a raw recording in raw-media/, and the agent handles the rest: ElevenLabs Scribe transcription → filler + silence removal → motion-graphics composition → rendered MP4.

Quickstart

Already scaffolded — Hyperframes skills installed in .claude/skills/, video-use cloned to tools/video-use/ and registered as /video-use, worked example at video-projects/claude-edit-intro/. To start editing:

# 1. Set your ElevenLabs key (one-time)
cp .env.example .env
# edit .env → ELEVENLABS_API_KEY=sk_...

# 2. Drop a raw video
cp ~/Downloads/raw-take.mp4 raw-media/

# 3. Scaffold + transcribe
npm run pipeline -- all raw-media/raw-take.mp4 my-project
#   → creates video-projects/my-project/
#   → writes transcript.json via ElevenLabs Scribe

# 4. Invoke /video-use (Claude drives the cut, grade, and subtitle burn-in)

# 5. Author motion graphics in video-projects/my-project/
#    (invoke /hyperframes to learn the composition patterns)
cd video-projects/my-project && npx hyperframes preview    # port 3010

# 6. Render
npm run pipeline -- render my-project
#   → final.mp4 appears at video-projects/my-project/final.mp4

First-time bootstrap (if cloning this repo fresh)

npm install                                                  # playwright devDep
npx -y skills add heygen-com/hyperframes                     # hyperframes skills
git clone https://github.com/browser-use/video-use tools/video-use
python -m pip install requests pillow numpy matplotlib       # video-use deps
cmd /c 'mklink /J ".claude\skills\video-use" "tools\video-use"'   # register /video-use

Workflow

1. Intake — put the raw file in raw-media/.
2. Clean — npm run pipeline -- clean raw-media/<file>.mp4 <slug> transcribes with ElevenLabs Scribe and cuts filler words + silences with 30ms audio fades. Writes source.mp4 + transcript.json.
3. Compose — inside video-projects/<slug>/, author index.html + compositions/*.html using HTML + GSAP. Invoke /hyperframes skill for framework patterns.
4. Preview + render — npx hyperframes preview on port 3010, then npx hyperframes render --quality standard.
5. Deliver — final.mp4 sits at video-projects/<slug>/final.mp4.

Worked Example

See video-projects/claude-edit-intro — a fully built project cloned from nateherkai/hyperframes-student-kit. Study the index.html, scrub final.mp4, and rebuild from scratch to learn the composition patterns.

Directory Map

See CLAUDE.md for the full tree and CLAUDE.md for workspace rules.

Requirements

• Node.js 22+ (have v24.14.1)
• FFmpeg on PATH (have 8.1)
• Git
• ElevenLabs API key (for Scribe transcription)
• Chrome/Chromium (for Hyperframes Studio preview)

References

• Hyperframes docs
• browser-use/video-use
• nateherkai/hyperframes-student-kit