HyperFrames cta-morph-press 蓝图全解同中心 Morph 与拟真点击按压的 CTA 收尾动画【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文聚焦 HyperFrames 动画技能库skills/hyperframes-animation/SKILL.md中的cta-morph-press蓝图讲解品牌标识 → 同一屏幕中心收缩变为更小更亮的 CTA → 光标入场完成一次拟人化点击这一完整镜头模板。你将掌握其四幕分镜的时间轴编排、运动词汇、底层规则映射scale-swap、物理按压、光标减速入场等以及仓库内完整可运行示例 examples/cta-morph-press.html 的逐行实现并理解如何在CTA 收尾与Hook 开场widget-morph 变体两种场景下实例化它。一、蓝图定位它解决什么问题cta-morph-press是 HyperFrames 动画技能库中 22 个时间编码镜头模板blueprint之一定义于 blueprints/cta-morph-press.md。蓝图的意图intent非常明确一个静止的品牌标识在同一屏幕中心收缩成一个更小、更亮的 CTA随后一个光标从画面外抵达并完成一次人类瞄准的点击。观众的视线被引导从这是我们是谁走到这是你要做什么。Morph 与点击是两大头条节拍。这类蓝图与原子规则rules的区别在于规则是单一动作配方蓝图则是覆盖整条镜头时长4–6 秒的多阶段编排模板节奏对齐口播而非在 t0 一次性倾泻内容。cta-morph-press的模板编码为四个场景段每一段都有明确的起止时间、[slots]占位与一个招牌动作signature move——即同中心 condense morph。1.1 服务的角色roles served角色来源适用描述CTA收尾本蓝图cta-morph-press当镜头要从品牌身份收束到单个用户动作时两个元素先后共享同一中心是 morph 而不是 cut落点是带物理反馈的模拟点击。适合做聚焦的click here收尾——没有空间布景、没有多步 UI。Hook开场角色扩展来自widget-morph-on-blank-field模板同样的机制倒置运行作为开场一个孤立的[widget]pill/chip 组合在平铺场地上原地变形、执行其 payload然后消失到一帧干净画面由输入的[title]收束。点击如有点燃morph 而非结束它甚至可以完全没有光标。蓝图明确划出了与cursor-ui-demo的边界本蓝图不做空间布景、不做多步 UI 演示那是 blueprints/cursor-ui-demo.md 的职责。它是一次一个中心、一个动作、一次点击的收束表达。1.2 时长与结构概览CTA 版本4–6 秒Hook widget-morph 开场版本5–7.5 秒镜头跑在一块[bg]画布上hero 与 CTA 是flex 居中的兄弟节点共享同一个transform-origin——这是整个 morph 成立的物理前提详见第三节。仓库中cta-morph-press蓝图还承载了一条铸造再考量mint-reconsideration触发规则如果未来挖掘出 2 个以上vanish → 输入型 title 收束的 widget-morph 开场就把该变体提升为独立蓝图此时节拍顺序已被完全倒置。二、四幕分镜结构从身份到动作蓝图为 CTA 版本定义了四个时间编码场景shot structure仓库示例将其落地为 5.5 秒总时长TOTAL_DUR 5.5。Scene 10.0–约 1.4s——存在感presence[hero mark / brand lockup]占据正中心活着但静止——只有标记上极微弱的旋转呼吸下方若有标题文字则保持绝对稳定。相机静止。关键约束呼吸只作用于标记logo本身不作用于整个 hero 组合。原因写在示例文件头注释里呼吸旋转只放在 logo 上不放在整个 hero 上——避免与 morph 退场时的 scale tween 冲突。因为 Phase 2 的 morph 要对整个 hero 做scale收缩若同时叠加在 hero 层上的呼吸 scale两个变换会打架。Scene 2约 1.4–2.4s——Morph招牌动作Hero在同一屏幕中心收缩为一个更小、更亮的[CTA]按钮/卡片出去的 mark 收缩淡出shrink-fade的同时CTA 在它原来的位置上放大出现scale-up。因为二者共享同一个transform-origin观众的眼睛读到的是一次同一个元素的形变而不是一次换人swap。Scene 3约 2.4–3.4s——靠近approach[cursor]从画面外沿一条减速decelerating路径抵达——它是抵达而非路过——并落在 CTA 几何中心偏移几像素的位置上使瞄准读起来像人、不像脚本。Scene 4约 3.4s–结束——按压press光标落下一次有物理感的 CLICK——光标与 CTA同步lockstep压缩随后释放并带出反馈可选的涟漪 / 辉光 bloom。最后停留在被点击的状态上climax dwell ≥ 1s。2.1 示例实现中的时间轴常量仓库示例 examples/cta-morph-press.html 用一段TIMING常量把上述四幕精确量化也是蓝图模板的推荐取值区间常量值对应幕次introStart/introDur0.17s / 0.47sScene 1 入场hero 淡入 y 上升power3.outmorphAt/morphExitDur/morphFadeDur/morphEntDur2.17s / 0.5s / 0.15s / 0.45sScene 2 morphhero 收缩至 0.6 快速淡出CTAback.out(2)过冲入场textRevealAt/textRevealDur2.33s / 0.33sCTA 容器可识别后文字再淡入上浮cursorEnterAt/cursorPathDur2.83s / 1.0sScene 3 光标从屏外右下角硬切入power2.out减速靠近clickDownAt/clickDownDur3.83s / 0.15sScene 4 按下光标 CTA 同步压到1 - 0.1clickUpAt/clickUpDur4.17s / 0.25s释放二者同步回弹到 scale 1.0注意蓝图给出的是节拍区间如 Scene 2 在约 1.4–2.4s示例实现按 5.5s 总长做了适配morph 放在 2.17s。实例化时应以口播节奏为准微调但节拍顺序与相对关系不可颠倒。三、Hook 变体widget-morph 开场节拍倒置同一套机制作为开场运行时节拍顺序完全倒置press 先行 → morph 次之 → title 收尾。这是从widget-morph-on-blank-field模板反向工程来的角色扩展ROLE-WIDENED变体。存在感presence一个孤立的[pill / chip lockup]居中坐在平铺的[field]上可选地[cursor]滑入、chip 背后出现 hover pill 背景、点击以同样的 lockstep press 落下。Morphwidget原地变形——沿顶边锚定向下扩展成一个[menu]或弹簧形变外扩成一张[prompt card]带小幅过冲回落新内容淡入/滑入就位。Payload变形后的状态执行其功能——[placeholder]带闪烁光标输入、[user text]输入的同时控件颜色从 muted 翻转为 vibrant 活跃色或菜单 snap 收回成 pill 并携带[new value] 对勾弹出背景可在持久前景卡片下 snap 到新颜色。收束resolvewidget消失一帧干净的画面结束节拍——[closing title]居中输入或停留在翻转后的纯色上。这个变体的触发场景是产品 Hook 本身就是一个 widget 做一件事——依然没有空间布景、没有多步 UI。蓝图中留了一条演进提示若未来挖掘出 2 个以上vanish → 输入型 title 收束的同构开场此变体将升级为独立蓝图。四、运动词汇这个蓝图的动来自哪里cta-morph-press的运动词汇motion vocabulary可以拆成两组CTA 版本基础词汇仅旋转的静止呼吸限定在 logo 范围内低幅度抖动而非 scale 呼吸同中心 morph-swapshrink-fade ↔ scale-up共享transform-origin光标从画面外减速抵达偏离中心的拟人瞄准lockstep 按压压缩光标与 CTA 同步释放反馈涟漪 / 辉光 bloom。Hook 开场变体附加词汇pill 沿顶边锚定向下展开成 menu 弹簧 snap 收回chip → 卡片 spring morph带过冲回落placeholder / 用户文本打字机效果 闪烁光标允许句中截断控件颜色翻转 muted → vibrant持久前景卡片下的背景颜色 snap对勾弹出widget 消失到空白帧输入型收尾标题。五、规则映射从蓝图到原子规则的调用链蓝图的价值在于它把每一处动作显式映射到技能库中的原子规则rule mapping这也是在 HyperFrames 中复用的正确姿势——从 rules-index.md 挑选 2–4 条规则、用一条暂停的 GSAP timeline 粘合。下表是蓝图内置的映射动作映射规则hero → CTA 同中心 condensescale-swap-transition静止 hero 的活气仅旋转、低幅sine-wave-loop光标 CTA lockstep 按压释放physics-press-reactionPRESS_DOWN RELEASE光标减速靠近off-stage、偏心落点、opacity 硬切gsap-effectspower2.out位移点击涟漪 / 释放辉光cursor-click-rippleattack-decay 环和/或 ambient-glow-bloom释放 bloomHookchip → prompt card 单中心 spring morphscale-swap-transition扩展方向运行 card-morph-anchor圆角/表面随动Hook锚定边扩展 / snap 收回pill ↔ menu顶边固定anchored-layout-expandHookplaceholder 用户输入、闪烁光标、句中截断gsap-effects打字机 context-sensitive-cursor闪烁 discrete-text-sequence句中截断状态Hook控件颜色翻转 muted → vibrantpress-release-springcolor-transition 变体Hook对勾弹出 / 卡片到达过冲spring-pop-entranceHookhover pill 背景 点燃点击直接沿用基础映射physics-press-reactioncursor-click-ripple5.1 Morph 的地基scale-swap-transition蓝图特别强调共享transform-origin: 50% 50%是 morph 成立的唯一关键CTA 必须position: absolute这样在短暂重叠期不会把 hero 挤走。这条规则在 rules/scale-swap-transition.md 中有完整的配方与约束出场scale1.0 → EXIT_SCALE opacity1 → 0power2.in快速退场入场scaleEXIT_SCALE → 1.0 opacity0 → 1back.out(BOUNCE_FACTOR)带重量抵达重叠窗OVERLAP0.1–0.2s双方都处于 tween 中时 morph 幻觉成立0.3s会明显看到两个元素并存不再像 morph0.05s会露出可见的空隙关键约束入场元素 z-index 必须在出场元素之上否则出场元素 0.3–0.5 的淡出尾巴会透出造成双曝光两个元素position: absolute; inset: 0放在同一个固定尺寸 wrapper 内不要在淡出后display: none出场元素——保持opacity: 0以免布局回流内层内容必须在容器落定后再显现0.2–0.4s 延迟且最终状态 副标题落定后climax dwell ≥ 1s。取值区间规则自带 Values 表token范围说明EXIT_DUR0.3–0.5s出场收缩时长ENTER_DUR0.45–0.7s必须长于EXIT_DUR让过冲能回落OVERLAP0.1–0.2s重叠窗morph 幻觉的来源EXIT_SCALE0.6–0.8过小会读成消失而非变形BOUNCE_FACTOR1.4 柔 / 1.8 硬 / 2.2 卡通只用在入场元素上示例实现正是这样做的hero 在 0.5s 内scale: 0.6power3.out 0.15s 内 opacity 归零随后用tl.set把 hero 平移到x: -4000移出画面CTA 在同一触发点以back.out(2)从scale: 0弹入scale: 1。5.2 拟真按压physics-press-reaction点击感的核心是 rules/physics-press-reaction.md 的PRESS_DOWN RELEASE两段式。它建模的是一次真实点击光标先落位然后双方以单个 targets 数组同步压缩// 按下同一个 targets 数组同一个 scale tl.to( [#cta, #cursor], { scale: 1 - PRESS_INTENSITY, duration: PRESS_DOWN_DUR, ease: power1.in }, PRESS_DOWN_AT, ); // 释放一起弹簧回弹 tl.to( [#cta, #cursor], { scale: 1, duration: RELEASE_DUR, ease: back.out(${BOUNCE_FACTOR}) }, RELEASE_AT, );规则强调的约束与示例一一对应PRESS_INTENSITY0.05 轻 / 0.10 标准 / 0.15 重示例用 0.1压到 scale 0.9光标必须先于按压抵达示例中clickDownAt(3.83) cursorEnterAt(2.83) cursorPathDur(1.0)分毫不差——否则按压悬空无主同一 targets 数组保证二者 tween 值完全一致示例注释明确写道Press synchronization uses single GSAP target array to guarantee perfectly identical tween values——只压按钮光标会像点在空气上只压光标按钮会显得脱节释放必须用back.out(BOUNCE_FACTOR)示例power2.out释放才能保留触感光标 SVG 的transform-origin: 0 0箭头尖端才是点击点围绕尖端缩放才稳定pointer-events: none没有真实的mouseenter/click事件——HyperFrames 是渲染上下文一切都由 timeline 驱动。按压时长区间PRESS_DOWN_DUR0.1–0.25sRELEASE_DUR0.4–0.7s足够过冲回落按压后组合必须继续停留 ≥1sclimax dwell让观众有时间看到点击结果。5.3 光标到达感硬切入场 减速路径示例中光标的处理有两处细节值得注意opacity 用 0.001 秒的fromTo硬切——光标是出现而不是淡入的。示例注释0.001 s tween creates a step change that scrubs correctly在时间轴拖动/seek 时也能正确表现硬切。落点偏离几何中心目标点是(W/2 120, H/2 50)即画布中心右侧 120px、下方 50px。示例注释Spring-driven approach to a target slightly offset from center (where a human would naturally aim — not dead-center)——这正是蓝图off-center human aim的落地。5.4 释放反馈涟漪与辉光点击释放的反馈由两条规则可选叠加cursor-click-ripple从点击点发出 1–3 个 attack-decay 扩张环RIPPLE_SCALE3–6、RIPPLE_STAGGER0.06–0.12s环从 t0 就存在于 DOM位于点击目标中心scale: 0opacity: 0用immediateRender: false保持隐形直到触发ambient-glow-bloom释放时的 bloom。注意它的纪律峰值 opacity硬上限 0.45且辉光在 hero 之后、hero 在前glowz-index: 1heroz-index: 2glow 颜色要比被衬元素更深更饱和否则会消失在表面里。5.5 Hook 变体的扩展规则锚定扩展pill ↔ menuanchored-layout-expand 的定律是——在 CSS 中按最终展开状态排布再用 transform 伪装折叠态。mask 高度是 CSS 常量、永不 tweensheet 与下方内容#below共用同一条 tween从y: -BODY_H → 0接触边永不分离。注意data-layout-allow-overflow是hyperframes check布局门的豁免标志折叠态把 sheet 藏在 mask 盒外是有意为之。GROW_DUR0.35–0.6s收起 0.2–0.35spower3.in关闭要更快。chip → 卡片 spring morphscale-swap-transition的扩展方向运行 card-morph-anchor做圆角/表面随动卡片到达过冲用 spring-pop-entrance。打字机 光标闪烁 句中截断gsap-effectstypewritercontext-sensitive-cursorblinkdiscrete-text-sequencemid-word cut 状态。控件颜色翻转press-release-spring的 color-transition 变体muted → vibrant。背景颜色 snap是元素级 snap见第七节相机修改器不是相机事件。六、实战完整可运行示例逐行拆解仓库在 examples/cta-morph-press.html 提供了一版可直接运行的 ground-truth 实现标题为 Scene 10 — HyperFrames Morph Press Interact1920×10805.5 秒。它也是 HyperFrames 组合composition契约的标准示例。6.1 DOM 骨架与数据属性div idroot>gsap.set(#hero, { opacity: 0, y: 40 }); // hero从下方淡入 gsap.set(#cta, { scale: 0, opacity: 0 }); // CTA初始不可见由 morph 弹入 gsap.set(.cta-text, { opacity: 0, y: 10 }); // CTA 文字稍后显现 gsap.set(#cursor, { x: W 100, y: H 200, scale: 1, opacity: 0 }); // 屏外右下所有初始状态都在 timeline 运行前由gsap.set一次性设定——这是 HyperFrames 确定性契约的要求见第七节tween 期间不做任何 DOM 测量。6.3 Phase 1入场 正弦呼吸tl.to(#hero, { opacity: 1, y: 0, duration: TIMING.introDur, ease: power3.out }, TIMING.introStart); const logoEl document.querySelector(#hero-logo); tl.to({ tick: 0 }, { tick: 1, duration: TOTAL_DUR, ease: none, onUpdate: function () { const t tl.time(); gsap.set(logoEl, { rotation: Math.sin(t * 1.0) * 4 }); } }, 0);呼吸用的是 sine-wave-loop 的onUpdate 形式Form 2一条ease: none长 tween 驱动相位onUpdate读tl.time()把Math.sin(t) * 4写成旋转。±4°、约 6.3s 一个周期在 5.5s 组合里不足一个周期——subtle but alive。注意该规则的反模式提示不要用 CSSkeyframes做 idle——CSS 动画跑在浏览器渲染时钟上与 HyperFrames 的 seek 时钟无关会闪烁/失步idle 必须由 timeline 驱动。6.4 Phase 2同中心 scale-swap morph// (1) hero 收缩 tl.to(#hero, { scale: 0.6, duration: TIMING.morphExitDur, ease: power3.out }, TIMING.morphAt); // (2) hero 快速淡出收缩时长的 30% tl.to(#hero, { opacity: 0, duration: TIMING.morphFadeDur, ease: power2.out }, TIMING.morphAt); tl.set(#hero, { x: -4000 }, TIMING.morphAt TIMING.morphFadeDur); // (3) CTA 过冲弹入 tl.to(#cta, { scale: 1, opacity: 1, duration: TIMING.morphEntDur, ease: back.out(2) }, TIMING.morphAt); // (4) CTA 文字在容器可识别后再显现 tl.to(.cta-text, { opacity: 1, y: 0, duration: TIMING.textRevealDur, ease: power2.out }, TIMING.textRevealAt);注释里标注了每段对应的 spring 参数power3.out≈spring(stiffness:150, damping:18)back.out(2)≈spring(stiffness:200, damping:15, mass:0.6)——方便迁移到其他运行时而无需猜手感。淡出后把 hero 平移出屏x: -4000是出于布局/可见性管理属于时间轴内的显式 set。6.5 Phase 3光标硬切 减速靠近tl.fromTo(#cursor, { opacity: 0 }, { opacity: 1, duration: 0.001, ease: none }, TIMING.cursorEnterAt); tl.to(#cursor, { x: W / 2 120, y: H / 2 50, duration: TIMING.cursorPathDur, ease: power2.out }, TIMING.cursorEnterAt);power2.out即蓝图decelerating path的落地W/2 120, H/2 50是偏心的拟人落点。6.6 Phase 4lockstep 按压tl.to([#cta, #cursor], { scale: 1 - TIMING.pressIntensity, duration: TIMING.clickDownDur, ease: power3.out }, TIMING.clickDownAt); tl.to([#cta, #cursor], { scale: 1.0, duration: TIMING.clickUpDur, ease: power2.out }, TIMING.clickUpAt);一条[#cta, #cursor]的 targets 数组同时驱动二者pressIntensity: 0.1保证压缩值逐帧完全相同。释放后组合停留至 5.5s 结束dwell ≈ 1.1s满足点击后停留 ≥1s的约束。6.7 用动画地图审计编写完成后可以用技能库自带的审计脚本检查编排质量node skills/hyperframes-animation/scripts/animation-map.mjs composition-dir \ --out composition-dir/.hyperframes/anim-map该脚本读取注册在window.__timelines上的所有 GSAP timeline枚举 tween、采样 bbox、计算标志位并输出animation-map.json用于发现死区、stagger 一致性问题和生命周期告警详见 SKILL.md。七、相机与确定性为什么这里必须静止7.1 camera modifiercamera-static蓝图明确要求相机修改器为camera-staticmorph 与点击都发生在元素空间里一次相机运动将与作为高潮的点击争夺注意力。Hook 开场变体沿用同一契约——连背景颜色翻转都是元素级 snap不是相机事件。这让整个镜头可以落在纯 DOM/GSAP 层无需引入 3D 相机能力。7.2 确定性契约核心约束从 SKILL.md 引用的 hyperframes-core 非协商规则结合示例可以归纳出本蓝图落地时必须遵守的约束单条暂停的 timeline示例通过gsap.timeline({ paused: true })创建并挂到window.__timelines[main]由 HyperFrames 渲染器统一 seekdata-duration决定总长禁止Math.random/Date.now/performance.now禁止repeat: -1禁止在async/setTimeout/Promise内构建 timeline不做display/ 原始visibilitytween用autoAlpha或显式时间轴边界的零时长可见性 set预计算布局常量绝不从getBoundingClientRect()在 tween 时推导位置渲染器并行采样会导致失步坐标在组合设置时算一次并复用空间运动只用 GSAP transform 别名x/y/scale/rotation非空间属性可用opacity/color/backgroundColor/borderRadius但永不用width/height/top/left做布局变化。示例中所有坐标W/2 120、H 200等都是常量表达式正是这一契约的体现。八、参数速查表将蓝图、示例与相关规则的关键取值合并如下便于实例化时直接查用参数建议值来源总时长CTA / Hook4–6s / 5–7.5s蓝图hero 入场0.17–0.5spower3.out示例呼吸旋转幅度 / 周期±4° / ~6.3s低幅仅 logo示例 sine-wave-loopmorph 触发点入场落定 存在感停留后scale-swap-transitionEXIT_SCALE/EXIT_DUR0.6–0.8 / 0.3–0.5s示例 0.6 / 0.5s规则 示例ENTER_DUR/ ease0.45–0.7s /back.out(1.4–2.2)规则OVERLAP0.1–0.2s规则光标入场方式opacity 0.001s 硬切 power2.out位移示例光标落点目标中心偏移数 px示例 120/50蓝图PRESS_INTENSITY0.05 轻 / 0.10 标准 / 0.15 重physics-press-reaction按下 / 释放时长0.1–0.25s / 0.4–0.7sphysics-press-reaction点击后 dwell≥ 1s两规则共同要求涟漪环1–3 环RIPPLE_SCALE3–6stagger 0.06–0.12scursor-click-ripple辉光峰值 opacity0.15–0.30硬上限 0.45ambient-glow-bloom光标尺寸1080p48–96px示例 120px 方形容器physics-press-reaction锚定展开 / 收起0.35–0.6s / 0.2–0.35sanchored-layout-expand九、决策指引什么时候用这个蓝图结合 blueprints-index.md 的角色菜单CTA 收尾品牌标记在同中心收缩成 CTA 一次拟人点击——a brand mark that condenses into the CTA at one center, then a cursor lands a human-aimed clickHook 开场孤立的 pill/chip 在平铺场地上原地变形、执行 payload、消失到输入型标题——one widget doing one thing明确不做空间布景、多步 UI 流程那是cursor-ui-demo纯打字机/无点击的收尾那是typewriter-revealwatch me ask式输入演示那是prompt-type-submit-generate。实例化步骤遵循技能库的通用方法先在 blueprints-index.md 找到镜头角色对应的蓝图 → 打开本蓝图读取时间编码模板与[slots]→ 选择姿势Reproduce槽位直接映射/Adapt结构合适、内容表面不同保留招牌动作/Compose都不合适则从运动词汇组装。默认路线仍是从 rules-index.md 挑选 2–4 条规则直接组合蓝图在有现成多阶段编排需求时加载。十、延伸阅读蓝图原文skills/hyperframes-animation/blueprints/cta-morph-press.md可运行示例skills/hyperframes-animation/examples/cta-morph-press.html规则层入口skills/hyperframes-animation/rules-index.md核心规则scale-swap-transition、physics-press-reaction、cursor-click-ripple、sine-wave-loop、ambient-glow-bloom、anchored-layout-expand蓝图菜单与角色映射skills/hyperframes-animation/blueprints-index.md动画技能总纲与运行时可选项skills/hyperframes-animation/SKILL.md相邻蓝图cursor-ui-demo审计工具skills/hyperframes-animation/scripts/animation-map.mjs【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考