Content & Media Creation · heygen-com/hyperframes
code-slice-hero
A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandDual-pass Audit
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 shot: A full surface of square tiles hosts a seamless front headline; an imaginary cursor sweeps across the surface, causing nearby tiles to elevate and tilt according to a Gaussian depth field, while only cells that intersect with the contours of both headlines flip over to reveal the rear headline.
registry/blocks/code-slice-hero/SKILL.md
A full square-tile surface carries one seamless headline. An imaginary cursor crosses the surface; nearby tiles respond to its Gaussian depth field with lift and tilt, and only the cells intersecting either headline silhouette turn over to reveal the rear headline.
What is happening here: The 'transition' is implemented as cell-by-cell tile-flipping visibility logic—which cells flip is determined by the headline contours, so changing the copy naturally alters the flipping pattern.
The rendering implementation consists of a 'single instanced WebGL 2 draw' + front/rear headline shared atlas + a batch-projected shadow pass; this is the opposite of a 'per-tile element' approach and is why the block can run stably at 30 fps.
registry/blocks/code-slice-hero/SKILL.md
The whole grid is one instanced WebGL 2 draw with a shared front/rear texture pair, plus a batched projected-shadow pass.
What is happening here: Hundreds of tiles are compressed into a single draw call; shadows do not use Three's shadow system either, but rather a custom bucket + GLSL pass (shadows.js).
Copy, font size, and tile side length are independent: tiles crop the atlas per cell, so larger text will never stretch the squares into rectangles.
registry/blocks/code-slice-hero/SKILL.md
Copy, text size and square cell size are independent, so tiles never stretch.
What is happening here: This is the key difference compared to the common approach of 'mapping text onto a grid', ensuring the blocks remain square under any font size.
All 18 variables are read with clamp: the schema is parsed first to obtain default values, then overridden with getVariables(), with numerical values clamped one by one to their declared ranges, falling back to defaults on invalid values.
registry/blocks/code-slice-hero/code-slice-hero.html
const values = { ...defaults, ...(window.__hyperframes?.getVariables?.() || {}) }; … const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
What is happening here: Variables can originate from Studio sliders or CLI --variables; this dual source necessitates making them 'predictable' rather than directly trusted.
Headline atlases are drawn on-the-fly at runtime using Canvas 2D (willReadFrequently context), with the front and rear headlines sharing a pair of atlases.
registry/blocks/code-slice-hero/code-slice-hero.html
function textSurface(text) { … const canvas = document.createElement("canvas"); … const ctx = canvas.getContext("2d", { willReadFrequently: true });
What is happening here: Avoids distributing large images with the block and delegates typesetting to browser font rendering, allowing atlases to be rebuilt in real time when copy/font size changes.
WebGL2 is a strict requirement: an error is thrown directly if a webgl2 context cannot be acquired, rather than silently degrading.
registry/blocks/code-slice-hero/surface.js
if (!gl) throw new Error("Code Slice Hero requires WebGL 2 for its full tile surface.");
What is happening here: If the render host only supports WebGL1, it fails immediately with a human-readable reason, making it much easier to troubleshoot than a blank frame.
Follows the deterministic contract family: a paused timeline is registered to window.__timelines["code-slice-hero"], resynchronized via hf-seek, where each frame is a closed-form function of t.
registry/blocks/code-slice-hero/SKILL.md
One paused GSAP timeline registered as `window.__timelines["code-slice-hero"]`. … Re-syncs on the `hf-seek` CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
What is happening here: A prerequisite for headless renderers to seek frame-by-frame, which must be satisfied by all blocks in the same batch.
2Core Capabilities
01Cell-by-cell tile flipping transition (1920×1080, 8s, 18 variables)
02Adjustable cursor Gaussian field: radius 160–480, decay 0.4–3.5, depth ±320, tilt 0–55
03Custom batch-projected shadows (intensity 0–0.65, softness 0.5–4), coexisting with tile surfaces inside WebGL2
04Single instanced draw + front/rear atlas: one instance buffer, one surface draw, one shadow draw per seek
05Local dependencies bundled with the block: GSAP 3.14.2 copy, Geist-Bold.ttf (OFL) and its license text, zero external links at runtime
06Cleanable: dispose removes hf-seek listeners and clears stage and internal arrays
07Renders outside Studio: directly render the composition and override front/rear copy
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | GSAP 3.14.2（随块本地副本，非 CDN） |
| package | Geist-Bold.ttf（OFL）与 GSAP-NOTICE.txt 随块分发；本目录无任何网络依赖 |
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 script or command: code-slice-hero.html (Browser/renderer execution: parse variables → generate front/rear text atlases → register paused GSAP timeline → listen to h
Audit Notes: . Evaluation target = this block directory (SKILL.md + composition HTML + two local rendering modules + local gsap copy + font): completely zero external links, zero credential/env access, zero shell scripts, zero local disk writes, zero outbound data transfer across the entire directory; the only 'execution surface' is WebGL2 in the browser and two bundled local JS modules (standard implementation for bundled local executables). Installation and rendering follow the official CLI ecosystem. Blue rating assigned accordingly.
5Second-Pass Verification
- [ok] 变量数与声明一致性（frontmatter 自称 18 variables） — 脚本实测：SKILL.md 变量表 18 行、html data-composition-variables 解析出 18 项、frontmatter 写 18 —— 一致。
- [ok] 「External runtime dependencies: none (served locally)」声称 — 对 html/shadows.js/surface.js 做 http(s):// 全文 grep：零命中；脚本标签只引用 assets/gsap-3.14.2.min.js 与同目录两个模块，字体为本地 Geist-Bold.ttf。
- [ok] WebGL2 硬门槛 — surface.js 中 `if (!gl) throw new Error("Code Slice Hero requires WebGL 2 for its full tile surface.");` 逐字命中，确为显式失败而非静默降级。
- [ok] registry-item 文件清单 vs 盘上文件 — 声明 8 个文件（含 shadows.js / surface.js / 字体 / 两份许可文本）全部存在于盘上，无远端 url 兜底。
- [ok] 无随机/时钟依赖 — 本目录 grep Math.random、Date.now、performance.now、requestAnimationFrame：零命中（确定性由 SKILL.md 的 Runtime contract 声明）。
- [ok] 阴影 pass 的自述与代码相符 — shadows.js 首行注释与实现一致：固定 light 向量、按 bucketSize 空间分桶、单次额外 GPU draw；非 three 阴影系统。
6Verdict & Scenarios
Best for: Short videos (8s shots) requiring a 'hardcore/tech-feel' headline transition or front/rear copy comparison, in pipelines where the rendering environment is confirmed to support WebGL2 and offline reproducibility is desired.
Not for: Cases requiring transparent overlays or inverted typography on dark backgrounds (this block defaults to a white panel #fff and dark text); environments where the render machine only supports WebGL1.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload code-slice-hero.tar.gz
sha256:
Option B · Copy Guide for Agentf4df15e71090b458…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.