HyperFrames Hero Primitives: A Field Guide to the Shelf of 21 and the data-composition Mount Contract

2026-09-08 20:06:16作者：邬祺芯Juliet

HyperFrames 的仓库里有一份面向"帧工人（frame worker）"的组件元目录：registry/components/CATALOG.md。它定义了一组可复用的"英雄镜头单元"（Hero primitives，即 Shelf of 21），每个单元都按统一的 data-composition 挂载契约工作。阅读本文后，你将掌握：什么时候直接"上架"一个既有单元而不是手写 HTML、如何用 data-variable-values 配置它们、cues/accent/exit 三个贯穿全部单元的参数语义、以及如何验证每个单元的真实文件结构与源码级实现。

这份文档是什么：不是组件清单，而是"先查架"的工作契约

CATALOG.md 的第一句话就点明了它的用法："Check this shelf FIRST"。它把一批经过对抗性质检（QA）的镜头单元按叙事意图（intent）分组，每个单元都以统一的结构描述：what（这个单元做什么）、use_when（什么时候该用）、avoid_when（什么时候不该用，来自真实误用案例）、pairs_with（可以和哪些单元配对）、variables（全部可配置变量，含默认值）。此外，文档开头用 10 条规则定义了所有单元共同遵循的挂载契约，最后再逐条给出每个单元的规格。

文档中的每个单元在仓库里都有真实目录与之对应，通常包含四个文件，例如 registry/components/per-word-rise 下是：

per-word-rise.html — 可安装的组件片段本体；
README.md — 该单元的变量表与挂载/插槽说明；
registry-item.json — 清单元数据（类型、标签、变量 schema、安装目标路径）；
demo.html — 本地演示页。

一个典型的 registry-item.json（见 registry/components/per-word-rise/registry-item.json）以 "type": "hyperframes:component" 声明自己是组件，variables 数组中的每一项都带 type、role（content/timing/style）、label、description、default，枚举类变量还带 options。这意味着这份"架子"既是人读的规格书，也是机器可解析的变量契约——文档中的所有 variables 说明都直接来自这些 JSON。

十诫：所有 Hero 单元共享的挂载契约

CATALOG.md 开头 10 条规则是使用整套架子的前提。下面逐条还原并给出源码佐证。

规则 1：先查架，命中即挂载，不要重造。 当某个 Scene 的机制匹配某个 primitive 的 use_when 时，直接挂载该单元，而不是重新实现一遍。这是整套目录的出发点。

规则 2：通过挂载属性接线。 在一个 class="clip" 的 div 上使用 data-composition-src 指向已安装的组件 HTML，并配 data-start、data-duration、data-track-index。一个真实挂载示例来自 registry/components/per-word-rise/README.md：

<div
  class="clip"
  data-composition-id="per-word-rise"
  data-composition-src="./per-word-rise.html"
  data-variable-values='{"text":"SHIP IT TODAY","split":"word","cues":"0.5,1.0,1.5"}'
  data-start="0"
  data-duration="3.5"
  data-track-index="0"
></div>

技能文档 skills/hyperframes-registry/SKILL.md 补充了这些属性在宿主合成中的完整语义：data-composition-id 必须匹配组件内部的 composition ID、data-start 是出现在宿主时间线上的秒数、data-duration 是播放时长、data-width/data-height 是画布尺寸（弹性单元不写这两个）、data-track-index 控制图层顺序（数值越大越靠前）。组件与块（block）的差异也在此区分：块是独立子合成（自带尺寸与时间线），组件是"无自身尺寸的片段"，直接粘贴进宿主合成。

规则 3：用 JSON 传变量，只传要改的。 每个变量都有默认值，所以 data-variable-values='{"text":"..."}' 里只需要写你想覆盖的字段。从源码看，单元通过运行时注入的 window.__hyperframes.getVariables() 读取变量（见 registry/components/per-word-rise/per-word-rise.html），再逐个做类型归一与非法值回退。

规则 4：插槽（Slot）用 data-slot 命名元素暴露。 展示媒体或自定义内容的单元暴露命名插槽，可以是安装副本里的 data-slot 元素，也可以是宿主页面上的 <template data-slot="...">（用于 browser-device-stage 这类场景）。每个单元的 README 会说明其精确的插槽机制。

规则 5：accent 枚举全局共享、由 token 驱动颜色。 green 乘 --brand，blue 乘 --accent，violet 乘 --accent-2。主题 token 负责着色，挂载时禁止硬编码品牌色。源码印证了这一映射，per-word-rise.html 里的 accent 表即：

var accentColors = {
  green: "var(--brand, #71f5a7)",
  blue: "var(--accent, #61a8ff)",
  violet: "var(--accent-2, #c5a3ff)",
};

同时规则强调：accent 只标记每个合成里的一个元素，且绝不落在占位素材上——占位屏幕、卡片、头像、图表序列一律单色，用墨色（ink）的 alpha 层级搭建。详见 skills/hyperframes-registry/references/placeholder-material.md。

规则 6：exit 全局默认 none。 单元默认保持最后一帧，转场归属"帧根"（frame root）掌控；只有当帧本身必须离场时才显式选择 fade 或 up。CATALOG.md 甚至在 cta-close、logo-brand-close 这类收尾单元的说明里强调"这是影片结尾，保持 none"。

规则 7：cues 是从挂载起算的秒列表。 逗号分隔，对应单元序列里每个节拍的落点；留空则沿用作者编排的节奏。用途是把揭示动作锁到旁白/配音上。

规则 8：所有单元都是弹性的。 没有固定尺寸，填满宿主 clip 的盒子；额外时长变成 HOLD（静止保持），绝不做时间拉伸动画。以 per-word-rise 源码为例，其时间包络为 IN_BASE = 1.45s（完整交错上升+清晰沉降）、HOLD = max(0, D - IN - OUT)（真正静止）、OUT_BASE = 0.50s（仅当 exit 非 none 时）；当 D 短于 IN+OUT 时 IN/OUT 一起压缩，时间线本身从不被 time-scale（见 docs/catalog/components/per-word-rise.mdx 中的源码注释块）。

规则 9：只有架上没有任何单元满足机制时才手写定制 HTML。 而且手写内容也必须遵守同一套挂载契约，保证整条时间线可被同一运行时驱动。

规则 10：avoid_when 是硬性转向而非建议。 它们来自 QA 中观察到的真实误用模式，应作为约束执行。

贯穿全部单元的三大参数语义

理解 cues、accent、exit 就能读懂架上大部分单元的变量表。

cues：把揭示锁到旁白节拍

cues 是"落点时间"而非"开始时间"。以 per-word-rise 为例，README 明确说明"Cues are landing times: each unit's rise ends on its cue"。源码解析逻辑（per-word-rise.html）逐 token 校验秒数非负，然后为每个单元计算 landing：

有 cues 时，超出 cue 列表的单元按列表自身的平均间隔外推（cueGap），且所有落点被夹在 [0.05, duration - OUT] 之间；
无 cues 时，使用作者编排的级联节奏（每个单元的 landing 为 index * step + RISE）。

landing 一旦确定，单元的 start 由 landing - RISE 反推，这样早期 cue 对应的上升段会被自然压缩。

accent：token 化强调的纪律

accent 是三个枚举值之一：green、blue、violet。它通过 CSS 变量映射到主题 token，因此同一套 HTML 在不同主题下自动换肤。CATALOG.md 的纪律是"一个合成只强调一个元素"：强调某个数字用 accent 上色，占位内容保持单色。这与规则 5 是同一件事的两面。

exit：帧的离场归谁管

exit 取 none | fade | up，默认 none。语义是：none 保持到剪切；fade 仅透明度离场；up 是交错上移淡出。以 per-word-rise 为例，up 触发 y: "-4.5cqh" + blur 0.7cqh 的 staggered 离场，fade 只做透明度。规则 6 提醒：单元默认把转场决定权让给帧根。

落点缓动的实现细节：settle tail 而非死停

hero 单元的品质差异常常藏在"落地"这一个瞬间。per-word-rise 的实现展示了这类单元的通用追求：避免 power3.out 那种"两帧内从极速到不可感知、然后戛然而止"的生硬收尾。源码实现了一个分段三次函数 landEase（per-word-rise.html）：在进度 78% 处分缝，把最后约 7% 的行程留给收尾段，缝处保持 C1 连续，从而得到"单调速度、无过冲、无停滞、无跳跃"的 glide-in 尾迹。由于它是纯进度函数，天然可 seek、确定性强。这是"3.5s 作者节奏 + 弹性 HOLD + 默认为 none 的 exit"之外，单元在运动品质层面的隐性契约。

按叙事意图遍历这面架子

CATALOG.md 的主体把单元分组组织。下面是各组及其中每个单元的完整规格。每个单元都标注了它在仓库中的目录，便于按需阅读各自的 README 与源码。

Text effects 文本效果

per-word-rise（registry/components/per-word-rise）

what：文字或字符以受控的 blur-to-sharp 级联升入到位，轻缓漂动后保持静止直到剪切。
use_when：标题或关键句需要配合旁白节拍逐词落地。
avoid_when：该行需要在场景中途换词/换字——本单元只揭示一条静态行。
pairs_with：kinetic-type-swap、count-up、cta-close。
variables：text（string，默认 "WORDS IN MOTION"，字号按字符数自动适配）；split（enum word/char，默认 word，决定上升的单位）；cues（string，默认空，每个单位落点的逗号秒数）；accent（enum green/blue/violet，默认 green）；exit（enum none/fade/up，默认 none）。

scramble-reveal（registry/components/scramble-reveal）

what：确定性的黑客风揭示——在固定字形行之间循环，从左到右锁定目标字符串。
use_when：产品名、功能名或技术主张想带终端/工程味地"解码成型"。
avoid_when：品牌基调偏安静、高级；字形翻搅在安静场景里读作噪音（改用 titlecard-lockup 或 per-word-rise）。
pairs_with：titlecard-lockup、cut-the-curve。
variables：text（string，默认 "HYPERFRAMES"）；style（enum terminal/clean，默认 terminal，带框终端或裸文字）；accent（enum，默认 green，作用于文字、前缀与边框）；exit（enum，默认 none）。

kinetic-type-swap（registry/components/kinetic-type-swap）

what：一句话保持固定前缀与后缀，中间一个被遮罩的词槽依次滚过若干备选词，最终停在末项。
use_when：一句话要承载多个价值词（如 "Ship faster, smarter, together"）且不换行重排。
avoid_when：备选词长度差异过大，或需要大量交换——词槽会预撑到最宽项，长列表会拖沓。
pairs_with：per-word-rise、browser-device-stage、cta-close。
variables：prefix（string，默认 "Ship"）；options（string，默认 "faster,smarter,together"，逗号词序，末项为终态）；suffix（string，默认空）；cues（string，默认空，每次交换的秒点）；accent（enum，默认 green，词槽颜色）；exit（enum，默认 none）。

vox-annotate（registry/components/vox-annotate）

what：在一条保持静止的句子中，某个关键词被手绘标记圈出，同时一根细连接线引出等宽字体的旁注标签；在 cue 上完成一次标注动作。
use_when：某个短语需要编辑式/纪录片的补充说明。
avoid_when：仅需强调而无旁注时，保持句子干净即可。
pairs_with：per-word-rise、line-swap、titlecard-lockup。
variables：text、keyword、note、style（enum highlight/circle/underline/scribble）、draw_at、accent、exit。

Product demo 产品演示

oversized-cursor（registry/components/oversized-cursor）

what：一支刻意放大的 macOS 风指针从画外进入，滑向目标，点击使其"点燃/发光"以肉眼可见，然后加速退场。
use_when：需要拟人化的"有人点了它、它生效了"这一剧场化节拍。
avoid_when：点击目标是你自己的插槽 UI、或按压态需要持续存在——改用 press-ripple（它会按压插槽并保持按压态）。
pairs_with：browser-device-stage、cut-the-curve。
variables：cursor_variant（enum light/dark，默认 light）；target_x（百分比数字，默认 55）、target_y（默认 55，指针尖端落点）；click_label（string，默认 "Generate"，被点击药丸上的文字）；exit（enum，默认 none；fade 与 up 会连被点亮的 target 一起离场）。

press-ripple（registry/components/press-ripple）

what：指针减速从场外到达，落在由调用方定位的目标上略偏中心的位置，与之同频压缩，松开时泛起墨色涟漪环，并保持按压态。
use_when：这是"回报节拍"——用户按下按钮，影片停留在那个令人满足的按压态上。
avoid_when：指针本身才是主角、或点击后必须离开——进出点击的弧线请用 oversized-cursor。
pairs_with：browser-device-stage、cta-close。
variables：label（string，默认 "Get started"；替换目标插槽后忽略）；target_x/target_y（百分比数字，默认 50/50，区域中心）；press_at（秒，默认 1.4，按压 cue）；cursor（enum light/dark，默认 light）；accent（enum，默认 green，涟漪墨色与按压填充）；exit（enum，默认 none）。

browser-device-stage（registry/components/browser-device-stage）

what：一个通用于产品演示的设备舞台——用 token 原生 chrome（浏览器、窗口或手机）包裹通用应用界面；屏幕区是一个插槽，含骨架默认态、一次 settle 入场、可读保持、可选屏幕切换。
use_when：真实截图或产品 UI 需要一个可信的舞台，这是发布片里展示"产品"的默认方式。
avoid_when：内容是需逐帧同步（seek-synced）的素材；插槽里的视频不受框架同步，请改用 media clip 合成。
pairs_with：oversized-cursor、before-after-wipe。
variables：chrome（enum browser/window/phone，默认 browser）；title（string，默认 "app.example.com"，地址药丸或标题栏文字）；swap_at（秒，默认 0，切到第二屏的交叉淡入时刻，0 关闭）；accent（enum，默认 green，骨架强调色）；exit（enum，默认 none）。插槽：宿主页面模板 data-slot="browser-device-stage-screen" 与 "browser-device-stage-screen-b"。

其 README（registry/components/browser-device-stage/README.md）补充了重要细节：插槽模板放在宿主文档层级（运行时挂载会清空 host clip 的子元素）；插槽内容可以是 <img>、<video> 或任意 HTML，直系 img/video 会被 object-fit: cover 拉伸铺满；没有 screen 插槽时渲染 token 化骨架应用；没有 screen-b 但设置了 swap_at 时，第二屏是重排后的骨架态；插槽视频不受框架 seek 同步，确定性渲染优先用静帧或 HTML。

telemetry-hud（registry/components/telemetry-hud）

what：安静的等宽字体调试 HUD 读数框住一个插槽主体：角落括号先绘制，读数随 cue 逐项跳动，其中一项被强调。
use_when：技术产品在其主视觉周围需要"被仪表化、精确"的氛围。
avoid_when：受众非技术背景时，HUD 会被读作噪音。
pairs_with：browser-device-stage、code-terminal-run（打字提示节拍）、count-up。
variables：readouts（label:value 列表）、emphasize、cues、accent、exit。

native-notification-pop（registry/components/native-notification-pop）

what：一条忠于系统的 iOS 或 macOS 通知横幅，以准确的"可打断弹簧 + 背景模糊"落在任意场景之上。
use_when：回报点是"它通知你了"，或某个时刻需要原生 OS 质感。
avoid_when：需要多条通知讲故事——那是 notification-stack。
pairs_with：browser-device-stage、press-ripple、scroll-camera-story。
variables：title、body、app_label、os（ios/macos）、at、accent、exit。

spring-stack-shuffle（registry/components/spring-stack-shuffle）

what：一叠插槽卡片在 cue 上带着真实质量感洗牌；中途重定向会保留速度（可打断弹簧定律）。
use_when：浏览/循环屏幕、结果或选项时想要物理质感。
avoid_when：条目只需装配一次并静止——那是 grid-card-assemble。
pairs_with：screen-flow-carousel、browser-device-stage、whip-pan-cut。
variables：cards（3-5）、cues、accent、exit。

Proof and stats 证明与数据

count-up（registry/components/count-up）

what：token 原生的统计计数器，从起始值缓动到结束值，精确落在最终整数上并伴一次克制的缩放脉冲，然后保持。
use_when：一个数字就是证明（用户数、营收、提速），且要精确落在旁白念出的那一瞬。
avoid_when：数据需要上下文或对比；没有图表/标签的孤零数字显得空洞——改用 chart-story。
pairs_with：chart-story、count-up。
variables：start（数字，默认 0）、end（数字，默认 100，永远精确落在 end 上）；prefix（string，默认空）、suffix（string，默认 "%"）；accent（enum，默认 green）；glow（布尔，默认 false，可选柔和 accent 光晕）；exit（enum，默认 none）。

chart-story（registry/components/chart-story）

what：一张图表按阅读顺序从数据构建并精确落地指定数值：交错条形、带面积填充的从左到右折线、扫过的环形图或渐次填充的进度条，并用 accent 标注被强调的数据点。
use_when：证明是一个趋势或跨若干数值的对比，且某一个数据点要承载故事。
avoid_when：只有孤零一个数字（用 count-up），或数据需要实时交互——这是作者编排的构建，不是图表组件。
pairs_with：count-up、chart-story、scroll-feed。
variables：type（enum bars/line/donut/progress，默认 bars）；data（string，默认 "12, 28, 45, 64"，精确落地）；labels（string，默认 "Q1, Q2, Q3, Q4"）；emphasize（数字索引，默认 3，带标注的被强调数据点）；unit（string，默认 "%"）；accent（enum）；exit（enum）。

Intros and reveals 开场与揭示

titlecard-lockup（registry/components/titlecard-lockup）

what：沉静呼吸式标题卡：可选等宽 kicker 淡入，字标以一次克制移动居中落定，一条发丝线从左到右画出，等宽标签淡入其下，最后是完全静止的保持。
use_when：影片需要一次喘息：开场卡、章节分断、名字揭示——此时低动态本身就是宣言。
avoid_when：场景需要能量或第二个发展阶段；该单元刻意拒绝弹簧链（改用 per-word-rise 或 scramble-reveal）。
pairs_with：scramble-reveal、logo-brand-close、titlecard-lockup。
variables：wordmark（string，默认 "HYPERFRAMES"）；label（string，默认 "WRITE HTML. RENDER VIDEO."，空则隐藏）；kicker（string，默认 "INTRODUCING"，空则隐藏）；rule（enum show/hide，默认 show）；accent（enum，默认 green，由发丝线承载）；exit（enum，默认 none）。

svg-stroke-trace（registry/components/svg-stroke-trace）

what：一段作者提供的 SVG 路径按测量长度自行描画，随后带轻微漂移保持；若路径以 Z 闭合则在描边后填充。
use_when：自定义标记、签名、下划线装饰或简单线稿需要"自我绘制"上屏。
avoid_when：图案是多段描边或需要可见笔尖——whiteboard-ink 会用 nib 演员编排多段描画。
pairs_with：whiteboard-ink、titlecard-lockup。
variables：path（string，默认一段波浪路径，1024x520 viewBox，尾部 Z 启用填充）；stroke_width（数字，默认 12，viewBox 单位）；accent（enum，默认 green，描画与填充色）；exit（enum，默认 none）。

whiteboard-ink（registry/components/whiteboard-ink）

what：白板速写逐段描画，笔尖骑在活动墨迹前沿；内置预设草图（bulb、flow、rocket），也支持通过 strokes 插槽提供你自己的多段路径。
use_when：一个想法、流程或概念需要手绘感与解释感，随旁白"现画现讲"。
avoid_when：标记只是单一路径或 logo 描边——单描边用更轻的 svg-stroke-trace。
pairs_with：svg-stroke-trace、per-word-rise、grid-card-assemble。
variables：sketch（enum bulb/flow/rocket，默认 bulb；strokes 插槽有内容时忽略）；caption（string，默认 "Draw the idea"，草图完成后显示，空则隐藏）；pen（enum show/hide，默认 show，笔尖演员）；accent（enum，默认 green，作用于 data-ink="accent" 的描边）；exit（enum，默认 none）。插槽：在安装副本中用你自己的 path 元素填充 data-slot="strokes" 的 SVG group。

particle-image-reveal（registry/components/particle-image-reveal）

what：一个带种子的确定性粒子场收敛以"物质化"一张插槽图片，完成时拖尾渐薄至零。
use_when：logo 或关键视觉值得一个精心制作的成形时刻。
avoid_when：基调是严格肃穆的企业风——titlecard-lockup 才是安静的揭示。
pairs_with：logo-brand-close、titlecard-lockup、beat-pulse-background。
variables：density（low/med/high）、direction（ltr/center）、accent、exit。

Call to action 行动号召

cta-close（registry/components/cta-close）

what：纯行动收尾：一行超大号行动句升入画面，其下一个 CTA 胶囊弹出，然后整组完全静止。
use_when：影片以诉求收束：注册、现在开始、去试试——屏幕上最后的元素就是行动。
avoid_when：影片应以"谁做的"收尾而非"做什么"——身份结尾用 logo-brand-close。
pairs_with：logo-brand-close、press-ripple、count-up。
variables：action_line（string，默认 "Make it happen"，两到四词行动句）；button_label（string，默认 "Start now"，胶囊文字）；accent（enum，默认 green，胶囊色）；exit（enum，默认 none——收尾片请保持 none）。

logo-brand-close（registry/components/logo-brand-close）

what：字标字母从左到右级联成居中组合，可选标语与等宽 URL 行在其下安顿，然后以完全静止的身份帧结束影片。
use_when：最后一帧就是品牌本身：名称、标语、URL，保持到最后一帧。
avoid_when：结尾应推动按钮按压或注册——那是重行动的 cta-close。
pairs_with：cta-close、titlecard-lockup、count-up。
variables：wordmark（string，默认 "HYPERFRAMES"，字母逐个级联，品牌句点以 accent 上色）；tagline（string，默认 "Write HTML. Render video."，空则隐藏）；url（string，默认 "hyperframes.heygen.com"，空则隐藏）；accent（enum，默认 green）；exit（enum，默认 none——影片终结器请保持 none）。

Feature tour 功能巡览

grid-card-assemble（registry/components/grid-card-assemble）

what：N 张带标签的 token 卡片以交错方式装配成网格或纵向列表，带有直接落位、无过冲的淡入+短滑移，随后完美静止。
use_when：多个功能、步骤或能力需要作为"可扫读的清单"一次落定。
avoid_when：功能围绕一个中心事物且彼此关系重要——constellation-hub 画的是那种结构。
pairs_with：browser-device-stage、cta-close。
variables：items（string，默认 "Capture,Compose,Render,Publish"，3 到 12 个 tile 标签）；layout（enum grid/list，默认 grid）；columns（数字 0-4，默认 0，0 为自动）；cues（string，默认空，逐项入场时间）；accent（enum，默认 green，tile 圆点色）；exit（enum，默认 none）。插槽：在 data-slot="items" 内自行编写子元素以替换生成的 tile。

Before / after 前后对比

before-after-wipe（registry/components/before-after-wipe）

what：两个全出血内容插槽对比前后状态，一条持久分割线把"后"层擦过"前"层，并停留在可配置的分割位。
use_when：改进是视觉性的：旧 UI 对比新 UI、原始对比打磨，一次擦拭即可说明。
avoid_when：两个状态是先后关系而非对比关系——直接剪切或 cut-the-curve 优于长期保持的分屏。
pairs_with：browser-device-stage、chart-story。
variables：label_a（默认 "Before"）、label_b（默认 "After"，空则隐藏侧边 chip）；rest_split（百分比数字，默认 50，分割线静止位）；wipe_at（秒，默认 0.25，擦拭起点）；accent（enum，默认 green，分割线把手与 after chip）；exit（enum，默认 none）。插槽：在安装副本中替换 data-slot="before" 与 data-slot="after" 的子元素；两个面板共享同一坐标系。

Transitions 转场

cut-the-curve（registry/components/cut-the-curve）

what：速度匹配的方向性硬切：离场主体加速，在峰值速度处交换身份，入场主体沿同一方向继续并减速至静止。
use_when：两个场景/主体应以动能交接而非溶解——接缝藏在速度里。
avoid_when：需要平静的时刻；安静段落里的硬速度切读作毛刺。也绝不当 HOLD 用——它没有弹性相位，只能通过挂载时长重定时。
pairs_with：oversized-cursor、scroll-feed、browser-device-stage。
variables：subject（enum cursor/card/scene，默认 cursor，两侧载荷）；direction（enum left/right/up/down，默认 left，共享移动向量）；cutFraction（数字 0-1，默认 0.33，归一化换切点）；blurPx（数字，默认 12，接缝模糊）；exit（enum，默认 none，落地后令入场主体离场）。

iris-reveal（registry/components/iris-reveal）

what：一个圆形从作者指定原点打开，在灰度化的状态 A 之上揭示全彩状态 B；accent 色描边沿裁切边缘骑行。
use_when：前后对比或揭示节拍需要从一点凝聚成一记自信的重拳。
avoid_when：两个状态需要并列可检视——那是 before-after-wipe。
pairs_with：before-after-wipe、browser-device-stage、logo-brand-close。
variables：iris_x、iris_y、open_at、register（color/plain）、accent、exit。

whip-pan-cut（registry/components/whip-pan-cut）

what：带方向性运动模糊与速度曲线（speed-ramp）的速度匹配甩镜，把场景 A 带出、场景 B 落入——cut-the-curve 更高声量的兄弟。
use_when：快节奏蒙太奇需要在节拍之间注入能量。
avoid_when：影片基调是安静企业风——用 cut-the-curve。
pairs_with：cut-the-curve、scroll-feed、spring-stack-shuffle。
variables：direction、whip_at、accent、exit。

Problem setup 问题铺垫

scroll-feed（registry/components/scroll-feed）

what：一个利于循环的、由多样骨架帖子卡片组成的列，以躁动节奏向上滚动，带细微运动拖尾。
use_when：铺垫痛点：噪音、无尽下滑、无休止信息流——你的产品要修复的"前"世界。
avoid_when：卡片内容本身重要——这些是匿名骨架，真实帖文或证言需要定制场景。
pairs_with：cut-the-curve、before-after-wipe、count-up。
variables：speed（enum doom/frantic，默认 doom）；card_count（数字 4-10，默认 6，每周期卡片数）；cues（string，默认空；每个 cue 推进一卡，形成阶梯节奏；空则保持连续、可循环滚动）；exit（enum，默认 none——循环保证只在 cues 为空且 exit 为 none 时成立）。

Camera moves 运镜

scroll-camera-story（registry/components/scroll-camera-story）

what：一次被压缩的强制滚动电影化过场：四个深度层以不同速率运动，分区卡片随镜头到达而升起，减速进入保持的最终分区。
use_when：多分区故事应像一次连续的电影化旅行。
avoid_when：只有一个主体——ui-focus-zoom 更擅长框住单一表面。
pairs_with：titlecard-lockup、cta-close、whip-pan-cut。
variables：sections（2-4）、travel（cqh）、cues、accent、exit。

如何让单元真正可用：安装、搜索与发现

这面架子的"安装"动作通过 CLI 完成。技能文档 skills/hyperframes-registry/SKILL.md 给出了权威用法：

npx hyperframes add per-word-rise        # 安装单个组件
npx hyperframes add captions             # 安装所有带 captions 标签的块
npx hyperframes catalog --query "reveal a headline one line at a time"  # 按意图检索
npx hyperframes catalog --type component # 只列组件

组件默认安装到 compositions/components/<name>.html（块默认到 compositions/<name>.html），路径可在 hyperframes.json 的 paths.components 中修改。安装后 CLI 会打印写入了哪些文件，以及一段可粘贴到宿主合成中的起始片段。CATALOG.md 面向的"帧工人"流程是：先查架 → 命中 use_when 即挂载 → 用 data-variable-values 只改需要的变量 → 需要媒体/自定义内容的单元再填 data-slot → 手动定制仅在架上没有可服务机制时发生。搜索的纪律同样适用：始终用英语描述动作（目录以英语编写），并按意图查询而非按名称猜测；如果检索结果中没有合适的单元，通过 npx hyperframes feedback --search-miss 上报缺口（参见 skills/hyperframes-registry/SKILL.md 的 "Report what the catalog does not have" 一节）。

用一个发布片串联整面架子

把规则与单元规格落成一个可运行的示例：一条典型的产品发布叙事可以用如下单元链，每个都在宿主 index.html 中以 clip 挂载：

titlecard-lockup 开场呼吸卡（kicker "INTRODUCING" + wordmark）揭示片名；
scroll-feed 铺陈"问题世界"（默认 doom 节奏，连续循环滚动）；
browser-device-stage 作为可信舞台展示产品（浏览器 chrome + 真实截图插槽，swap_at 在旁白落点切到"改造后"界面）；
count-up 让核心指标精确落地（start/end 精确落在念出的数字上）；
cta-close 或 logo-brand-close 收尾（行动诉求或品牌身份二选一）。

每个单元的挂载代码遵循同一模板（以 per-word-rise 为例，见 registry/components/per-word-rise/README.md）：

<div
  class="clip"
  data-composition-id="per-word-rise"
  data-composition-src="./components/per-word-rise.html"
  data-variable-values='{"text":"SHIP IT TODAY","split":"word","accent":"blue","exit":"none"}'
  data-start="0"
  data-duration="3.5"
  data-track-index="0"
></div>

需要换屏的单元则额外在宿主文档层级放插槽模板，例如 browser-device-stage 的 README 展示了 data-slot="browser-device-stage-screen" / "-b" 两个模板分别承载前后两屏内容（registry/components/browser-device-stage/README.md）。选型时用各单元的 pairs_with 横向串联，用 avoid_when 排除误配。