Home / All Skills / Content & Media Creation / hyperframes-video-beats
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · nateherkai/hyperframes-student-kit

hyperframes-video-beats

Plan, write, time, style, and validate motion-graphic beats for long-form talking-head HyperFrames videos. Use when Codex is asked to add or improve visual beats, glassmorphism lower thirds, crumpled-paper full-screen takeovers, transcript-synced callouts, pacing coverage, YouTube retention graphics, or render-ready overlays in an existing HyperFrames video project.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author nateherkaiGitHub nateherkai/hyperframes-student-kit ↗Stars 1070License NOASSERTION（仓库根 LICENSE，实为 MIT 文本）Commit 0d30152a82
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

Positioned as a "review editor" rather than a "generator": transforms talking-head footage and transcripts into rhythmic motion-graphic beat sets, adhering to the principle of never obscuring the speaker or adding graphics merely to fill gaps.

.claude/skills/hyperframes-video-beats/SKILL.md
Use this skill to turn a talking-head video plus transcript into a paced set of motion graphics that support the narration without covering the speaker unnecessarily.
Decision criteria are framed around four questions (What needs to be remembered? Which concept needs structure? Which statistic deserves emphasis? Where does a pacing lag risk viewer drop-off?), rather than being strictly timestamp-driven.

The first step is auditing the existing project state: inspect AGENTS.md, the root composition, the existing beat sheet, shared CSS, and the transcript, then build a coverage map from data-start/data-duration or the master SHOW array.

.claude/skills/hyperframes-video-beats/SKILL.md
3. Build a coverage map from the root `data-start` / `data-duration` entries or the master `SHOW` array. … 5. Identify topic spans by narration, not by arbitrary timestamps.
Tooling favors fast local commands: Prefer `rg`, `Select-String`, and small Node/PowerShell transcript scripts (no network lookups).

Clear division of labor between two beat types: crumpled-paper full-screen takeovers are used for core arguments, checklists, chapters, quotes, and data; glassmorphic lower thirds are used for explanations, topic tags, and formulaic mental models, always ensuring the face remains unobscured.

.claude/skills/hyperframes-video-beats/SKILL.md
Use a paper takeover when the narration reaches a major thesis, list, section marker, quote, or stat that should briefly become the whole frame. … Use a glass lower-third when the speaker should remain visible and the graphic should support the current idea.
Takeover rules: typically 4–12 seconds, primarily dark text, with accent colors reserved exclusively for real statistics or a single keyword. Lower-third rules: stay confined to the lower third or bottom half of the screen, featuring one headline plus an optional short subtitle or 2–4 bullet items.

Pacing is safeguarded with quantifiable coverage thresholds: no graphic gap longer than 20–30 seconds in the intro, no gap longer than 30–45 seconds in the body, with 30s enforced as a strict scanning threshold and 45s as the upper limit for the body.

.claude/skills/hyperframes-video-beats/SKILL.md
- Early video: avoid more than 20-30 seconds without a visual beat. … - Main body: avoid more than 30-45 seconds without a beat.
Gap scanning must report actual visible intervals: report true gaps from the visibility schedule, not just the DOM order (defer to the SHOW array when present).

Timing is anchored to specific spoken words: identify the topic trigger word, enter 0.2–0.6 seconds early, and hold until the topic concludes or a natural handoff occurs; clear the screen 0.1–0.5 seconds before an immediately following beat.

.claude/skills/hyperframes-video-beats/SKILL.md
2. Start the beat 0.2-0.6 seconds before that anchor when possible. … 4. If the next beat begins immediately, clear 0.1-0.5 seconds before it unless the handoff is intentional.
Identifies a recurring failure mode: a card matching the topic correctly but lasting only 5–8 seconds while the speaker continues for 20–40 seconds—the correct approach is to keep a single card alive throughout the entire topic, progressing it via subtitles or bullet items.

Encodes HyperFrames hard constraints into an implementation checklist: every mounted timed element must have data-start, data-duration, and data-track-index; subcompositions must register paused GSAP timelines to window.__timelines and pin slots using tl.set({}, {}, SLOT); non-deterministic logic is strictly prohibited.

.claude/skills/hyperframes-video-beats/SKILL.md
- Every mounted timed element needs `data-start`, `data-duration`, and `data-track-index`. … - Sub-compositions should register a paused GSAP timeline on `window.__timelines`. … - Pin each sub-composition timeline with `tl.set({}, {}, SLOT);`.
The five-step beat revision workflow (create file → mount at root → update visibility schedule → align SLOT with duration → verify same-track overlaps) and final `npx hyperframes lint` validation are fully detailed in SKILL.md.

Wraps up with self-inspection and reporting: execute linting, eliminate errors, itemize known non-blocking warnings, and render full or smoke outputs if render-ready assets are requested, providing exact file paths and timestamps.

.claude/skills/hyperframes-video-beats/SKILL.md
1. Run the HyperFrames linter. 2. Fix all errors. 3. Mention warnings separately if they are known and non-blocking. … 5. Give the user exact file paths and timestamps changed.
Also includes a set of pragmatic defaults (takeover overview: 8–10s, takeover stats: 5–8s, glass explanation: 12–30s, long-topic glass card: 25–45s, lower-third width: 68–72vw / capped at 1240–1280px) to fall back on when context is absent.

2Core Capabilities

01Builds a coverage map before taking action, explicitly adhering to "never add visuals just to fill space"
02Beat type decision tree: crumpled-paper full-screen vs. glass lower third vs. no graphic, each paired with use-case criteria
03Duration discipline: 4–12 seconds for full-screen takeovers with restraint; one headline plus an optional short subtitle or 2–4 bullets for lower thirds
04Transcript-anchored timing (enter 0.2–0.6s early, clear 0.1–0.5s before next beat), flagging the "matched topic but expired too early" failure mode
05Actionable gap scanning thresholds: strict 30s scan, 45s body ceiling, reporting real gaps from visible intervals (SHOW array)
06Copywriting guidelines: readable within 1 second, short noun phrases, direct labels, one mental model per card, supported by recommended syntax patterns
07Visual specifications and style reuse: predominantly dark text, accent blue reserved for key stats/keywords, reuse existing glass card classes, lower-third width set to 68–72vw
08HyperFrames implementation checklist (data-* attributes, window.__timelines, SLOT anchors, no same-track overlap, lint execution)
09Pre-delivery self-check and reporting: run lint, clear all errors, list non-blocking warnings, and return modified file paths with timestamps
10Treats user taste as a hard constraint: shortened beats are not restored purely by general coverage rules, and previously approved styles remain intact

3External Dependencies

KindDependency / Endpoint
cliHyperFrames CLI（对编辑后的 HTML 跑 lint；用户要 render-ready 时渲染或冒烟渲染，用法由 ../hyperframes-cli 提供）
cli本地搜索/脚本工具（rg、Select-String、小型 Node/PowerShell 转录脚本）
packageNode.js（跑 lint/转录小脚本的环境前提）

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/: Execute local scripts or commands: This skill contains 0 scripts: the directory holds only SKILL.md and agents/openai.yaml (verified via find -type f).
  • 网络端点: Declared external network access: Adjacent surface (not scored): `npx` fetches the official hyperframes package from the npm registry if dependencies are missing; conforms to established repository precedent as standard official CLI usage.
  • 本地工作目录: File read/write and artifact output: Creates compositions/beats/NNN-short-name.html (beat subcompositions) within the target project.
Audit Notes: Classification target = the skill directory itself (only 2 files: SKILL.md + agents/openai.yaml). It is a pure instruction-based workflow: reads project files and transcripts, provides beat design and timing rules, and instructs the agent to write HTML and execute external linting; contains 0 scripts, 0 credential access, 0 external network dispatches, and 0 destructive operations. It does not qualify for the Green tier because the workflow actively modifies project composition/index.html files and visibility schedules (local disk writes), relying on the official hyperframes CLI and local search/script utilities for validation—fitting the Blue tier profile of 'local tools/CLI and local read/write only'. It possesses no Red tier characteristics (no sandbox bypass, no TLS downgrade, no anti-automation evasion, no arbitrary code execution surfaces).

5Second-Pass Verification

  • [ok] 目录文件清单 — find 返回 SKILL.md（8.4KB）与 agents/openai.yaml（250B）；无 scripts/、无 references/、无二进制资产。
  • [ok] 网络/凭证面反例搜索 — 全目录 0 处 http(s) URL、0 处 fetch、0 处 env/API_KEY/TOKEN/SECRET；唯一外部命令是 `npx hyperframes lint` 与本地 rg/Select-String。
  • [ok] 数字口径跨章节一致性 — Pacing Heuristics 的 20-30s / 30-45s 与 Coverage Scan 的『30s 严格、45s 上限』自洽；Timing Method 的 0.2-0.6s 进场与 Practical Defaults 的『Beat start lead-in: 0.2-0.6 seconds』一致；整屏 4-12s 上限与 Practical Defaults 的 5-8s/8-10s 分档相容。
  • [ok] 实现规则是否可被 lint 校验 — 时序元素属性（data-start/data-duration/data-track-index）、子组合时间线注册（window.__timelines）、SLOT 锚（tl.set({}, {}, SLOT);）、同轨不重叠 —— 均为同仓 HyperFrames 系列 skill 反复出现的 lint 口径，文档并明确 Run `npx hyperframes lint`。
  • [ok] 是否夸大了自动化 — 文档要求人工/agent 判断（不为填空加图、按话题而非时间戳定位、保留用户口味），并给定扫描阈值与人工复核点，无『全自动生成』表述。
  • [ok] 宿主元数据内容 — agents/openai.yaml 仅含 interface.display_name / short_description / default_prompt 三项展示字段，无权限、无命令、无环境变量。

6Verdict & Scenarios

  • Frames graphic inclusion criteria around four distinct questions and firmly rejects filler visuals—eliminating the most common pitfall in motion graphics workflows.
  • Clear division between beat types (paper takeover for arguments/data, glass lower third for explanations), both governed by the hard constraint of never covering the face in long-form talking-head videos.
  • Transcript-anchored timing paired with quantifiable coverage thresholds (strict 30s / 45s ceiling) balances sound principles with reliable safety nets, making agent execution and self-auditing seamless.
  • Implementation rules strictly align with HyperFrames linting standards, ensuring design choices are verifiable by tooling rather than remaining abstract aesthetic notions.
  • Respects user preference: trimmed beats are never revived under generic rules, and approved glass card designs are not unnecessarily reinvented.
    • Best for: Best suited for: Existing HyperFrames projects with long-form or podcast talking-head footage (YouTube retention-focused) needing systematic motion-graphic beat additions; also ideal as a review checklist to audit coverage gaps and duration imbalances in an existing beat schedule.
    Not for: Not suited for: Building projects from scratch (use make-a-video / hyperframes instead), short-form 9:16 fast cuts (use the short-form series), or scenarios expecting fully automated graphic asset generation—it delivers design decisions and compliant implementation rules, not an asset generator.
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload hyperframes-video-beats.tar.gz
    sha256: f17e6d21395b29b4…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 0d30152a82.