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外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | GSAP 3.14.2（随块本地副本，非 CDN） |
| package | Geist-Bold.ttf（OFL）与 GSAP-NOTICE.txt 随块分发；本目录无任何网络依赖 |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: code-slice-hero.html（浏览器/渲染器端执行：解析变量 → 生成前后文本图集 → 注册 paused GSAP 时间线 → 监听 h
审计说明： 。判级对象＝本 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 的环境。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload code-slice-hero.tar.gz
sha256:
Option B · Copy Guide for Agentf4df15e71090b458…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.