用途:为已制作的卡片或幻灯片 composition 添加转场、叠加层与 UI 块,并在用户不确定用什么效果时承担选择与编排职责。触发场景包括“给卡片新闻加效果”“应用转场”“加 fx”“帮我选转场”等。若已明确具体效果,可直接调用对应 hyperframes-fx-<slug> 子技能;本编排器负责选择逻辑。
主要流程:一、语气检测,依据 topic 名称、现有色板、卡片内容语气,从 brand、news、tech、minimalist、emotional 五种中判定,不明确时用 AskUserQuestion;二、读取卡片流,在目标 topic 的 index.html 中识别各 div.card clip 的模板类型(photo-cover / question / stat / image-feature)与顺序;三、按语气×卡片流查 references/card-flow-recipes.md 推荐组合,通常卡间转场 2–3 个、持续型叠加 0–1 个、每卡强调 0–2 个;四、执行各子技能安装命令,如 npx hyperframes add <slug1>、npx hyperframes add <slug2>,文件自动生成到 topics/<主题>/compositions/ 或 compositions/components/;五、编辑 index.html 接入各效果,shader 转场等用 data-composition-src、data-start、data-duration、data-track-index 属性,组件叠加则插入其 HTML/CSS 片段;六、验证,运行 npx hyperframes lint topics/<主题> 与 npx hyperframes render topics/<主题>,lint 0 错误后重渲染,并以 mp4 播放验证(overview 为静态,看不到转场)。
能力范围:含 41 个子技能,分为 Shader Transitions 14 个、Transition Variants 13 个、Component Overlays 3 个、UI Blocks 11 个,完整列表见 references/catalog.md。语气推荐示例:brand 用 whip-pan→sdf-iris→light-leak 配 grain-overlay 与 shimmer-sweep;news 用 flash-through-white→glitch→chromatic-radial-split;tech 用 chromatic-radial-split→sdf-iris→cinematic-zoom 配 data-chart 或 ui-3d-reveal;minimalist 用 cross-warp-morph→transitions-scale→domain-warp-dissolve;emotional 用 light-leak→ripple-waves→transitions-blur。
原则与限制:单套最多 3 种转场;持续型叠加只用一个;时间重叠 0.2–0.4 秒;shader 转场放 track-index 1,卡片为 0;不确定时默认 brand 语气。定价、平台支持等未提供。