Home / All Skills / Content & Media Creation / hyperframes-keyframes
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · heygen-com/hyperframes

hyperframes-keyframes

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0（仓库根 LICENSE 为 Apache License Version 2.0；池内值亦为 Apache-2.0）Commit b8328f9573
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

Pure instruction-based skill: The directory contains only 3 files (SKILL.md + agents/openai.yaml + references/keyframe-patterns.md), with no executable scripts, binaries, or data assets; it relies on codifying "keyframes = pose contracts" into strict rules, letting the host agent author the synthesized HTML/GSAP.

skills/hyperframes-keyframes/agents/openai.yaml
interface: display_name: "HyperFrames Keyframes" short_description: "Author seek-safe video keyframes" default_prompt: "Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI."
What is happening here: openai.yaml is the interface manifest for Codex/OpenAI hosts (display_name/short_description/default_prompt), paired with the frontmatter of SKILL.md so the same skill is recognized by both Claude Code and Codex; it contains no execution logic. The presence of exactly 3 files across the directory is verified against the complete file inventory (no scripts/).

Defines keyframes as "pose contracts" rather than tween parameters: visible state, subject identity continuity, seek-safe runtime, and pixel verifiability form the four acceptance criteria.

skills/hyperframes-keyframes/SKILL.md
Keyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.
What is happening here: Establishes the judgment criteria of this skill in a single sentence. The subsequent five-step Procedure (identify subject / pick minimal mechanism / write seek-safe keyframes / CLI verification / fallback to minimal diagnosis on failure) and Error Handling table (endpoint-only, identity break, fake 3D, wrong final, unseekable runtime, unreadable text) are all expansions of this core concept.

Seek-safe is a hard constraint, not a suggestion: Only deterministic runtimes with "synchronous construction + registered timeline" are permitted, explicitly banning clocks, unseeded randomness, event triggers, and asynchronous timelines.

skills/hyperframes-keyframes/SKILL.md
Never use for render-critical motion: - `Date.now()` - `performance.now()` - unseeded `Math.random()` - hover/scroll triggers - timers - async-created timelines - unregistered `requestAnimationFrame` - infinite loops
What is happening here: Video renderers seek and play by frame number, making any animation reliant on real time, randomness, or interaction non-reproducible during rendering. The accompanying GSAP boilerplate requires `gsap.timeline({ paused: true })` and registration via `window.__timelines[compositionId] = tl` without calling `tl.play()`—delegating "playback" entirely to the renderer's playhead.

Capability boundaries are explicitly split into three domains with line-by-line ownership: visual motion belongs to this skill, clip sequencing (trim/splice/reorder/source range) belongs to hyperframes-core, and audio (fade/crossfade/ducking) belongs to hyperframes-audio; cross-domain requests are handled with a "Truthful mechanism" table.

skills/hyperframes-keyframes/SKILL.md
Keyframes own visual motion, not clip assembly. Source-range hard cuts, trim, splice, and reorder belong to `/hyperframes-core`: author one media element per kept range, place it with `data-start` and `data-duration`, and select its source offset with `data-media-start`.
What is happening here: Uses a "Creator request → Truthful mechanism" table to map common colloquial user requests (punch-in, Ken Burns, match cut, speed ramp, freeze) directly to mechanisms or explicit rejections (e.g., 'Source speed ramps | Not supported: there is no time-varying playback-rate envelope.', 'Arbitrary mid-source freeze is not supported'). This prevents the model from glossing over limitations with fake motions (such as faking 3D using scale).

The verification loop relies on the hyperframes CLI: lint → check → keyframes diagnostics → focused --shot → snapshot, organized by "what is being proven"; diagnostic failure triage follows a defined sequence.

skills/hyperframes-keyframes/SKILL.md
npx hyperframes lint npx hyperframes check npx hyperframes keyframes . npx hyperframes keyframes . --json npx hyperframes keyframes . --runtime all npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>
What is happening here: A table defines the evidentiary value of each tool (keyframes = targets/explicit holds/trajectories/CSS stops/Anime registration; --shot = ghost, path shapes, temporal distribution, DOM 3D projection; --layout strip = in-place motion and overlap; --ghost = canvas/WebGL; snapshot --at = masks, legibility, final frame lock). On failure, first run `--json` to find the true moving target, photograph it, take a full-frame snapshot, and ultimately "trust painted pixels over logs".

Reproduction constraints are provided per engine runtime, and documentation gaps such as "WAAPI not listed on the surface text" are explicitly marked as requiring self-proof.

skills/hyperframes-keyframes/SKILL.md
WAAPI: - finite `duration` - `fill: "both"` - deterministic construction - the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots
What is happening here: The four boilerplates (GSAP / CSS keyframes / Anime.js / WAAPI) each have hard constraints (GSAP: synchronous build + paused + registered; CSS: finite duration/iterations + deterministic delay + fill-mode both; Anime.js: autoplay:false + finite loops + pushed to window.__hfAnime). WAAPI, which is not listed in the CLI help text, explicitly requires additional self-proof rather than assuming baseline support.

2Core Capabilities

01Keyframe orchestration for camera zooms and framing (punch-in, punch-out, zoom, reframe)
02Camera translation moves (pan / Ken Burns / multi-segment zooms)—explicitly treating them as "handwritten geometry" rather than auto-tracking
03Mechanism selection table: FLIP/shared elements, motion paths, stroke drawing, shape morphing, masks/clip boundaries, stagger, text splitting, parent-child counter-transforms, state machines, and 3D depth
04Four runtime boilerplates with their respective reproducibility constraints (GSAP / CSS keyframes / Anime.js / WAAPI)
05CLI diagnostic interpretation: flat / keyframes / motionPath / trace / composed with and ghost spacing semantics
06Proof methodologies for 3D depth and Canvas/WebGL (rejecting fake 3D where scale mimics depth)

3External Dependencies

KindDependency / Endpoint
clihyperframes CLI（npx，本 skill 唯一的执行面）
clihyperframes lint / check（合规模拟门禁）
packageGSAP（被写进合成 HTML 的运行时，含 MotionPathPlugin / Flip / DrawSVGPlugin / MorphSVGPlugin）
packageAnime.js / WAAPI / CSS @keyframes / Three.js / WebGL（可选运行时家族）
network官方文档外链（仅阅读参考清单，无代码调用）
networksibling skill 引用（同仓本地路径，非网络）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text, without script execution or external impact
Audit Notes: All 3 files in the directory are markdown/yaml (SKILL.md, references/keyframe-patterns.md, agents/openai.yaml), with zero scripts, zero network calls, zero environment variable/credential reads, and zero file write instructions; full token scanning reveals 21 URL matches, all pointing to official documentation references. Capabilities are strictly composed of deterministic keyframe rules and CLI evidence loops, introducing no additional attack surface. The only caveats are that all verification depends on the host installing and running the `hyperframes` CLI (disk writes and rendering occur CLI-side), and taste constraints such as "do not copy example values verbatim" require human oversight.

5Second-Pass Verification

  • [ok] 是否含可执行脚本 / 隐藏代码 — 全量枚举 3 文件，无 .sh/.mjs/.cjs/.py/.js；隐藏文件 0 个；与 skills-manifest.json 的 files=3 交叉一致。
  • [ok] 网络外发与凭证读取 — `fetch(`、`http.request`、`XMLHttpRequest`、`urllib`、`process.env`、`child_process`、`API_KEY/TOKEN/SECRET/.env/Authorization` 全部 0 命中；21 处 URL 全为文档链接（gsap.com、animejs.com、developer.mozilla.org、threejs.org），无端点调用。
  • [ok] 实现原理是否成立（纯指令 vs 有无隐藏执行体） — SKILL.md 的每条硬规则都能在正文找到对应的验收动作（Procedure 5 步 + Done 段 6 项确认），且所有验证都外派给 hyperframes CLI；无隐藏执行体，结论『纯 prompt 编排』成立。
  • [discrepancy] 与同仓其它 skill 的组内一致性（自刷新提示） — hyperframes-keyframes 的 SKILL.md **没有** `npx hyperframes skills update hyperframes-keyframes` 前置刷新段；同仓 embedded-captions / faceless-explainer / general-video / motion-graphics / product-launch-video / remotion-to-hyperframes / talking-head-recut 七个 workflow skill 均在正文首段带该提示（'First, keep this skill fresh'）。这不是第一遍看错，而是一处真实的组内不一致：本 skill 只能随 hyperframes CLI 的版本一起更新，无独立自刷新入口。
  • [ok] 『外部资源』逐条回查调用点 — hyperframes CLI 的每类命令（keyframes/--shot/--layout strip/--ghost/snapshot --at）在 SKILL.md 的 CLI Proof 段与工具证明表中均有真实出现；GSAP 骨架与 Anime.js 骨架在 references/keyframe-patterns.md 中原文存在，非推测。

6Verdict & Scenarios

  • "Pose contract" formalizes animation acceptance into auditable criteria rather than subjective aesthetic adjectives
  • Systematic deterministic discipline: explicitly bans wall-clocks, randomness, event triggers, and async timelines, providing synchronous build-and-register patterns for all four engines
  • Courage to say "unsupported": clearly states Not supported for speed ramps, arbitrary mid-clip freezes, and auto-matching frames while offering alternative paths, reducing the likelihood of models hallucinating fake motions
  • Verification loop is delegated to the CLI with clear division of responsibilities, structured evidence-gathering triage on failure, and an explicit refusal of self-deceptive proofs
  • Zero side effects and cross-host ready: 3 text files, no scripts/network/credentials, complete with Claude Code frontmatter and Codex interface manifests
    • Best for: Ideal for video authoring workflows already using HyperFrames: when adding punch-ins, zooms, reframing, Ken Burns, or multi-segment camera moves to shots, or implementing visible mechanics such as SVG stroke draw, shape morphing, mask reveals, item staggers, or true 3D depth; also ideal for troubleshooting rendering determinism issues like static rendered animations, incorrect final frames, or fake 3D—its diagnostic tables and CLI proof paths serve as an off-the-shelf troubleshooting manual.
    Not for: Not suitable for: ① Requests requiring editing semantics (hard cuts, trims, splicing, reordering, speed changes)—those belong to hyperframes-core; this skill only provides visual keyframes on wrappers; ② Workflows expecting automatic facial tracking or semantic reframing (SKILL.md explicitly treats this as handwritten geometry); ③ Requests for speed ramps or arbitrary mid-clip freezes (explicitly Not supported; derived assets must be pre-rendered); ④ Environments lacking the hyperframes CLI—acceptance steps completely depend on it; ⑤ Visual style, brand design, media sourcing, or subtitling—the description explicitly excludes these from scope.
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload hyperframes-keyframes.tar.gz
    sha256: 78ffadd495cffe9c…
    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 b8328f9573.