1实现原理 · 为什么它能做到
产出镜头：一整面正方形瓷砖承载一条无缝前标题；一个想象的光标扫过表面，附近瓷砖按高斯深度场抬升并倾斜，只有恰好与两条标题轮廓相交的格子翻面，露出后标题。
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.
注：这里在做什么：把「转场」做成逐格翻牌的显隐逻辑——翻哪些格子由标题轮廓决定，所以换文案会自然改变翻牌图案。
渲染实现是「一次 instanced WebGL 2 draw」+ 前后标题共享图集 + 一批批量投影阴影 pass；这与「逐 tile 元素」的做法相反，是块能稳定跑 30fps 的原因。
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.
注：这里在做什么：把数百个瓷砖压成一次 draw call；阴影也不走 three 的阴影系统，而是自写的一套 bucket + GLSL pass（shadows.js）。
文案、字号与方格边长三者独立：瓷砖按格子裁切图集，所以字再大也不会把方块拉成长方形。
registry/blocks/code-slice-hero/SKILL.md
Copy, text size and square cell size are independent, so tiles never stretch.
注：这里在做什么：这是本块相对于「把文字贴到网格上」的常见做法的关键差异，保证任何字号下方块恒为正方形。
18 个变量全部走 clamp 读取：先解析 schema 取默认值，再用 getVariables() 覆盖，数值型逐一夹到声明区间，非法值回退默认。
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));
注：这里在做什么：变量既由 Studio 滑杆产生也可能来自 CLI --variables，双重来源因此需要「可预期化」而非直接信任。
标题图集在运行时用 canvas 2D 现画（willReadFrequently 上下文），前后两条标题共用一对图集。
registry/blocks/code-slice-hero/code-slice-hero.html
function textSurface(text) { … const canvas = document.createElement("canvas"); … const ctx = canvas.getContext("2d", { willReadFrequently: true });
注：这里在做什么：避免随块分发大图，把排版交给浏览器字体渲染，因此能随文案/字号实时重建图集。
WebGL2 是硬门槛：拿不到 webgl2 上下文就直接抛错，而不是静默降级。
registry/blocks/code-slice-hero/surface.js
if (!gl) throw new Error("Code Slice Hero requires WebGL 2 for its full tile surface.");
注：这里在做什么：渲染主机若只有 WebGL1 会立即失败并给出可读原因，比出空白帧好排查。
确定性契约同族：paused 时间线注册到 window.__timelines["code-slice-hero"]，hf-seek 重同步，每帧是 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).
注：这里在做什么：headless 渲染器逐帧 seek 的前提，同批所有块都要满足。
2核心能力
01瓷砖逐格翻面转场（1920×1080、8s、18 变量）
02光标高斯场可调：半径 160–480、衰减 0.4–3.5、深度 ±320、倾斜 0–55
03自写批量投影阴影（强度 0–0.65、软度 0.5–4），与瓷砖表面同在 WebGL2 里
04单次实例化绘制 + 前后图集：一个实例缓冲、一次表面 draw、一次阴影 draw per seek
05随块分发的本地依赖：GSAP 3.14.2 副本、Geist-Bold.ttf（OFL）与其许可文本，运行期零外链
06可清理：dispose 会移除 hf-seek 监听、清空 stage 与内部数组
07脱离 Studio 也能出片：直接渲染 composition 并覆盖前后文案
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | GSAP 3.14.2（随块本地副本，非 CDN） |
| package | Geist-Bold.ttf（OFL）与 GSAP-NOTICE.txt 随块分发；本目录无任何网络依赖 |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- WebGL2 与本地字体是硬前提 — 拿不到 webgl2 上下文会直接抛错（surface.js）；字体为随包 Geist-Bold，换字体需自行替换资产与 @font-face。
- 文案长度受限 — 两条标题各自 maxLength 32（SKILL.md 变量表），长句会被截断或需改代码。
- 格边尺寸影响开销 — cellSize 24–120 px 可调，小格会产生大量实例；虽为单次 draw，顶点与阴影配对数量仍随格子数增长。
- 变量属性格式脆弱 — 变量必须保持单引号 + 纯 JSON，且 SKILL.md 要求不要经 Studio Design 面板保存。
风险提醒：蓝色，知晓即可。判级对象＝本 block 目录（SKILL.md + composition HTML + 两个本地渲染模块 + 本地 gsap 副本 + 字体）：全目录零外链、零凭证/env 读取、零 shell 脚本、零本地写盘、零数据外发；唯一「执行面」是浏览器里的 WebGL2 与两个随包 JS 模块（属自带本地可执行内容的正常实现）。安装/渲染走官方 CLI 生态。据此取 blue。
5第二遍独立确认
- [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 阴影系统。
6结论
适合：需要「硬核/技术感」标题转场或前后文案对照的短片（8s 镜头），且渲染环境确定具备 WebGL2、希望离线可复现的流水线。
不适合：需要输出透明叠加层或深色底反白排印的场合（本块默认白色面板 #fff 与深色文字）；渲染机只有 WebGL1 的环境。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 code-slice-hero.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf4df15e71090b458…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库heygen-com / heygen-com/hyperframes
原始 GitHubheygen-com/hyperframes ↗
Stars44283
最近推送2026-09-06
本 skill commit
d2f0bc7f34许可Apache-2.0（仓库根 LICENSE = Apache License Version 2.0；块内随带第三方许可文本：three.js MIT、GSAP 标准许可、Geist/Archivo/Cormorant Garamond OFL 等）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。