Content & Media Creation · nateherkai/hyperframes-student-kit
motion-showreel
Design and build a 10-30 second motion-design showreel or brand reel in the style of Nate's Opus 5.5 "CLAUDE / MOTION REEL": one brand motif transformed through labeled craft chapters, a persistent HUD, cuts locked to a 120-130 BPM grid, a sub-second flurry, and a held logo lockup that answers the opening. Use when asked for a showreel, sizzle reel, brand reel, motion reel, "a reel like the Opus one", "show off motion design for <brand>", a 15-second brand film cut to music, or to study why a reference reel works and rebuild that energy for another brand.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Deconstruct a "portfolio-grade showreel" into a reproducible architecture: a single motif running through 6–7 craft chapters labeled by a HUD, ending back at the motif, rather than stacking disparate effects shot-by-shot.
.claude/skills/motion-showreel/SKILL.md
A showreel promises that every frame was a decision. … Hard cuts are reserved for the flurry.
What is happening here: Formulate the "motif transformation chain" into rigid syntax—each transition transforms the current object into the next, reserving hard cuts exclusively for the flurry; then overlay the HUD, ink/paper/one accent color + one hidden accent, beat-grid alignment, and physical tactile textures.
The HUD is a persistent layer: crop marks, title line, spec line (resolution/framerate/measured BPM), timecode, chapter ruler, and chapter titles, dynamically inverting ink/paper tones against background luminance.
.claude/skills/motion-showreel/SKILL.md
**Persistent HUD.** Corner crop marks … It flips ink/paper with the background.
What is happening here: The HUD is not decorative; it is a visual meta-language proving that "every frame is a decision"; engineered and driven by `hudFrame(t)` (a pure function of `t`) in `templates/hud.html` to maintain seek safety.
Cuts are locked to a 120–130 BPM grid: hard cuts, flash frames, and color inversions strictly land within ±2 frames of grid lines, leaving a "pre-drop pause" gap right before the midpoint.
.claude/skills/motion-showreel/SKILL.md
**Cut on the beat, animate on the off-beats.** … comes before the midpoint hit.
What is happening here: Convert "cutting to music" into measurable constraints, supported by empirical frame-by-beat breakdowns of the reference reel in `references/reference-breakdown.md`.
Structure is allocated by beats: roughly 75% progression / 13% flurry / 12% resolve, accelerating before sustaining; visual density breathes organically (single object → text wall → 100-cell grid → thousands of particles → flurry → single word).
.claude/skills/motion-showreel/SKILL.md
**Accelerate, then hold.** … and 12% resolve.
What is happening here: Provide an applicable ratio template for a 15-second cut (physics 4 beats → typography 8 beats → three 4-beat chapters → 4-beat flurry → 4-beat lockup).
Style originates not from adjectives, but from a second-by-second quantitative breakdown: BPM, beat anchors, every hard cut timestamp, luminance rhythm, and audio levels.
.claude/skills/motion-showreel/references/reference-breakdown.md
- **Tempo:** 128 BPM … Grid anchor about 0.51s. … - **Hard cuts land on beats:** 1.77 (flash) … within 2 frames of a grid line.
What is happening here: Convert "why this reference reel looks good" into reusable numerical metrics (stored in `references/`), then benchmark your own final render using the exact same toolset (Step 8).
Analyze musical phase before cutting: align phase using the kick band (120Hz low-pass filter) rather than the full frequency spectrum, preventing every splice from lagging by half a beat.
.claude/skills/motion-showreel/SKILL.md
`music-grid` prints the period, the **kick-band phase** (use it) … the script warns when the two disagree.
What is happening here: Encode common beat-alignment pitfalls (such as accidentally locking to off-beat hi-hats) into script behaviors: `music-grid.mjs` calculates phase specifically against the KICK band, provides contrast ratios, and warns on conflicts; re-verifies post-edit (demanding < 25ms offset), and writes the measured BPM directly into the HUD.
Animations are driven by frame-by-frame pure functions (time → complete state), with canvas effects rendered from deterministic seed values to guarantee seek reproducibility.
.claude/skills/motion-showreel/SKILL.md
Put a **per-frame driver** on the timeline … never from `Math.random()` at draw time.
What is happening here: HyperFrames' paused timeline and arbitrary seek requirements demand deterministic replayability, thus prohibiting `Math.random` during rendering; properties mutated across multiple tweens (such as shared flash layers) fall back to frame-by-frame calculation to prevent tween state lockup during backward seeking.
Verification applies the same measuring tape: cut points deviate from beat markers by ≤ 35ms, luminance alternates by chapter, audio features a pre-drop gap, and 10-frame continuous filmstrips inspect every transition; brand testing requires brand recognition even with the HUD occluded.
.claude/skills/motion-showreel/SKILL.md
- Run `analyze-reference.mjs` on your own render with `--bpm` and `--phase`: cut … luminance must alternate by chapter … Brand test: pick 6 random frames. … read as the brand with the HUD covered.
What is happening here: Shift QA criteria from "looks good" to automated regressions against the same quantitative tools, documenting evidence in `VERIFY.md` to ensure the HUD alone isn't carrying the video.
2Core Capabilities
01End-to-end production pipeline for 10–30s brand/motion showreels (BRAND.md ingestion → STORYBOARD.md → music/beats → SFX/premix → build → verification)
02Reverse quantitative analysis of reference videos: contact sheets, frame-by-frame luminance deltas, audio RMS, onset detection, and cut point offsets relative to downbeats and upbeats
03Beat tooling suite: BPM/phase detection (music-grid), beat-aligned chapter segmentation with frame charts (beatgrid), and splicing music takes to cut grids (splice-music)
04Paid generative asset workflows (Kie.ai): Suno instrumental tracks, Seedream image-to-image preserving logo contours, and Kling image-to-video 5s camera motion
05SFX sound design and premixing: placing audio cues against visual keyframes, exporting a unified master.wav as the single composite audio track
06HyperFrames/GSAP construction contract: single paused timeline, chapter clip layering, top-level HUD, tweening transform/opacity only, zero layout thrashing (measure once)
07Chapter technique catalog (physics squash/stretch, kinetic typography, grids/particles, material lookdev, flurry, lockup), each with reference patterns, seek-safe implementations, and brand adaptation guides
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | FFmpeg / ffprobe（接触表、亮度/RMS 分析、音乐拼接、premix） |
| api | Kie.ai 任务 API（Suno 音乐 / Seedream 图 / Kling 视频；付费、消耗本人额度） |
| api | Kie.ai 文件上传（把本地参考图以 base64 上传换 downloadUrl） |
| api | ElevenLabs 音效生成（付费） |
| cli | HyperFrames CLI（lint / Studio 预览 / draft render / 最终 render） |
| package | 兄弟 skill 依赖：hyperframes、gsap，与仓库根 MOTION_PHILOSOPHY.md / video-storytelling |
| network | 字体：要求下载到项目 assets/fonts/ 用 @font-face（远端拉取发生在取材期，不在渲染期） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local scripts and commands: node scripts/analyze-reference.mjs <video> <out> (invoking spawnSync with ffmpeg/ffprobe)
- 网络端点: Declares external network access: https://api.kie.ai/api/v1/jobs/createTask (initiating generation tasks)
- 本地工作目录: File I/O and artifact output: writes to video-projects/<slug>/: BRAND.md, STORYBOARD.md, assets/{audio,img,video,fonts}
Audit Notes: Both triggers for the Amber risk tier are localized within the skill's own directory: 1) **Reading environment credentials and calling external generation APIs using keys**—`scripts/kie.mjs` checks `process.env.KIE_API_KEY`, traversing up to 8 parent directories to locate `.env` via regex if missing, sends `Authorization: Bearer` requests to `api.kie.ai` paid task endpoints, and uploads base64-encoded local images to `kieai.redpandaai.co`; `scripts/sfx.mjs` similarly checks environment variables or scans up for `.env` to read `ELEVENLABS_API_KEY` for ElevenLabs SFX calls. 2) **Exfiltration of user assets and consumption of account balance**—Subcommands under `kie` (`image`/`video`) upload user-provided logos and stills for generation (Seedream/Kling); `SKILL.md` explicitly tags music and SFX generation as paid operations requiring user confirmation. No security regressions detected (no TLS disabling, no `--no-verify`), no sandbox tampering, no anti-automation bypasses, and no arbitrary code execution surfaces: subprocesses strictly invoke fixed binaries like `ffmpeg`/`ffprobe`, all scripts ship with the bundle for line-by-line inspection, and scripts fail fast with explicit errors when keys are missing rather than degrading silently.
5Second-Pass Verification
- [ok] KIE_API_KEY 是否真的被读取并外发（橙档关键证据） — kie.mjs:19 `if (process.env.KIE_API_KEY) return process.env.KIE_API_KEY;`，随即 loadKey() 向上 8 层找 .env 并抓 KIE_API_KEY，无 key 抛 'KIE_API_KEY is not set. Add it to .env (see docs/TOOLS-AND-API-KEYS.md).'；带 Authorization: Bearer 调 createTask/recordInfo/credit。调用点真实存在。
- [ok] ELEVENLABS_API_KEY 读取与外发是否属实 — sfx.mjs:15 `if (process.env.ELEVENLABS_API_KEY) return process.env.ELEVENLABS_API_KEY;`（无 key 抛错）；文件头注释声明 PAID 并要求先确认。
- [ok] 是否存在文档未提及的隐藏网络调用或脚本 — 全目录 URL/网络 token 扫描只命中上述网络点与 docs.kie.ai 文档链接；beatgrid.mjs 纯计算，其余 mjs 仅 ffmpeg 子进程。未发现混淆代码、动态 eval 或静默外发。
- [unlocatable] 参考片量化数字能否在源码内复现 — references/reference-breakdown.md 的 128 BPM、各切点时间、亮度序列与 RMS 值，是作者对一条私有样片（Opus 5.5 的 CLAUDE / MOTION REEL）跑 analyze-reference.mjs 的结果；pin 仓库内既无该样片也无原始报告输出，本次只读侦查不运行分析，故这些数值仅作「文档声明」记录，不当已核事实使用（分析器能力本身已可读验证）。
- [discrepancy] 「付费调用先确认」是技术门禁还是提示层约束 — ［判定：提示层，非技术强制］脚本头注释显式声明 PAID，SKILL.md 在音乐与 SFX 两处也写 paid call / confirm before running；但脚本没有任何交互式确认开关或 --dry-run，门禁靠 agent 遵守。已在 risks 中如实标注。
- [ok] HUD 模板与 SKILL.md 的 HUD 规格是否一致（文档/资产是否脱节） — templates/hud.html 头注释要求把 <style> 粘进合成、#hud 作为 #root 最后子节点、由 hudFrame(t)（t 的纯函数）驱动，并提供 --hud-acc / .hud-tl / .hud-tr / #ptime / CH / SEGB / paperRanges 的品牌替换清单，与 SKILL.md 第 4 条规格一一对应。
6Verdict & Scenarios
Best for: Ideal for creators looking to produce 10–30s brand or motion-design showreels: those with defined brand assets, a music budget, a commitment to working along a beat grid, and an appreciation for engineering-driven workflows ("quantify reference first, verify output with the same ruler"); also serves as an analytical reverse-engineering template to understand why reference reels succeed (start with references/reference-breakdown.md). Deliverables include HyperFrames index.html, MP4 renders, and VERIFY.md documentation.
Not for: Not suitable for: 1) Long-form content requiring voiceover narration, live-action footage, or multiple varied scenes (this skill is purely motion-design/music-driven); 2) Users lacking budget or unwilling to call external paid generation APIs (music, SFX, and hero frames/video invoke paid paths, though local assets can be substituted); 3) Scenarios where uploading brand assets to third-party endpoints is prohibited; 4) Environments missing Node 22+ or FFmpeg; 5) Users looking for turn-key template cloning—SKILL.md strictly requires treating the example brief as a chapter-mapping conceptual model rather than a copy-paste template.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload motion-showreel.tar.gz
sha256:
Option B · Copy Guide for Agentcc870e83245405bd…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0d30152a82.