HyperFrames Comparison-Split 蓝图用镜像书页式 3D 倾斜卡片编排 A/B 对比镜头【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文深入拆解 HyperFrames 动画技能库中的comparison-split蓝图——一种将两个等权重元素并排呈现、以镜像「翻书」式 3D 倾斜book-open tilt完成入场并辅以内侧徽章强调的镜头模板。它适用于产品宣传片中「A/B 对比」「X 与 Y 并存」类 Key_Feature 帧例如「HTML 编排 vs 渲染管线」「方案 A vs 方案 B」。读完本文你将掌握该蓝图的三幕时间编码、签名动作split-tilt-cards的 CSS/GSAP 实现细节、以及一张可落地的完整 5 秒示例的逐段原理。蓝图定位什么时候该用 comparison-split在 HyperFrames 动画技能库中蓝图blueprint被定义为「产品无关、带时间编码的镜头模板」其索引位于 blueprints-index.md。每个蓝图都围绕一个命名的「签名动作」signature move构建comparison-split的签名动作是split-tilt-cards两张等宽卡片从画面两侧相向入场各自带着互为镜像的rotateY倾斜最终定格为一个对称的「翻开书本」式并排布局。该蓝图在 comparison-split.md 中明确定义了它的适用边界适用需要将两个互补的功能/能力同时而非依次呈现的场景——A/B 对比、「X Y 一体」、需要观众左右权衡的一对概念不适用超过 2 个条目应改用grid-card-assemble蓝图或需要表达先后步骤的流程应改用顺序型镜头。从角色映射看它在 blueprints-index.md 的 Key_Feature 角色菜单中与grid-card-assemble、cursor-ui-demo等并列触发条件是「两个成对能力并排、带镜像书页式倾斜A/B 或 XY 一体」。典型时长4–6 秒。三幕时间结构一场「同一次到达」而非两次节拍蓝图的骨架是一条[bg]画布承载两团微弱的氛围光晕——[accent A]位于画布约 30% 处、[accent B]位于约 70% 处让每一侧在 50% 对称轴两侧拥有各自的色彩身份两张等宽卡片共处于一个共享透视父容器下。整个镜头按时间切成三幕Scene 10.0–~0.8s标题确立概念居中的[title line]携带一个[accent keyword]从画面上方向下滑入到位短暂而平滑的 settle。向下的到达是刻意设计它与接下来从两侧入场的卡片构成互不冲突的「T 字形」构图。对应的规则映射是gsap-effects的 translate opacity 组合缓动函数使用长尾power3.outgsap-effects.md。在参考实现中标题从y: -40滑到 0、opacity 0→1时长约 0.67sgsap.set(#title, { opacity: 0, y: -40 }); tl.to( #title, { opacity: 1, y: 0, duration: TIMING.titleDur, ease: power3.out }, TIMING.titleAt, // 0.17s );Scene 2~0.4–1.9s分裂倾斜入场签名动作两张等宽特性卡片从相反两翼到达——[left card]自左、[right card]自右约晚 0.2s——各自携带镜像 3DrotateY倾斜左卡面向右、右卡面向左如同打开一本书并在落位时完成 scale ~0.85→1 的放大。入场与标题的收尾重叠使整个镜头读作「一次到达」而非两个独立节拍。每张卡片承载[image / label / subtitle]投影box-shadow朝倾斜方向外抛左卡影子向右、右卡影子向左。Scene 3~1.9s–结束徽章点题然后定格一枚药丸形[badge]落在每张卡片的内侧边缘先左后右间隔约 0.3s与卡片重叠约 15%使其读作「附着」而非「环绕」。这是全镜头唯一的一处过冲overshoot——它挣得了这个标点符号。之后画面 settle 并保持。运动词汇一览蓝图的 motion vocabulary 列出了完整动作集合动作实现要点标题自上而下滑动translate opacitypower3.out长尾缓动镜像对翼卡片入场左右反向滑入 静态书页式rotateY左tilt、右−tilt scale 0.85→1与倾斜匹配的外抛投影左卡阴影向右、右卡阴影向左内侧边缘徽章弹簧弹出全镜头唯一 overshoot用于点题相位相反的悬浮浮动左右永不同步左sin(t)、右sin(tπ)低振幅微妙抖动双侧重度氛围光晕每侧一个 accent 的柔和 bloom相机修饰符默认camera-static——对称性本身就是主体任何运镜都会破坏平衡。这一点也体现在示例的 DOM 结构中整段动画由单个暂停 GSAP 时间线驱动相机零移动。规则映射与源码级实现蓝图的rule mapping将每一个动作映射到技能库中的原子规则。以下逐条对照其完整实现。split-tilt-cards签名动作的 CSS 前提核心规则文档 split-tilt-cards.md 明确指出这个 3D 效果有三个必需前提场景根节点必须有perspectiveREQUIRED——没有它rotateY会退化成 2D 布局stage 和两张卡片都要有transform-style: preserve-3d阴影方向必须与倾斜方向一致左卡朝右 → 阴影落右符号取反会读作「坏掉的 3D」。CSS 骨架.scene-root { display: grid; place-items: center; perspective: SCENE_PERSPECTIVE; /* REQUIRED1000–2400px */ } .split-stage { display: flex; gap: STAGE_GAP; transform-style: preserve-3d; } .card { width: CARD_WIDTH; transform-style: preserve-3d; will-change: transform; } .card-left { box-shadow: -CARD_SHADOW_OFFSET CARD_SHADOW_DROP CARD_SHADOW_BLUR {shadowColor}; } .card-right { box-shadow: CARD_SHADOW_OFFSET CARD_SHADOW_DROP CARD_SHADOW_BLUR {shadowColor}; }入场采用fromTo显式声明起点保证 seek 到 t0 时状态正确每张卡从画面外滑入rotateY先过冲一个TILT_OVERSHOOT再回落到目标倾斜角——形成「枢轴就位」pivot-into-place的触感tl.fromTo( .card-left, { x: -ENTRY_SLIDE_DIST, rotateY: TILT TILT_OVERSHOOT, opacity: 0 }, { x: 0, rotateY: TILT, opacity: 1, duration: ENTRY_DUR, ease: power3.out }, LEFT_AT, ); tl.fromTo( .card-right, { x: ENTRY_SLIDE_DIST, rotateY: -TILT - TILT_OVERSHOOT, opacity: 0 }, { x: 0, rotateY: -TILT, opacity: 1, duration: ENTRY_DUR, ease: power3.out }, RIGHT_AT, );spring-pop-entrance徽章是「唯一的过冲」蓝图规定徽章使用spring-pop-entrance规则spring-pop-entrance.md并且刻意落在该规则的过冲寄存器上。这条规则的默认哲学是「smooth beats bouncy」常规入场默认power3.out无过冲back.out的弹跳被视为 Agent 生成视频的「头号劝退点」只允许在明确玩味的场景使用。而 comparison-split 中徽章正是那个被豁免的例外——「过冲挣得了标点」。实现时使用fromTo{ scale: 0, opacity: 0 }→{ scale: 1, opacity: 1 }使徽章在 t0 的 seek 帧下即是正确的折叠状态参考示例中缓动取back.out(1.7)符合规则中「OVERSHOOT ≤ ~2」的硬约束避免读作卡通式摇晃tl.to( #badge-left, { scale: 1, opacity: 1, duration: TIMING.badgeEntryDur, ease: back.out(1.7) }, TIMING.badgeLeftAt, // 1.67s ); tl.to( #badge-right, { scale: 1, opacity: 1, duration: TIMING.badgeEntryDur, ease: back.out(1.7) }, TIMING.badgeRightAt, // 2.00s左右相隔 ~0.33s );规则还强调徽章等浮动标签必须放在父容器上、绝不能放进卡片内部——放进卡片会继承rotateY而倾斜出轴split-tilt-cards.md 的 Critical Constraints 同样重申了这一点。sine-wave-loop相位相反的待机浮动蓝图的 idle 动作映射到sine-wave-loopsine-wave-loop.md取低振幅寄存器——微妙抖动而非「懒散呼吸」。关键约束是反相左卡sin(t)、右卡sin(tπ)两者永不进入同步传送带模式synchronized conveyor belt。规则提供了两种实现形式yoyo 形式独立属性、有限 repeat与 onUpdate 形式相位代理0 → 2π·CYCLES适合叠加复合变换。参考示例采用第三种等价做法——在时间线上放一个{ tick: 0 } → { tick: 1 }的贯穿全程的ease: nonetween在onUpdate中用tl.time()计算两卡的 y 与 rotation 偏移const lY Math.sin(t * TIMING.floatYSpeed) * TIMING.floatYAmp; // 6px const rY Math.sin(t * TIMING.floatYSpeed Math.PI) * TIMING.floatYAmp; // 反相 const lR Math.sin(t * TIMING.floatRSpeed) * TIMING.floatRAmp; // ±1° const rR Math.sin(t * TIMING.floatRSpeed Math.PI) * TIMING.floatRAmp; gsap.set(leftTilt, { rotationY: TIMING.baseTilt lR }); gsap.set(rightTilt, { rotationY: -TIMING.baseTilt rR });注意示例中浮动与入场被拆到两个嵌套 wrapper.card-pos管入场x/scale、.card-tilt管静态rotateY 浮动旋转这正是蓝图 rule mapping 中「保留两层拆分让入场的x/scale与 idle 永不在同一 alias 上打架」的落地方式。按规则默认值浮动振幅应保持在 2–3px此处取 6px、±1°处于允许上限附近sine-wave-loop同时警告若IDLE_DUR 6s或 idle 占整片超过 30%应将振幅减半、周期放缓并追加 settle-and-fade 收尾避免「片尾一切还在动」。ambient-glow-bloom双侧重度氛围光两张卡片背后的两团微弱侧光映射到ambient-glow-bloomambient-glow-bloom.md的「未触发软 bloom」形式——无需点击、无需词同步它在 hero settle 时绽放并保持。关键约束峰值不透明度 ≤ 0.45 硬顶默认 0.15–0.30否则会洗掉画面光晕必须在 hero 后方glowz-index: 1、heroz-index: 2光晕与 hero 必须作为同一节拍落定——BLOOM_START BLOOM_DUR应恰好对齐 hero 的 settle 帧否则读作两个独立事件光晕颜色应比所衬元素更暗更饱和同色相、同明度的光晕会融入表面而消失。参考示例将两团光晕合并进一个 overlay左 cyan 30%、右 green 70% 的 radial-gradient整体opacity: 0.13并叠加一个 vignette 收边正是该规则的静态落地。完整参考示例一段可运行的 5 秒对比镜头技能库提供了该蓝图的可运行 ground-truth 实现 comparison-split-cards.html1920×1080、总时长 5s三段 choreography 注释清晰。其关键结构如下可作为直接复用的起点。1. HyperFrames 组成契约composition rootHTML 根节点通过data-*属性声明组成信息动画运行时完全可 seekdiv idroot >window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); window.__timelines[main] tl;2. 双 wrapper 的 3D 卡片层级每张卡片采用「位置层 倾斜层」双嵌套配合独立的perspective与perspective-origin并设置相反方向的transform-origin左卡右缘、右卡左缘强化「翻开」轴心div classcard card-left idcard-left div classcard-pos div classcard-tilt div classcard-content div classcard-image!-- mock UI --/div div classcard-labelHTML Composition/div div classcard-subtitleTimed DOM clips, media, and motion/div /div /div /div /div对应 CSS.cards-row提供舞台级perspective: 980px与transform-style: preserve-3d.card-left .card-tilt { transform-origin: 100% 50%; }、.card-right .card-tilt { transform-origin: 0% 50%; }左右卡片的box-shadow分别落向 x 与 −x左30px 30px 60px、右-30px 30px 60px与倾斜方向匹配。3. 三阶段时间线阶段时间目标关键参数标题下落0.17–0.84s#titley −40→0, opacity 0→1power3.out左卡入场0.50–1.20s.card-posx −100→0, scale 0.8→1power3.outrotateY恒定 18°右卡入场0.83–1.53s.card-posx 100→0, scale 0.8→1晚于左卡 0.33srotateY−18°左徽章弹出1.67–2.17s#badge-leftscale 0→1back.out(1.7)全镜头唯一 overshoot右徽章弹出2.00–2.50s#badge-rightscale 0→1相隔 ~0.33s全程浮动0–5s两卡 y ±6px / rotation ±1°反相共享 scene-tickeronUpdate6 次gsap.set/帧入场前所有初始状态均用gsap.set显式声明标题{ opacity: 0, y: -40 }、卡片{ x: ∓slideDist, scale: 0.8, opacity: 0 }、倾斜{ rotationY: ∓18 }、徽章{ scale: 0, opacity: 0 }确保 seek 到任意时间点状态一致。参数速查表从蓝图到规则的 token 取值将 comparison-split.md 与 split-tilt-cards.md 的参数表合并得到可直接选值的速查token取值范围说明SCENE_PERSPECTIVE1000–2400px越小倾斜越夸张越大越接近等距投影TILT10–18°10° 近乎平面18° 会「合上书本」且文字透视模糊TILT_OVERSHOOT4–12°枢轴就位的触感STAGE_GAP40–120px约 0.06–0.15×CARD_WIDTH小 融合成一对大 对比但分离CARD_WIDTH480–820px 1920需满足2×CARD_WIDTH STAGE_GAP ≤ 0.95×stage全倾斜时ENTRY_SLIDE_DIST200–500px约 0.3–0.6×CARD_WIDTH入场滑距ENTRY_DUR0.6–1.2s入场时长RIGHT_ATLEFT_AT 0–0.3s0 显得机械过大撕裂成对感FLOAT_AMP3–8px「微妙」才是重点FLOAT_DURATION1.6–3.2s 往返呼吸节奏IDLE_START ≥ 入场结束COPY_REVEAL_AT入场收尾期间卡片静止后文字才出现会读作脱节GLOW_PEAK_OPACITY0.15–0.45硬顶超过会洗掉画面badge easeback.out(≤2)全镜头唯一 overshoot用于点题关键约束与常见陷阱综合蓝图与规则文档落地时需守住以下红线透视三层必备场景根节点perspective、stage 与每张卡transform-style: preserve-3d缺一不可阴影随倾斜走左卡朝右 → 阴影落右符号取反读作坏掉的 3D待机必须反相两卡浮动相位差 π同步即「传送带」徽章/浮动标签放卡片外放进卡片会继承rotateY而出轴每卡正文 ≤ 2 行倾斜后的长段落会塌缩成透视模糊对称权重同宽、同垂直中心、相近行数——不对称会破坏对比隐喻只允许一个 overshoot除徽章back.out外其余入场一律power3.out平滑落定遵守 HyperFrames 确定性契约单条暂停时间线、有限 repeat、无Math.random/Date.now、渲染时长取data-duration详见 SKILL.md 与 gsap.md。变体扩展在签名动作不变的前提下split-tilt-cards.md 提供了三条已验证的变体路径徽章/浮动标签置于 PARENT 而非卡片内已在上面强调3 卡片中间卡保持平直rotateY: 0两侧外卡向内倾斜——形成「旧方式 / 空白 / 我们的方式」的三段式Zoom-through用独立的相机 tween 缩放.split-stage读作「观众穿过倾斜双卡之间的缝隙」后续衔接对比对完成后可交由card-morph-anchor将双卡融合为统一形态或以counting-dynamic-scale让数字成为每侧标题见规则文档 See also 部分。从技能库路由看加载该蓝图的正确姿势是先读 blueprints-index.md 定位 shape再打开 comparison-split.md 实例化最后参考 comparison-split-cards.html 作为可运行 ground-truth——这也正是本文所走通的完整链路。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考