Home / All Skills / Content & Media Creation / frost-sequence-camera-orbit
Content & Media Creation · heygen-com/hyperframes

frost-sequence-camera-orbit

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0(仓库根 LICENSE = Apache License Version 2.0;块内随带第三方许可文本:three.js MIT、GSAP 标准许可、Geist/Archivo/Cormorant Garamond OFL 等)Commit d2f0bc7f34
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

Output footage: A complete 22.5s "ice sequence"—logo → first text segment → second text segment → shatter → fade out; the camera orbits around a stationary subject, easing into slower frontal passes for readability; the same particle field drives every transition.

registry/blocks/frost-sequence-camera-orbit/SKILL.md
A complete 22.5-second ice sequence: logo, first text, second text, breakup, and fade. The camera orbits the fixed objects with slower front-facing passes for reading. The same particle field carries each transition.
What is happening here: It is not a single shot but an entire "ice-themed" short film sequence; only the two text moments and SVG logo can be modified directly, while camera and assembly timings require editing under source/.

Parameter surface of 216 variables, the highest in this batch (including material IOR/thickness/absorption/backlight, particle flight gravity and turbulence, text mesh details, etc.).

registry/blocks/frost-sequence-camera-orbit/SKILL.md
HyperFrames block, 1920×1080, 22.5s, 216 variables. … | `textMeshDetail` | number | `4` | Type · Text mesh detail (1-4; higher = smoother deformation) 1–4 step 1 |
What is happening here: Sliders exist for virtually every visual dimension, at the cost of an extremely long variable list that requires indexing to navigate.

The composition id differs from the directory name: the directory/entry name is frost-sequence-camera-orbit, whereas the composition id is frost-sequence-rig (the timeline is also registered under this id); do not guess the id from the directory name when mounting and rendering.

registry/blocks/frost-sequence-camera-orbit/SKILL.md
data-composition-id="frost-sequence-rig" … One paused GSAP timeline registered as `window.__timelines["frost-sequence-rig"]`.
What is happening here: The directory name is the registry entry name, while the composition id preserves the original project naming; this discrepancy is a legacy detail, visible in SKILL.md and data-composition-id in the HTML.

Renders via WebGPU/TSL instead of WebGL: assets/frost.js is an approximately 1.5 MB IIFE bundle (exposing window.Frost), built from src/frost.ts + WebGPU/TSL from three@0.185.1 and three-mesh-bvh.

registry/blocks/frost-sequence-camera-orbit/source/build.mjs
// Bundle src/frost.ts (+ three@0.185.1 WebGPU/TSL, three-mesh-bvh) into one … classic IIFE at assets/frost.js exposing `window.Frost`.
What is happening here: Unlike other blocks in this batch (three WebGL), this block's materials and particles use TSL nodes + WebGPU compute, imposing higher requirements on the rendering host.

Two pre-build self-checks: source-level TypeScript preflight, plus a "GPU-free WGSL shader compilation probe" used to catch shader flaws exposed only at compile time.

registry/blocks/frost-sequence-camera-orbit/source/README.md
`build.mjs` runs two checks before bundling: a source-only TypeScript pass (`tools/compile-preflight.mjs`) and a headless shader-compile probe (`tools/run-shard-compile.mjs`) that generates the WGSL for one shard without a GPU, to catch a class of shader bug that only shows up at compile time.
What is happening here: Validating 1.5 MB of GPU code by "running it once to see results" is too slow, so shader generation is brought into CPU-side pre-build checks.

WebGPU is a hard requirement: throws an error immediately if navigator.gpu or an adapter cannot be acquired.

registry/blocks/frost-sequence-camera-orbit/source/src/frost.ts
if (!nav.gpu) throw new Error("Frost: navigator.gpu is unavailable (WebGPU required)"); … const adapter = await nav.gpu.requestAdapter().catch(() => null);
What is happening here: Explicit failure is preferred over silent degradation—renders readable errors when the host does not support WebGPU.

The logo can only come from project assets: the URL allowlist rejects any scheme or protocol-relative host, allowing only relative/root-relative paths and inline SVG data URIs, throwing an error immediately on violation.

registry/blocks/frost-sequence-camera-orbit/source/src/shape/logo.ts
A relative or root-relative path, or an inline SVG data URI: never a scheme or protocol-relative host. … if (!isProjectAssetUrl(url)) throw new Error("The logo must be a project asset path, not " + url);
What is happening here: Narrows the user-configurable logoUrl input surface strictly to local assets, preventing external image fetching during composition rendering.

Two binary assets (fragment atlas and ice inclusion texture) must be fetched during installation—registry-item includes static.heygen.ai URLs, and SKILL.md explicitly states "fetched from the CDN at install".

registry/blocks/frost-sequence-camera-orbit/registry-item.json
"url": "https://static.heygen.ai/hyperframes-oss/registry-assets/122961c82d240e47.png" … "url": "https://static.heygen.ai/hyperframes-oss/registry-assets/4bea3a8ab90c9527.png"
What is happening here: These two images are too large/inconvenient to keep in the repository, so only URLs remain in the manifest, fetched by the official CLI during installation (thus requiring network access at install time).

2Core Capabilities

0122.5s multi-stage ice sequence (logo + two readable text segments + shatter + fade out, 1920×1080)
02Control surface with 216 variables (material optics, particle motion, text mesh, etc.)
03Swappable logo: logoUrl points to an SVG within the project (default assets/logo.svg), strictly constrained by a project asset path allowlist
04Editable source subset: complete TypeScript source + esbuild build script (outputs frost.js and motion.js)
05WebGPU/TSL ice material and GPU particle system (including curl noise turbulence) accelerated with BVH; bundles include explicit provenance banners
06Zero runtime external links: frost.js, local gsap, three Geist font variants, and noise textures are all distributed with the block
07Usable without Studio: render the composition directly and override the two text segments (using | for line breaks)
08Explicit registration of remote binaries at install: two registry-assets entries carry URLs, and SKILL.md notes "fetched from the CDN at install"

3External Dependencies

KindDependency / Endpoint
cliHyperFrames 官方 CLI(add / render;安装时按 registry-item 的 url 拉资产)
network装机期资产下载(官方 CDN,两个二进制 registry-assets)
packagethree@0.185.1(WebGPU/TSL)+ three-mesh-bvh@0.9.14,已打进 assets/frost.js(均 MIT)
package源码重建依赖(仅改 source/ 时需要):esbuild、opentype.js、three 0.185.1、three-mesh-bvh、typescript
package随块字体(Geist Regular/SemiBold/Bold,OFL)与噪声/冰内含物贴图

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: assets/frost.js (loaded and executed via <script src> in composition: WebGPU/TSL ice sequence runtime, exposes window.Frost)
  • 网络端点: Declare external network access: Install time (executed by host CLI npx hyperframes add): static.heygen.ai/hyperframes-oss/regist
  • 本地工作目录: File I/O and artifact output: Runtime (composition): no disk writes; canvas and WebGPU resources are allocated in memory and released upon dispose.
Audit Notes: Evaluation target = this block directory (SKILL.md + composition + bundle frost.js + fonts/textures + source/ editable source subset): No credential/env/cookie reads (zero hits on process.env scan), no data exfiltration, zero external links at runtime; logo input is restricted by an allowlist to project asset paths or inline SVGs. Executable build scripts do exist in the directory (source/build.mjs calls esbuild; run-shard-compile.mjs uses child_process spawnSync for temporary compilation), but run only when users actively rebuild the source subset, with actions confined to local bundling and temporary directories, falling under "local scripts / local I/O", hence rated blue. Network access is needed during installation to fetch two first-party CDN binary assets (static.heygen.ai, url field in registry-item.json), which have been listed under network_calls. Special note (does not change the rating): source/src/motion/editor.ts contains localStorage read/write calls (used by the tuning workbench to persist state), but its build artifact assets/motion.js is not in the block distribution manifest nor present on disk, posing no actual surface after installation.

5Second-Pass Verification

  • [ok] 变量数与声明一致性(frontmatter 自称 216 variables) — 脚本实测:SKILL.md 变量表 216 行、html data-composition-variables 解析出 216 项、frontmatter 写 216 —— 一致(本批最大变量表)。
  • [ok] composition id 与目录名不一致 — SKILL.md 挂载片段与 Runtime contract 都写 frost-sequence-rig,html data-composition-id 亦为 frost-sequence-rig;目录/条目名是 frost-sequence-camera-orbit。非缺陷,但挂载时不可按目录名猜 id。
  • [discrepancy] source/README 声称与分发内容的差异 — README 说 build.mjs 会产出 ../assets/frost.js 与 ../assets/motion.js,但 registry-item.json 的分发清单只含 frost.js,盘上 assets/ 也没有 motion.js —— 安装后那份「轻量 WebGL 编辑辅助」并不随块提供。
  • [ok] localStorage 出现位置 — 仅见于 source/src/motion/editor.ts(getItem/setItem 包在 try/catch 里);该模块的产物 motion.js 未随块分发(见上一条),因此不构成安装后的实际接触面。
  • [ok] 装机期 CDN 资产声称 — registry-item.json 中 shards-atlas.png 与 textures/ice-inclusions-generated.png 两项带 static.heygen.ai 的 url,盘上确实缺失,与 SKILL.md 的 fetched from the CDN at install 一致。
  • [ok] WebGPU 硬门槛与构建自检 — src/frost.ts 中 navigator.gpu 缺失即 throw(并附 requestAdapter 的 null 分支);source/README.md 描述的两道构建前自检对应 tools/compile-preflight.mjs 与 tools/run-shard-compile.mjs(后者 import node:child_process 的 spawnSync)。
  • [ok] 凭证扫描 — 对 SKILL.md / html / registry-item.json / source/ 扫描 process.env、secret、token、api_key、cookie、sudo、sandbox:无真实命中(仅 curl noise 之类注释文字误配)。

6Verdict & Scenarios

  • Production-ready 22.5s ice sequence generated with a single command
  • Most comprehensive parameters with a complete customization path
  • Well-constrained input surface
  • Deterministic contracts consistent with the rest of the batch
  • Best for: Teams needing a complete "ice/crystal-themed" branded short sequence (~20s scale: logo to two-part slogan to shatter and fade out), equipped with a WebGPU-capable rendering environment, and willing to customize deeply via the source subset.
    Not for: Pipelines where rendering hosts lack WebGPU support or require completely offline installations (two CDN assets must be pulled at install time); lightweight scenarios needing only an 8–12s single-shot title card (other blocks in this batch can be used instead).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload frost-sequence-camera-orbit.tar.gz
    sha256: d873fafcf97f3f6b…
    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 d2f0bc7f34.