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

git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel

On Windows (PowerShell):

git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill "$env:USERPROFILE\.claude\skills\hyperframes-motion-reel"

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

/hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
/hyperframes-motion-reel Product launch teaser for an AI camera, vertical 9:16
/hyperframes-motion-reel ./assets/character.png ./assets/voice.wav character intro reel

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