HyperFrames split-tilt-cards 组件实战：用镜像 3D 开卷倾斜卡片打造 A/B 对比分镜
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
本篇指南围绕 HyperFrames 开源仓库中的split-tilt-cards视频组件展开：它是一段用于「对比型分镜」的可挂载子合成（sub-composition），让两张等重的卡片从画面两侧相向入场，各自携带镜像的 rotateY「开卷」倾斜（左 +18°、右 -18°），在同一个舞台透视下定格为 A/B、前后对比或双能力并置的平衡画面。读完本文，你将掌握该组件的变量体系、时间轴包络（IN/HOLD/OUT）、双命名槽（slot）机制、安装挂载方式，以及从源码层级理解其动效编排与同步点设计，能够直接在你的 HyperFrames 项目中复用它搭建价格方案、功能对比、迁移前后等对比场景。
组件定位：当「对比」成为一段独立动效
split-tilt-cards在仓库中归属family: "layout"、profile: "holdable"、jobs: ["compare"]（见 registry/components/split-tilt-cards/registry-item.json），其设计意图非常聚焦：
- 两张卡片从相反翼侧（opposite wings）相向飞入；
- 每张卡片带有一个静态（从不被 tween 的）rotateY 开卷式倾斜，+18° 与 -18° 镜像对称，共用一个舞台
perspective，让双眼读出「两物被同时称量」的平衡感； - 内缘各有一颗胶囊徽章（pill badge）以轻微过冲（spring-pop）弹出，左先右后，间隔约 0.3s——这是全片唯一被允许的 overshoot，且幅度被刻意压小；
- 入场完成后进入几乎不可察觉的反相（phase-opposed）悬浮漂移，最后归于完全静止，供剪辑停留。
它实现的是 comparison-split 蓝图的标志性动作，并解决了该蓝图中的命名冲突（源码注释提到 Wave J2、J2-10）。README 同时明确划定了适用边界：它不适用于超过 2 个条目（此类场景应使用grid-card-assemble），也不适合表现顺序步骤；若需要「一个状态擦除覆盖另一个状态」的分隔效果，应改用before-after-wipe。这是组件库中典型的「单一职责」设计——每个 primitive 只解决一种镜头语言。
文件清单与安装目标
split-tilt-cards组件在仓库中的文件组织如下：
| 文件 | 作用 |
|---|---|
| registry/components/split-tilt-cards/split-tilt-cards.html | 可挂载的子合成本体，安装目标为compositions/components/split-tilt-cards.html |
| registry/components/split-tilt-cards/registry-item.json | 注册表元数据与 variables 声明块 |
| registry/components/split-tilt-cards/demo.html | 1920×1080 独立宿主，以非默认变量挂载该 primitive，用于演示与验证变量通路 |
| registry/components/split-tilt-cards/README.md | 使用说明（本文主体依据） |
从源码注释看，该组件遵循 MOUNTABLE SUB-COMPOSITION 挂载契约：运行时只克隆<template>内部内容，#root填满宿主盒（inset:0、container-type: size），不设data-width/data-height，并以字面量键"split-tilt-cards"注册一条 paused 时间轴（挂载扁平化会从 live root 上剥掉data-composition-id）。这意味着它永远适配宿主给定的盒尺寸，而不是自带画布。
变量体系：6 个变量控制内容、风格与出退场
组件在<html><div class="stc-slot">npx hyperframes add split-tilt-cards
然后在compositions/components/split-tilt-cards.html中，将每个槽的默认块替换为你的媒体：
<div class="stc-slot"><div class="clip" contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.![]()
项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
