技能 hyperframes-animation

📦

hyperframes-animation

Name: hyperframes-animation
Author: heygen-com

内容修订 r2 高风险 ⚙️ 外部命令🌐 网络访问📁 文件系统访问⚡ 包含脚本🔑 环境变量

构建确定性的 HyperFrames 动画

复杂的运动场景难以保持确定性并确保可安全跳转。此技能提供可复用的 HyperFrames 规则、蓝图、转场、适配器和编排审计。

支持: Claude Codex Code(CC)

⚠️ 38 差

安装前请停下并请求确认。

请审查安装计划，并在更改文件前获得用户明确同意。

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "hyperframes-animation" from https://skillstore.io/skills/heygen-com-hyperframes-animation.md and its manifest at https://skillstore.io/api/skills/heygen-com-hyperframes-animation/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/heygen-com-hyperframes-animation.md 已签名 manifest GET /api/skills/heygen-com-hyperframes-animation/manifest 已签名 lockfile GET /api/skills/heygen-com-hyperframes-animation/lockfile

测试它

正在使用“hyperframes-animation”。将六张功能卡片制作成产品概览动画。

预期结果:

使用 grid-card-assemble 蓝图。以错峰方式让卡片短暂滑入并淡入，保持完成后的网格，然后将焦点转移到主卡片。

正在使用“hyperframes-animation”。创建可跳转的 3D 设备入场动画。

预期结果:

为设备使用 Three.js，并使用单个暂停的 HyperFrames 时间线。通过确定性的跳转值驱动相机、对象变换和混合器时间。

正在使用“hyperframes-animation”。审查包含较长空白区间的动画映射。

预期结果:

该映射显示存在编排空白区。延长前一段的收束过程、提前下一次入场，或添加有明确意图的焦点转场。

安全审计

高风险

v5 • 2026/7/19 打开版本化报告

Most static matches are false positives caused by animation documentation, JavaScript template literals, example URLs, and test utilities. The audit confirmed a dependency-provenance risk: environment-controlled module search paths feed a dynamic import, and the fallback bootstrap can install @latest. No prompt injection, secret collection, covert exfiltration, or screen-capture upload behavior was found. Static review was capped at 400/648 representative findings; omitted static matches are unconfirmed, so automatic publishing stays disabled until manual review.

102

已扫描文件

25,346

分析行数

复核项

已忽略误报

已确认安全问题 (3)

高

scripts/package-loader.mjs:221

Environment file access

return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);

This environment variable controls directories searched for module resolution. Its value can influence which JavaScript module is dynamically imported.

高

scripts/package-loader.mjs:226

Environment file access

for (const entry of (process.env.PATH ?? "").split(delimiter)) {

PATH-derived node_modules directories participate in module resolution before dynamic import. A manipulated environment can redirect execution to an attacker-controlled local package.

高

scripts/package-loader.mjs:148-159

Unpinned fallback dependency bootstrap

When the bundled package version cannot be discovered, the loader falls back to @latest before a temporary npm install. This weakens the stated pinned-spec protection and permits an unexpected package version to execute after installation.

The code explicitly returns an @latest package spec in this fallback path, while the file comments describe pinned specifications as a security control.

能力复核项 (5)

这些是真实的本地能力，对此技能可能是预期行为，因此需要复核，但不会按已确认恶意行为计分。

中

scripts/package-loader.mjs:54

Dynamic import() expression

modules[packageName] = await import(pathToFileURL(entry).href);

The loader dynamically imports a module entry resolved from configured directories. A malicious package placed in a trusted-by-process module location would execute in the local Node process.

低

scripts/package-loader.mjs:221

Environment variable access (bracket notation)

return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);

This environment variable controls directories searched for module resolution. Its value can influence which JavaScript module is dynamically imported.

低

scripts/package-loader.mjs:226

Environment variable access (dot notation)

for (const entry of (process.env.PATH ?? "").split(delimiter)) {

PATH-derived node_modules directories participate in module resolution before dynamic import. A manipulated environment can redirect execution to an attacker-controlled local package.

低

scripts/package-loader.mjs:221

Environment variable object

return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);

This environment variable controls directories searched for module resolution. Its value can influence which JavaScript module is dynamically imported.

低

scripts/package-loader.mjs:226

Environment variable object

for (const entry of (process.env.PATH ?? "").split(delimiter)) {

PATH-derived node_modules directories participate in module resolution before dynamic import. A manipulated environment can redirect execution to an attacker-controlled local package.

风险因素

⚙️ 外部命令 (50)

adapters/animate-text.md:57-58 adapters/animate-text.md:58-59 adapters/animate-text.md:59-60 adapters/html-in-canvas-patterns.md:104-127 adapters/html-in-canvas-patterns.md:168-171 adapters/html-in-canvas-patterns.md:192-217 adapters/html-in-canvas-patterns.md:301-307 adapters/html-in-canvas-patterns.md:308-315 examples/brand-reveal-assemble-zoom.html:252 examples/concept-demo-decode-pan.html:18 examples/concept-demo-decode-pan.html:321 examples/cta-orbit-collapse.html:302 examples/cta-orbit-collapse.html:363 examples/cta-orbit-collapse.html:430 examples/cta-orbit-collapse.html:941 examples/cta-orbit-collapse.html:942 examples/cta-orbit-collapse.html:974 examples/cta-orbit-collapse.html:999 examples/cta-orbit-collapse.html:1017 examples/cta-orbit-collapse.html:1061 examples/cta-orbit-collapse.html:1062 examples/cta-orbit-collapse.html:1238 examples/demo-page-scroll-spotlight.html:645 examples/demo-page-scroll-spotlight.html:646 examples/hook-counter-burst.html:465 examples/hook-counter-burst.html:502 examples/messaging-multi-phrase.html:32 examples/messaging-multi-phrase.html:38 examples/messaging-multi-phrase.html:39 examples/messaging-multi-phrase.html:96 examples/problem-mockup-overwhelm.html:28 examples/problem-mockup-overwhelm.html:30 examples/problem-mockup-overwhelm.html:37 examples/problem-mockup-overwhelm.html:38 examples/proof-logo-chain.html:581 examples/takeover-ticker-displace.html:264 examples/takeover-ticker-displace.html:274 examples/workflow-approve-press.html:583 examples/workflow-approve-press.html:586 rules/3d-text-depth-layers.md:86-93 rules/3d-text-depth-layers.md:93-94 rules/3d-text-depth-layers.md:94-136 rules/3d-text-depth-layers.md:136-145 rules/3d-text-depth-layers.md:177-183 rules/3d-text-depth-layers.md:190-191 rules/ai-tracking-box.md:156-184 rules/ai-tracking-box.md:184-185 rules/ai-tracking-box.md:185-192 rules/ai-tracking-box.md:192-193 rules/ai-tracking-box.md:193-194

🌐 网络访问 (50)

adapters/animejs.md:23 adapters/animejs.md:74 adapters/gsap.md:15 adapters/html-in-canvas-patterns.md:133 adapters/html-in-canvas-patterns.md:134 adapters/html-in-canvas-patterns.md:135 adapters/html-in-canvas-patterns.md:136 adapters/html-in-canvas-patterns.md:137 adapters/lottie.md:24 adapters/lottie.md:50 adapters/three.md:26 adapters/three.md:75 adapters/three.md:76 examples/brand-reveal-assemble-zoom.html:28 examples/comparison-split-cards.html:28 examples/concept-demo-decode-pan.html:23 examples/cta-morph-press.html:30 examples/cta-orbit-collapse.html:62 examples/demo-page-scroll-spotlight.html:28 examples/hook-counter-burst.html:34 examples/messaging-multi-phrase.html:43 examples/metric-video-text-pivot.html:34 examples/problem-mockup-overwhelm.html:48 examples/proof-logo-chain.html:29 examples/takeover-ticker-displace.html:25 examples/workflow-approve-press.html:34 rules/3d-page-scroll.md:108 rules/3d-text-depth-layers.md:78 rules/ai-tracking-box.md:137 rules/ambient-glow-bloom.md:118 rules/asr-keyword-glow.md:90 rules/avatar-cloud-network.md:148 rules/camera-cursor-tracking.md:108 rules/card-morph-anchor.md:107 rules/center-outward-expansion.md:87 rules/context-sensitive-cursor.md:85 rules/coordinate-target-zoom.md:180 rules/counting-dynamic-scale.md:108 rules/cursor-click-ripple.md:99 rules/depth-of-field-blur.md:97 rules/depth-scatter-assemble.md:98 rules/discrete-text-sequence.md:84 rules/dynamic-content-sequencing.md:113 rules/gsap-effects.md:217 rules/gsap-effects.md:19 rules/gsap-effects.md:20 rules/hacker-flip-3d.md:86 rules/kinetic-beat-slam.md:88 rules/motion-blur-streak.md:130 rules/motion-blur-streak.md:159

📁 文件系统访问 (50)

adapters/gsap-transforms-and-perf.md:120 adapters/gsap.md:65 adapters/gsap.md:83 examples/demo-page-scroll-spotlight.html:580 examples/demo-page-scroll-spotlight.html:582 examples/demo-page-scroll-spotlight.html:584 examples/hook-counter-burst.html:357 examples/hook-counter-burst.html:366 examples/problem-mockup-overwhelm.html:959 examples/problem-mockup-overwhelm.html:975 examples/proof-logo-chain.html:465 rules/avatar-cloud-network.md:259 rules/avatar-cloud-network.md:263 rules/avatar-cloud-network.md:266 rules/cursor-click-ripple.md:169 rules/cursor-click-ripple.md:176 rules/cursor-click-ripple.md:181 rules/cursor-click-ripple.md:187 rules/cursor-click-ripple.md:193 rules/cursor-click-ripple.md:198 rules/cursor-click-ripple.md:204 rules/cursor-click-ripple.md:210 rules/cursor-click-ripple.md:215 rules/cursor-click-ripple.md:222 rules/cursor-click-ripple.md:226 rules/cursor-click-ripple.md:231 rules/dynamic-content-sequencing.md:249 rules/dynamic-content-sequencing.md:255 rules/dynamic-content-sequencing.md:261 rules/dynamic-content-sequencing.md:267 rules/dynamic-content-sequencing.md:273 rules/dynamic-content-sequencing.md:279 rules/dynamic-content-sequencing.md:285 rules/gsap-effects.md:218 rules/hacker-flip-3d.md:167 rules/hacker-flip-3d.md:171 rules/hacker-flip-3d.md:175 rules/hacker-flip-3d.md:179 rules/hacker-flip-3d.md:183 rules/kinetic-beat-slam.md:155 rules/kinetic-beat-slam.md:169 rules/kinetic-beat-slam.md:181 rules/motion-blur-streak.md:300 rules/motion-blur-streak.md:325 rules/orbit-3d-entry.md:181 rules/orbit-3d-entry.md:187 rules/orbit-3d-entry.md:193 rules/orbit-3d-entry.md:199 rules/orbit-3d-entry.md:205 rules/orbit-3d-entry.md:211

⚡ 包含脚本 (4)

rules/hacker-flip-3d.md:95 scripts/package-loader.mjs:54 scripts/package-loader.test.mjs:17 scripts/package-loader.test.mjs:30

🔑 环境变量 (28)

审计者: claude 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/heygen-com-hyperframes-animation/security.svg)](https://skillstore.io/skills/heygen-com-hyperframes-animation?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/heygen-com-hyperframes-animation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/heygen-com-hyperframes-animation/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/heygen-com-hyperframes-animation.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

heygen-com. (2026). hyperframes-animation security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5

BibTeX 引用

@techreport{heygen-com-heygen-com-hyperframes-animation-2026,
  author = {heygen-com},
  title = {hyperframes-animation security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "hyperframes-animation security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "heygen-com"
date-released: "2026-07-19"
url: "https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5"
identifiers:
  - type: other
    value: "skillstore:heygen-com-hyperframes-animation:audit:5"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

编排产品动效

将原子规则和场景蓝图组合成确定性的产品演示。

实现 Web 动画

选择受支持的运行时，并构建符合 HyperFrames 渲染约束的可跳转时间线。

审计编排

生成动画映射，以审查补间时序、空白区间、冲突和元素生命周期。

试试这些提示

选择动画规则

我需要在 [trigger] 发生时为 [element] 添加动画。请推荐两个合适的 HyperFrames 规则，并说明运动序列。

构建场景蓝图

为 [message] 创建一个时长为 [duration] 秒的 HyperFrames 场景。选择一个蓝图，将其划分为多个阶段，并列出所使用的规则。

适配运行时

使用 [GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, or TypeGPU] 实现此运动方案。保持结果具有确定性且可安全跳转。

审计完整组合

审查 [composition] 的动画映射。识别时序空档、冲突、较弱的错峰效果、生命周期问题，以及具体的编排改进建议。

最佳实践

在选择更大的蓝图之前，先组合两到四条原子规则。
使用单个暂停的时间线和预计算的布局值，以实现确定性跳转。
在本地固定依赖版本，并在实现后审查 animation-map 结果。

避免

不要在异步回调或基于时钟的事件中构建时间线。
不要在渲染期间使用未设种子的随机性、无限重复或用户事件状态。
不要混用多个运行时，除非每个运行时都有明确的场景职责。

常见问题

此技能的设计用途是什么？

它支持针对 HyperFrames 组合的确定性动效设计与实现。

必须使用 GSAP 吗？

不需要。GSAP 是默认选项，但该技能也涵盖 Lottie、Three.js、Anime.js、CSS、WAAPI 和 TypeGPU。

它能创建完整的场景方案吗？

可以。它提供多阶段蓝图，并帮助将其与原子规则和转场结合。

animation-map 脚本会生成什么？

它会编写一份动画映射，其中包含采样的补间、元素状态、时序密度、空白区间、错峰效果、冲突和摘要。

该技能可以在没有网络访问的情况下工作吗？

大部分指南可在本地使用，但许多示例使用 CDN 库。审计脚本也可能引导安装缺失的包。

它会替代 HyperFrames 核心指南吗？

不可以。它依赖 HyperFrames 核心组合契约，并增加动画专用模式。

开发者详情

作者

heygen-com

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-animation/

引用

77d0e66fbadeb1f5d1e6a5aada7861240b8ed2d7

维护新鲜度

2026/7/19

使用量

7 次下载 · 0 次浏览

文件结构

📁 adapters/

📄 animate-text.md

📄 animejs.md

📄 css-animations.md

📄 gsap-easing-and-stagger.md

📄 gsap-timeline-and-labels.md

📄 gsap-transforms-and-perf.md

📄 gsap.md

📄 html-in-canvas-patterns.md

📄 lottie.md

📄 three.md

📄 typegpu.md

📄 waapi.md

📁 blueprints/

📄 comparison-split.md

📄 constellation-hub.md

📄 cta-morph-press.md

📄 cursor-ui-demo.md

📄 dataviz-countup.md

📄 device-surface-showcase.md

📄 grid-card-assemble.md

📄 kinetic-type-beats.md

📄 logo-assemble-lockup.md

📄 overwhelm-surround.md

📄 spatial-pan-stations.md

📄 ticker-takeover.md

📄 titlecard-reveal.md

📄 typewriter-reveal.md

📄 video-text-pivot.md

📄 blueprints-index.md

📁 examples/

📄 brand-reveal-assemble-zoom.html

📄 comparison-split-cards.html

📄 concept-demo-decode-pan.html

📄 cta-morph-press.html

📄 cta-orbit-collapse.html

📄 demo-page-scroll-spotlight.html

📄 hook-counter-burst.html

📄 messaging-multi-phrase.html

📄 metric-video-text-pivot.html

📄 problem-mockup-overwhelm.html

📄 proof-logo-chain.html

📄 takeover-ticker-displace.html

📄 workflow-approve-press.html

📁 rules/

📄 3d-page-scroll.md

📄 3d-text-depth-layers.md

📄 ai-tracking-box.md

📄 ambient-glow-bloom.md

📄 asr-keyword-glow.md

📄 avatar-cloud-network.md

📄 camera-cursor-tracking.md

📄 card-morph-anchor.md

📄 center-outward-expansion.md

📄 context-sensitive-cursor.md

📄 coordinate-target-zoom.md

📄 counting-dynamic-scale.md

📄 css-marker-patterns.md

📄 cursor-click-ripple.md

📄 depth-of-field-blur.md

📄 depth-scatter-assemble.md

📄 discrete-text-sequence.md

📄 dynamic-content-sequencing.md

📄 gsap-effects.md

📄 hacker-flip-3d.md

📄 kinetic-beat-slam.md

📄 motion-blur-streak.md

📄 multi-phase-camera.md

📄 orbit-3d-entry.md

📄 physics-press-reaction.md

📄 press-release-spring.md

📄 reactive-displacement.md

📄 scale-swap-transition.md

📄 sine-wave-loop.md

📄 split-tilt-cards.md

📄 spring-pop-entrance.md

📄 stat-bars-and-fills.md

📄 svg-icon-enrichment.md

📄 svg-path-draw.md

📄 vertical-spring-ticker.md

📄 viewport-change.md

📄 rules-index.md

📁 scripts/

📄 animation-map-sampling.mjs

📄 animation-map-sampling.test.mjs

📄 animation-map.mjs

📄 animation-map.test.mjs

📄 package-loader.mjs

📄 package-loader.test.mjs

📄 SKILL.md

📄 techniques.md

📁 transitions/

📄 catalog.md

📄 css-3d.md

📄 css-blur.md

📄 css-cover.md

📄 css-destruction.md

📄 css-dissolve.md

📄 css-distortion.md

📄 css-grid.md

📄 css-light.md

📄 css-mechanical.md

📄 css-other.md

📄 css-push.md

📄 css-radial.md

📄 css-scale.md

📄 overview.md

📄 TRANSITION-REGISTRY.md