hyperframes-animation (HeyGen HyperFrames)
规定 HyperFrames 合成的时间与动画规则:data-* 属性、clip、轨道和子合成。
hyperframes-animation:对照组 3.76、一句话提示 4.52、装 skill 4.92(0–5 分,Codex 实测,n=2/任务/组)。结论:推荐,相对不装 skill +1.16。
Codex CLI · gpt-6-astra
26.1 / 30
相对不装 skill 的提升:+1.16 · 推荐 · 18 次运行
推荐:总分 26.1/30 不低于 22,产出质量 4.9 不低于 3.5,提升 +1.16 不低于 +1.0。
前沿
通过使用 Codex 测试。
覆盖 Codex, Claude Code
Codex CLI 0.166(SOTA 档):18 次评分运行。按我们的分档规则,这档通过同时覆盖 Claude Code;它不代表第二档的结果。
分数
每一维 0 到 5 分,六维相加是满分 30 的总分。每一维都是 5 更好。成本 5 表示又便宜又快。安装 5 表示容易。
- 触发可靠性
- 5.0
- 相对不装的提升
- 3.2
- 产出质量
- 4.9
- 令牌与时间成本
- 5.0
- 安装与可移植性
- 4.0
- 安全
- 4.0
安全审查
注意静态扫描:17 CRITICAL / 17 HIGH / 148 MEDIUM。人工审查:可运行但有需要注意的地方,见 Pro 区的安全报告。扫描没有命中不等于绝对安全。
安装
npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation
固定提交: 207c8a4daf6480d697f203784f1fd422727569e3
测试日期: 2026-11-02
我们测了什么
- Kinetic headline — Create a 6-second 1920x1080 HyperFrames (an open-source framework that renders an HTML page to MP4 by seeking a GSAP timeline frame by frame; GSAP comes from a CDN script tag) composition: a three-word headline ('Build. Ship. Repeat.') where each word slams in…
- Scene transition — Create a 8-second 1920x1080 HyperFrames (an open-source framework that renders an HTML page to MP4 by seeking a GSAP timeline frame by frame; GSAP comes from a CDN script tag) composition with two full-screen scenes ('Problem' for 4.5s, 'Solution' for 4.5s) th…
- Count-up stat with bar — Create a 7-second 1920x1080 HyperFrames (an open-source framework that renders an HTML page to MP4 by seeking a GSAP timeline frame by frame; GSAP comes from a CDN script tag) composition: a big number that counts up from 0 to 87% over 2.5 seconds with a horiz…
优点
- 平均分从不装时的 3.76 提到 4.92(+1.16)。
- 不点名也会被触发:Skill file read in 6/6 treatment runs.
- 不增加 token 开销:约为不装 skill 时的 1.05 倍。
- 比把它的规则压成一句话的做法高 +0.39。
- 装 skill 后绝对质量高:4.92 / 5。
缺点
- 测试说明:测试对象是 heygen-com/hyperframes 的 207c8a4 旧版提交。该 skill 后来已从仓库 HEAD 移除,安装命令可能无法对当前仓库生效。运行中它还会读取 hyperframes-core。
- 每个任务每组 n=2,差距在 1 分以内属于噪声。
评测
在 Codex CLI(SOTA 档)上跑 3 个任务、对照、一句话提示、装 skill 三组,共 18 次运行,由规则脚本打分(没有 LLM 评委),断网沙箱、每次运行独立临时目录。具体做法见下方英文评测原文。
三组对比
| 组别 | 平均分(0–5) | 每次 token |
|---|---|---|
| 不装 skill | 3.76 | 131k |
| 一句话提示 | 4.52 | 87k |
| 装了 skill | 4.92 | 137k |
Codex CLI 实测,18 次运行,规则脚本打分,没有 LLM 评委。总分 26.1 / 30,结论 推荐。
测试披露: 测试对象是 heygen-com/hyperframes 的 207c8a4 旧版提交。该 skill 后来已从仓库 HEAD 移除,安装命令可能无法对当前仓库生效。运行中它还会读取 hyperframes-core。
下面是评测原文,英文。
Verdict: Recommended (26.1 / 30). Source: heygen-com/hyperframes, skills/hyperframes-animation, skills/hyperframes-core, pinned at commit 207c8a4. Install: npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation. Licence: Apache-2.0 (repo LICENSE).
What it is
The hyperframes-animation skill from heygen-com/hyperframes, tested at commit 207c8a4 (the skill is no longer at the repo HEAD, so this describes a retired version): animation guidance for HyperFrames compositions: one paused GSAP timeline registered at window.__timelines[root id], GSAP transform aliases instead of layout properties, named eases, stagger for sequences, no Math.random/Date.now/timers/rAF/getBoundingClientRect at tween time, count-up counters tweened on a proxy object, and scenes with data-start/data-duration whose total is covered by the root duration.
How we tested
Codex CLI 0.166 (gpt-6-astra, low reasoning) on a dedicated Windows test PC, a fresh temporary project and temporary HOME/TMPDIR/caches per run, skill installed (treatment) or absent (control) or absent with the skill's core requirement squeezed into one sentence appended to the prompt (one-liner group), 2 runs per group per task, network off, /tmp writes blocked. The prompts never mention the skill (except the wording noted below).
HyperFrames is described in one sentence in each prompt (HTML page rendered to MP4 by seeking a GSAP timeline). Tasks: a 6-second kinetic headline where three words slam in, an 8-second two-scene transition, and a 7-second count-up number with a bar. The one-liner states the animation rules in one paragraph.
- Kinetic headline — Create a 6-second 1920x1080 HyperFrames (an open-source framework that renders an HTML page to MP4 by seeking a GSAP timeline frame by frame; GSAP comes from a CDN script tag) composition: a three-word headline ('Build. Ship. Repeat.') where each word slams in…
- Scene transition — Create a 8-second 1920x1080 HyperFrames (an open-source framework that renders an HTML page to MP4 by seeking a GSAP timeline frame by frame; GSAP comes from a CDN script tag) composition with two full-screen scenes ('Problem' for 4.5s, 'Solution' for 4.5s) th…
- Count-up stat with bar — Create a 7-second 1920x1080 HyperFrames (an open-source framework that renders an HTML page to MP4 by seeking a GSAP timeline frame by frame; GSAP comes from a CDN script tag) composition: a big number that counts up from 0 to 87% over 2.5 seconds with a horiz…
Scoring is programmatic (hidden tests / planted-issue recall / constraint checks / render+OCR where relevant), 0–5 per run. No LLM judge decided any score.
Results
The one-liner given to the third group: "In a HyperFrames composition use one paused GSAP timeline registered at window.__timelines[root id]; move things with GSAP transform aliases (x, y, scale, rotation, opacity) never width/height/top/left; pick named eases and use stagger for sequences; no Math.random/Date.now/timers/rAF/getBoundingClientRect at tween time, no repeat:-1; drive counters with a tween on a proxy object's onUpdate; scenes are timed elements with data-start/data-duration and the root data-duration must cover them."
| Task | Control score | One-liner | With skill | Control tokens | One-liner tokens | With-skill tokens | Skill read |
|---|---|---|---|---|---|---|---|
| t1-kinetic | 3.5 | 4.25 | 4.75 | 113k | 77k | 144k | 2/2 |
| t2-transition | 3.57 | 5.0 | 5.0 | 152k | 111k | 159k | 2/2 |
| t3-countup | 4.21 | 4.32 | 5.0 | 126k | 73k | 107k | 2/2 |
Mean score: 3.76 without vs 4.92 with the skill (delta +1.16). Tokens per run: 131k vs 137k (1.05x); time 72s vs 70s. One-liner group: 4.52 (the skill's gain over the one-liner: +0.39; one-liner's own gain over no skill: +0.77); one-liner tokens 87k per run, so the skill costs 1.57x the one-liner.
What happened
- Control 3.76, skill 4.92, one-liner 4.52 (n=6 each). The most frequent control failures are structural: the root element lacked a complete id/width/height/duration set in 6/6 runs, and the timeline was not registered at window.__timelines in 5/6, so the HyperFrames renderer cannot find it.
- The skill passed those checks in 6/6. The one-liner registered the timeline in 2 of 6 runs only (it failed in the kinetic and count-up tasks), though it gave the root duration and attributes right.
- Kinetic headline task: both the skill and control missed per-word stagger in 2/2 runs by the stagger check (they used separate tweens per word); the one-liner used stagger in 2/2. This check is narrow, so the difference is partly about code style.
- Tokens: skill 137k, one-liner 87k, control 131k per run. The skill makes runs more reliable at the control's token cost, not cheaper, and the one-liner is 36% cheaper than either.
- The skill is large (about 133 files installed in the working folder, with rules, blueprints and techniques). Treatment runs read both hyperframes-animation and hyperframes-core, so the skill points to the core skill and part of this gain is the core contract.
Dimension scores
| Dimension | Score | Why |
|---|---|---|
| 1_output_quality | 4.92 | Mean score 4.92/5 with the skill (programmatic checks, see per-task table). |
| 2_lift_vs_no_skill | 3.16 | +1.16 points vs 3.76 without the skill (n=2 per task; under ~1 point is noise). |
| 3_trigger | 5.0 | Skill file read in 6/6 treatment runs. |
| 4_instructions_portability | 4 | SKILL.md plus many reference files; HyperFrames-specific. |
| 5_efficiency | 5 | 1.05x tokens (137k vs 131k per run) and 0.96x time (70s vs 72s). |
| 6_safety_hygiene | 4 | Prose and rules only; see security.md. |
Limits of this test
- Static checks on the HTML/GSAP text; no frames were rendered (the hyperframes CLI, Chrome and FFmpeg were not run), so visual timing and quality are not measured.
- Tested at commit 207c8a4 because HEAD no longer contains the skill; the install command may not work against the current repository.
- The stagger check accepts only the GSAP
staggeroption, not equivalent per-word offsets. - n=2 per cell.
- n = 2 per group per task: differences under about 1 point are noise.
- Rule-based scoring measures what the checks can see; it cannot judge taste or whether a result is the best possible.
Security
See security.md. Scan: 17 CRITICAL / 17 HIGH / 148 MEDIUM. Verdict: safe to run (no-network sandbox). A clean scan does not prove a skill safe.
Bottom line
With the skill the compositions meet the HyperFrames contract almost every time; without it the root and timeline registration are usually wrong. A paragraph stating the rules recovers most of that for fewer tokens. Because the skill is no longer in the vendor repo, treat the result as a record of that earlier version.
记录
Run log for hyperframes-animation: Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run. Columns: task, arm-run, score (0-5), tokens, seconds, checks passed, skill files the agent opened. t1-kinetic control-1: score 3.5, tokens 128548, secs 60.2, checks 7/10, opened nothing t1-kinetic control-2: score 3.5, tokens 99223, secs 66.5, checks 7/10, opened nothing t1-kinetic oneliner-1: score 4.25, tokens 79255, secs 64.5, checks 9/10, opened nothing t1-kinetic oneliner-2: score 4.25, tokens 75639, secs 62.9, checks 9/10, opened nothing t1-kinetic treatment-1: score 4.75, tokens 106794, secs 54.6, checks 9/10, opened hyperframes-animation,hyperframes-core t1-kinetic treatment-2: score 4.75, tokens 181725, secs 64.4, checks 9/10, opened hyperframes-animation,hyperframes-core t2-transition control-1: score 3.57, tokens 139995, secs 89.6, checks 8/11, opened nothing t2-transition control-2: score 3.57, tokens 164538, secs 97.6, checks 8/11, opened nothing t2-transition oneliner-1: score 5.0, tokens 98384, secs 101.1, checks 11/11, opened nothing
18 次运行、21 个产物
样例产物
前沿 · 装了 skill:index.html(t1-kinetic,第 1 次,Codex)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Build. Ship. Repeat.</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #080b10; color: #f5f7f5; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; } .clip { position: absolute; inset: 0; } .background { background: #080b10; } .glow { position: absolute; left: 310px; top: 140px; width: 1300px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse, #167b60 0%, #0d463e 32%, transparent 70%); opacity: .24; } .grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(ellipse, black, transparent 72%); } .content { display: flex; align-items: center; justify-content: center; flex-direction: column; } .headline { display: flex; align-items: baseline; justify-content: center; gap: 34px; margin: 0; width: 1720px; font-size: 160px; font-weight: 850; letter-spacing: -9px; line-height: 1.15; } .word { display: block; flex: 0 0 auto; transform-origin: 50% 65%; opacity: 0; } #repeat { color: #b7f676; } .subtitle { margin: 38px 0 0; font-size: 34px; font-weight: 400; letter-spacing: 1px; color: #b9c5c2; opacity: 0; } .beats { position: absolute; bottom: 210px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; } .beat { display: block; width: 38px; height: 4px; background: #b7f676; opacity: .15; transform-origin: left center; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"> <div class="clip background" data-start="0" data-duration="6" data-track-index="0" aria-hidden="true"> <div class="glow" id="glow"></div> <div class="grid"></div> </div> <section class="clip content" data-start="0" data-duration="6" data-track-index="1"> <h1 class="headline" aria-label="Build. Ship. Repeat."><span class="word" id="build">Build.</span><span class="word" id="ship">Ship.</span><span class="word" id="repeat">Repeat.</span></h1> <p class="subtitle" id="subtitle">The loop that never stops</p> <div class="beats" aria-hidden="true"><i class="beat"></i><i class="beat"></i><i class="beat"></i></div> </section> </div> <script> // Every visual change belongs to this single, frame-seekable timeline. const tl = gsap.timeline({ paused: true }); const beats = [0.25, 0.95, 1.65]; tl.fromTo('#glow', { scale: 0.88, x: -65, opacity: 0.24 }, { scale: 1.12, x: 65, opacity: 0.40, duration: 6, ease: 'sine.inOut' }, 0); tl.fromTo('#build', { scale: 1.65, y: -55, opacity: 0 }, { scale: 1, y: 0, opacity: 1, duration: 0.32, ease: 'power4.out' }, beats[0]); tl.fromTo('#ship', { scale: 1.35, x: 95, opacity: 0 }, { scale: 1, x [... excerpt: first 3200 of 4167 characters]