Sunwood-ai-labs / hyperframes-motion-reel-skill

HyperFrames Motion Reel Skill 
 Showreel-grade motion graphics, written as code. 
 A Claude Code skill that turns a one-line theme into a beat-synced, render-ready HyperFrames video. 
`hyperframes-motion-reel` directs Claude Code to act as a senior motion designer and creative coder. From a short theme (plus optional images or voice), it expands a world, copy, design system, beat-by-beat timeline and generated score — then implements, checks, snapshots and renders an MP4 with HyperFrames.
It is the HyperFrames port of `remotion-motion-reel`: same creative bar, but built only from Apache-2.0 / free tooling, so **no Remotion Company License** is needed for commercial work at any company size.
## ✨ Features
- **Showreel creative direction** — bold typography, fast transitions, depth, parallax, particles and camera moves; plain fade-in chains are banned
- **Beat-locked timing** — every cut and impact is written as `b(n)` on a 120 BPM / 60 FPS grid (1 beat = 0.5 s = 30 frames)
- **Two-layer animation architecture** — one paused GSAP timeline for choreography + a pure `render(t)` function for generative Canvas/SVG layers (seek-safe)
- **Code-generated sound** — kick, hi-hat, impact, rise and sub bass written as WAV with Node.js built-ins only, driven by the same beat table as the picture
- **Morphing transitions** — shapes carry over between scenes (type → line → graph → 3D grid → tunnel → logo) instead of cross-fades
- **Deterministic rendering** — seeded PRNG, no `Date.now()` / `Math.random()`, stable across parallel render workers
- **Full verification loop** — `lint` → `check` (0 findings) → `snapshot` review → `render` → `ffprobe` / `ffmpeg` frame spot-checks
## 🚀 Quick Start
### 1. Install the skill
 [code] 
On Windows (PowerShell):
 [code] 
The skill loads the HyperFrames domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-registry`, `/hyperframes-cli`, `/hyperframes-audio`) during the build, so install those alongside it.
### 2. Requirements
- Node.js (current LTS) and `npx`
- Google Chrome (used by the HyperFrames renderer)
- `ffmpeg` / `ffprobe` on `PATH` for final verification
### 3. Run it
 [code] 
Durations, BPM, resolution, aspect ratio and assets given in the prompt override the defaults.
## ⚙️ Default Parameters
| Parameter | Default | Notes |
| --- | --- | --- |
| Duration | 15 s | Snaps to the beat grid; follows voice length when voice is supplied |
| FPS | 60 | `npx hyperframes render --fps 60` |
| BPM | 120 | 1 beat = 0.5 s = 30 frames |
| Size | 1920 × 1080 | 1080 × 1920 for vertical, 1080 × 1080 for square |
| Output | MP4 / H.264 | draft and delivery quality presets |
## 🧭 Workflow
1. Concept — one sentence
2. Design system — written to `DESIGN.md`
3. Timeline — seconds, beats and frame numbers (`b(8) = 4.0s = f240`)
4. Motion design — named HyperFrames blueprints and rules per scene
5. Sound design — generated by `scripts/generate-audio.mjs`
6. Implementa