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.htmlregistry/components/split-tilt-cards/registry-item.json注册表元数据与 variables 声明块registry/components/split-tilt-cards/demo.html1920×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 classstc-slot>npx hyperframes add split-tilt-cards然后在compositions/components/split-tilt-cards.html中将每个槽的默认块替换为你的媒体div classstc-slot>div classclip contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考