HyperFrames device-surface-showcase 蓝图详解：设备样机与悬浮窗口的产品展示镜头

HyperFrames device-surface-showcase 蓝图详解：设备样机与悬浮窗口的产品展示镜头

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

导读

device-surface-showcase是 HyperFrames 动画技能库（skills/hyperframes-animation）中 22 个蓝图之一，用于"一个产品表面成为画面英雄、其内部屏幕沿着真实流程逐帧推进"的镜头设计——典型场景是设备样机（device mockup）或悬浮浏览器/应用窗口（floating window）作为主角，配以从静态持机到连续 3D 推进的相机运动。读完本文，你将掌握该蓝图的五条机制变体（static-tour、floating-window、3d-hand、stepwise-flow、showcase-carousel）、它们的场景分镜与时长预算、每个动作动词背后对应的原子 motion rule，以及调用check布局审计时必须处理的 overflow 约束。该蓝图服务于Key_Feature（在真实界面中"体验"一个功能）与Product_Intro（通过"完成核心闭环"来介绍产品）两种叙事角色，是产品发布视频中出镜率最高的形状之一。

蓝图定位：什么时候选择 device-surface-showcase

在 blueprints-index.md 的角色→蓝图菜单中，device-surface-showcase的服务角色与触发条件如下：

• Key_Feature（feature_showcase）——设备/窗口成为英雄，其屏幕循环切换（static-tour · floating-window push-scroll · 3d-hand demo）时选择它；它展示的是"功能在真实界面内部被体验"，而不是罗列功能卡片（那是grid-card-assemble）或追逐光标走完流程（那是cursor-ui-demo）。
• Product_Intro（product_intro）——通过 stepwise-flow 变体实现：一个无光标的端到端流程（setup/auth → action → success）在保持不动的表面内完成，前后以标题卡收束，用"完成产品核心闭环"而非"巡览屏幕"来介绍产品。

按 SKILL.md 的默认方法论，90% 以上的运动工作建议直接组合 2–4 条原子规则（见 rules-index.md）加一条暂停的 GSAP 时间线；只有当你需要一个已设计好的、时间编码的多阶段镜头模板时，才读取蓝图。蓝图的价值在于：它是从 178 个黄金产品发布片段中逆向工程出来的时间编码镜头模板——Scene N (a–b s): …加[slots]槽位加一个命名的 signature move，揭示了与口播台词对位的节奏，而不是在 t=0 一次性倾倒内容。

镜头总骨架：一个持久的表面 + 相机移动

蓝图的整体结构可以用一句话概括：一个产品表面——[device mockup]或[floating browser/app window]——是[styled backdrop: gradient / radial / stylized 3D void]上持久的主角；它的[screens/sections]沿着真实[product flow]循环切换，同时一个展示型相机（静态持机、推近→拉远、或一次连续推进）来呈现它。每个屏幕状态保持约 1.0–1.5s。

三幕分镜结构：

• Scene 1（0.0–约 1.5s）：表面建立（ESTABLISHES）——[从边缘滑入 / 从倾斜中漂入 / 从全幅标题卡溶解]并落定，[accent shape 或 backdrop]在其后成形；第一个[screen]可见，展示相机开始移动。
• Scene 2（约 1.5s–约 Xs）：表面在自身表面被操作（OPERATED）——一次[tap/select/scroll]触发第一次屏幕推进：旧内容[推出 / 上滚]，新[screen/section][拉入 / 从侧面推入]；同时[label / header word / side headline]更新，相机继续移动。
• Scene 3+（约 Xs–结束，重复[2–4 个屏幕节拍]）：表面推进经过连续[screens/sections]，每次都是与表面流程同步的离散交换或滚动，而次级文案[swap out-up / in-up]或保持标记以维持阅读位置。在最终[screen]上定格（或按变体绽放消失）。

时长预算：整体 5–11.3s。按变体拆分：page-scroll-spotlight 5–9s · floating-window 7.8s · 3d-hand 7.9s · in-device approval 7.9s · stepwise-flow 8.5–9.4s · device-tour 9.6s · showcase-carousel 11.3s。每个屏幕状态约 1.0–1.5s 是阅读节奏的下限。

五种机制变体详解

蓝图是机制驱动的：五个变体的角色（role）相同，差异全在MECHANIC（机制）上。下面逐一拆解。

变体一：static-tour（静态巡览，9.6s）

源自key-feature-device-screen-tour。核心特征是相机全程纹丝不动——所有运动都是元素/UI 层级的：

• [device mockup]从画外滑入并落定（ease-out）；[accent-color shape]在其后缩放成形（spring overshoot）。
• 一次点击压缩按钮（95%→100%），UI 滚动/切换到下一视图（旧内容推出、新内容拉入）。
• 每屏[side headline]在设备旁交换（旧的上滑+淡出，新的上滑+淡入）。
• 最终屏定格。无相机移动，无光标。

在相机范围中，static-tour 是"地板"（floor）——viewport-change保持在 scale 1 或干脆省略，正是它把 device-tour 与其他变体区分开来。

变体二：floating-window（悬浮窗口，7.8s）

源自key-feature-floating-window-scroll。其结构是"标题卡开场 → 单次推入→拉出弧线"：

• 开场：全幅[title card]（中央一个小[icon]画出、下方[feature name]；约保持 2s），然后溶解为一个漂浮在[vivid gradient]上的[macOS 风格浏览器/应用窗口]（交通灯 +[URL pill]+ 标签页；左导航、中央内容、右侧[sidebar]）。
• 推入：相机向[target region/sidebar]推近（活动项以[accent]高亮，一个光标沿列表向下漂移）。
• 拉出：相机拉远重新取景整个窗口，同时内容滚动经过[sections]，[highlighted item]保持标记。
• 一次"推入→拉出"弧线，由标题卡开场门控（gated）。

变体三：3d-hand（3D 手势演示，7.9s）

源自key-feature-3d-device-hand-demo。这是完全 3D的变体，也是全技能库标注的"超纲特殊项"：

• 一个[3D device]在[stylized 3D void / bloom + particles]中漂入，开场倾斜并自旋面向镜头，一次连续的前推相机随之开始（无剪辑）。
• 一个光泽的[3D hand]从底部前景升起，用手势驱动表面：滑动滚动[picker/sidebar panel]中的[option cards]，点击[option]（同时[header word]原地字母翻转）。
• 选择生效——[new layout]从中心生长填满设备正面，导航翻转，[marquee]水平滚动；手再次滑动把页面向上滚过[sections]，然后漂出。
• 相机从不停止推进；明亮的设备正面持续向镜头生长，直到**绽放（BLOOMS）**成[light]水洗——一个"穿越缩放"的 portal 出口填满画面。

变体四：stepwise-flow（分步流程，8.5–9.4s；in-device 子模式 7.9s）

源自stepwise-flow-completion，是蓝图拓宽到Product_Intro的变体。无光标的端到端流程——表面以叙事弧线完成[setup/auth → action → success]：

• 开场：[title card]在环境渐变上淡入淡出（或一个[command]在终端字段上逐字符打出）。
• 流程表面到达（手机样机放大滑入并落定 / 带边框的日志面板替换命令），步骤 1 通过快速连续弹出完成——[OTP digits]从左到右填格并以绿色对勾收尾，或[log steps]自顶向下弹出并高亮 token，以尾随点号等待状态结束。
• 状态推进：横向滑动（旧内容左出、新内容右入、chrome 保持）或暗→亮场景切换进入白色[detail/confirm card]，其元素错落进场。
• COMMIT（提交）：[CTA button]被按下（按压下沉 / spinner "Processing"），[success state]以对勾列表呈现；in-device 子模式下提交执行生物识别仪式：暗色遮罩、[squircle]弹簧弹出、图标周围画圈、图标变形为对勾并定格；仅在状态切换瞬间触发轻微相机推入（相机为提交"断句"，然后重新锁定）。
• EXIT：表面离开，收尾[title cards]弹出并从容缩小——表面在尾声前退出而不是保持定格。相机其余时间静止。此变体的持久英雄是"流程"本身，而非单一表面：终端面板可以整体交接给确认卡片。

变体五：showcase-carousel（广度轮播，11.3s）

源自showcase-carousel，静态相机，两个表面按序列出现在缓慢漂移的[pastel mesh gradient]上，由居中的插入式[claim words]（淡入+轻微放大、淡出）门控：

• Act 1：白色[widget card]放大进入，翻转为倾斜的垂直 widget 并循环[N brand skins]（每个约 0.8s）——共享同一布局、每皮肤内容和强调色交换——同时下方大号[brand logo]随每次翻转交叉淡入；widget 缩小退场。
• Act 2：[phone frame]超大倾斜进入，居中直立；完整[app screens]向左滑过它（每个约 1s），最后一个定格。
• 屏幕循环是广度轮播而非流程——无点击、无光标、无相机。

动作词汇表（motion vocabulary）与规则映射

蓝图附带一份完整的动作词汇表。核心动词包括：surface establish（边缘滑入+落定 / 倾斜漂入+自旋对镜头 / 标题卡溶解）、accent shape 在表面后弹簧成形、元素级屏幕循环（scroll-swap、push-in-from-side、scale-swap）、按钮点击压缩、错落侧标题揭示+文案交换（out-up / in-up）、原地头部词字母翻转、渐变上悬浮浏览器窗口的空闲浮动、全幅标题卡开场（icon draw-in + label）、区域相机推入、相机拉出重新取景、内容滚动穿过、一次连续 3D 相机跟拍推进（无剪辑）、3D 设备漂移+自旋、风格化环境 bloom/粒子、3D 手入场+滑动滚动+点击（手势驱动）、picker 面板滑入、模板应用"从中心生长"、水平 marquee 滚动、手势驱动页面滚动、缩放穿过 bloom/portal 出口、以及作为相机范围地板的静态持机。

每条动作动词都有对应的底层规则（见 rules-index.md 的完整目录），核心映射如下：

动作动词	底层规则	说明
屏幕循环（表面内 UI/区块滚动）	3d-page-scroll	网页/应用作为倾斜卡片、内容translateY滚动到区块；是表面屏幕流的主要机制
悬浮窗口建立 + 倾斜/悬浮 UI 卡片	3d-page-scroll+ css-3d-transforms	倾斜/透视取景 +perspective/translateZ深度
屏幕/侧文案状态交换	discrete-text-sequence	离散屏幕状态；侧标题按节拍换内容
原地头部词字母翻转（3d-hand）	hacker-flip-3d	逐字符 3D 旋转 + 确定性字形替换
屏幕交换为协调的缩小退出/弹出进入	scale-swap-transition	同形状状态交换
模板应用"新布局从中心生长填满表面"（3d-hand）	center-outward-expansion	簇集于中心 → 展开填满
表面在状态间变形 / 标题卡→窗口溶解	card-morph-anchor	眼睛锚定的过渡（形状变化）
按钮点击压缩（95%→100%）	press-release-spring（重按用physics-press-reaction）	线性压缩 + 弹簧恢复
悬浮窗口光标点击高亮列表项	cursor-click-ripple	光标移动+点击+涟漪
活动侧栏/列表项的强调高亮弹出	asr-keyword-glow	焦点项上的强调辉光
光标沿侧栏列表下移（floating-window）	camera-cursor-tracking	平面光标漂移；与推入配对
悬浮浏览器窗口空闲浮动 / 3D 设备漂移呼吸	sine-wave-loop	有界正弦空闲
3D 设备漂移 + 自旋对镜头 + 透视深度	css-3d-transforms或3d.md技术（真 Three.js/R3F 设备）	见相机修饰器
水平[marquee]滚动（3d-hand）	viewport-change（PAN 模式）	薄适配；字面 CSS marquee 更接近 gsap-effects/CSS 配方
3D 手入场 + 滑动 + 点击作为交互驱动	flagged special	见下文"超纲特殊项"
缩放穿过 bloom/portal 出口	flagged special	见下文"超纲特殊项"

stepwise-flow 的增量映射：

动作	底层规则
打出终端命令 / 非线性日志文本	discrete-text-sequence（打字 + 阈值状态替换），配合 dynamic-content-sequencing 按内容长度计算每步窗口
顺序自上而下日志弹出 / OTP 数字从左到右弹出 / 错落确认卡构建	spring-pop-entrance（错落组形式；日志行用低过冲）
尾随点等待状态	sine-wave-loop（有限重复；共享相位上步进 3 个点的透明度）
带持久 chrome 的横向屏幕滑动	屏幕循环映射（剪裁表面内3d-page-scrolltranslateX 形式）；chrome 位于滑动层之外
通知横幅弹簧进入 / squircle 弹出（in-device）	spring-pop-entrance
锁屏淡出/模糊消失 + 卡片扩展填满设备正面	card-morph-anchor（统一缩放容器变形——绝不补间 width/height）+ depth-of-field-blur（模糊消失）
提交同步微推入（相机为 Approve/点击断句再重新锁定）	multi-phase-camera（在状态切换处放置单个短推入阶段）
按钮按压下沉 + 填充翻转 / Approve 按下弹簧恢复	press-release-spring（填充翻转是其颜色过渡变体）
spinner 处理状态	svg-icon-enrichment（显式 SVG 中心的旋转内部元素）
成功对勾 / 生物识别画圈	svg-path-draw（对勾描边；环旋转 −90° 从 12 点方向开始）+spring-pop-entrance（对勾弹出）
图标变形为对勾（生物识别仪式）	flagged special——SVG 路径变形，见 hyperframes-keyframes（morph）；机制在techniques.md/ keyframes 技能中
插入式 claim-word 门控（淡入+轻微放大再淡出）	gsap-effects（普通淡入/缩放和弦；刻意比kinetic-beat-slam安静）
品牌皮肤循环 + 每次翻转 logo 交叉淡入	discrete-text-sequence（阈值处整状态内容替换）+scale-swap-transition（翻转读作缩小/弹出）；卡片→倾斜 widget 翻转 →card-morph-anchor+css-3d-transforms
漂移网格渐变背景	sine-wave-loop（渐变斑块上的极低振幅位置/色相漂移）

相机修饰器：从静态持机到连续 3D 推进

展示相机横跨一个按变体键控的范围，全部挂在一个包裹全部内容的单一虚拟相机（viewport-change）上：

• static-tour → 无相机移动（viewport-change保持 scale 1 或省略）；所有运动都是元素级。这是范围的地板，也是 device-tour 区别于其余变体的关键。
• floating-window → 两阶段"推入→拉出"弧线：通过coordinate-target-zoom（离中心目标 = scale + 反向平移）向[sidebar/region]推入（例如 dramatic-reveal 1.1→1.0→0.95 的感觉），然后multi-phase-camera拉远重新取景整个窗口，同时内容滚动。
• 3d-hand → 一次连续前推（无剪辑）：multi-phase-camera处于 steady-push 模式（1.0→1.03→1.06… 加上其正弦微漂移），叠加在css-3d-transforms/3d.md上，使设备在推进中自旋对镜头；推进不间断地进入 bloom/portal 出口。

三者的底层分工：viewport-change是基础虚拟相机原语；multi-phase-camera编排推入/拉出阶段（并提供始终开启的微漂移，让即使"静态"的巡览也不显死板）；coordinate-target-zoom把推入对准离中心的屏幕细节。

值得注意两条数学约定（写代码时最容易出错的地方）：

• 单层包裹（viewport-change）：counter-translate 为T = -offset × S（CSS 先应用 scale 再应用 translate）。
• 双层嵌套（coordinate-target-zoom）：外层 scale、内层 translate，counter-translate 为T = -offset（与 S 无关）。

两个公式不可互换——混用会让目标在缩放中漂离中心。从源码看，floating-window 的推入→拉出弧线与 3d-hand 的连续推进都依赖multi-phase-camera的"一个 writer"纪律：相位 scale 与微漂移在同一个onUpdate内合成，除它之外没有任何代码触碰camera.style.transform。

三条被明确标记的超纲特殊项（flagged special）

蓝图诚实标注了三处超出规则库能力边界的机制，写实现前必须知道：

1. 3D 手势驱动（3d-hand）——3D 手模型 + WebGL bloom 有技术文档支撑（3d.md——R3F、useGLTFHandModel、--gl=swiftshader处理着色器/bloom），但没有任何 motion-shape 规则能把 3D 手建模为"滑动滚动 / 点击选择"的手势协议。context-sensitive-cursor/camera-cursor-tracking只建模平面打字/指针光标，不是 3D 手势手。
2. 缩放穿过 bloom/portal 出口——能力在techniques.md→ WebGL shader（经3d.md的无头 WebGL：--gl=swiftshader --concurrency=1），但没有命名过渡规则覆盖 bloom/portal 飞越。
3. 图标变形为对勾（生物识别仪式）——SVG 路径 morph，机制在techniques.md/ hyperframes-keyframes 技能中，与上述两个 WebGL 标志同级。

blueprints-index.md 的收尾也确认了这一点：device-surface-showcase的 3D 手手势输入 + WebGL bloom/portal 需要 R3F/Three.js + WebGL，是比规则库更重的能力，应谨慎使用，或选择更简单的变体。对大多数项目，static-tour、floating-window 或 stepwise-flow 已经足以完成任务。

落地参考：demo-page-scroll-spotlight 真实实现

仓库在 examples/demo-page-scroll-spotlight.html 提供了一个可直接运行的 ground-truth 实现（759 行，9 秒、4 阶段），它是蓝图"倾斜 3D 卡片 + 推拉相机 + 聚光灯高潮"的典型落地。其注释中的分镜与蓝图高度对应：

0.00 – 0.80s 3D 倾斜页面卡片 scale 0.95 → 1.0；导航/标题/CTA 错落淡入 0.12 – 2.80s 标题关键词辉光与 ASR 词时间戳同步（"1" "long" "video" "10" "viral" "clips"） 3.08 – 4.08s 页面内容上滚 280px（程序化滚动感）；轮播区块淡入 + 从 0.9 放大 3.58 – 8.84s 主视频 3D 前弹（translateZ 80px）+ 放大；径向聚光灯压暗四周，结束时衰减

源码中的关键手法直接对应蓝图规则：

• 倾斜由 GSAP 持有而非 CSS（第 649–653 行）：gsap.set(".page-card", { rotationY: -8, rotationX: 3, scale: 0.95 })——注释明确说明：若把rotateY/rotateX/scale留在 CSS，GSAP 只补间scale时可能覆写整个矩阵而丢失旋转；由 GSAP 持有 transform 状态可完全避免此问题。
• 程序化滚动（第 712–717 行）：#scroll-content的y: 0 → -280，power2.inOut1.0s——即3d-page-scroll的滚动通道。
• 聚光灯是独立覆盖层、简单的透明度补间（第 745–756 行），配合--glow自定义属性驱动的translateZ(calc(var(--glow) * 80px)) scale(calc(1 + var(--glow) * 0.15))（第 360 行）实现"元素从表面 LIFT 起来"——与蓝图"one element LIFTS off the surface (translateZ + scale) under a radial spotlight"的描述逐字对应。
• 时间线契约（第 639–641 行）：window.__timelines = window.__timelines || {}; const tl = gsap.timeline({ paused: true }); window.__timelines["main"] = tl;——单条暂停时间线注册到window.__timelines，符合hyperframes-core的确定性渲染契约。

Overflow 约束：干净的check前提

蓝图在最后给出了一条必须遵守的实现纪律（对 panned/scrolled 表面是硬性要求）：

一个被平移或滚动的表面会故意把内容移过其取景卡片的边缘。必须在卡片（overflow: hiddenon the card/window）上裁剪它，并且给移动的内层（持有截图与任何标记/标签的.world/ surface wrapper）打上data-layout-allow-overflow——否则check会对滚出画面的部分（例如平移出左边缘的标记标签）报告text_box_overflow/container_overflow错误。卡片在视觉上裁剪它们；该属性告诉布局审计这是有意的，不是布局 bug。

这与viewport-change/multi-phase-camera/coordinate-target-zoom三条相机规则的共同约束一致（overflow: hidden在.scene上是必须的——任何非 1.0 的 scale 都会让内容漏出画面或推出画框），也是 HyperFramesnpx hyperframes lint / check流水线的实操要求：视觉裁剪交给卡片，审计豁免交给data-layout-allow-overflow，两者缺一不可。

使用建议与限制

• 角色匹配优先：故事设计先于形状。只有当你确实需要"一个设备/窗口英雄、屏幕沿着真实流程循环"时才选本蓝图；camera-journey是"相机旅程讲因果"，cursor-ui-demo是"光标驱动工作流"，别混用。
• 变体选择：静态相机优先选 static-tour（成本最低、最稳）；需要展示真实网页滚动选 floating-window；需要"无光标完成核心闭环"介绍产品选 stepwise-flow；showcase-carousel 适合"N 品牌 / N 应用"的广度叙事；3d-hand 只在确有 Three.js/WebGL 能力时使用。
• 时长纪律：每屏状态保持约 1.0–1.5s，总时长 5–11.3s 区间内按变体预算；stepwise-flow 的提交时刻之后必须保留足够的 climax dwell（参考press-release-spring的 ≥1s 规则），避免"闪一下就没了"的观感。
• 规则纪律：所有合成必须遵守 rules-index.md 的公共契约——单条暂停时间线、双向可 seek（fromTo显式 from 状态）、确定性（无Math.random/Date.now）、只补间 transform 与 paint-only 属性（绝不width/height/top/left）、组错落窗口 ≤约 0.5s、动画元素上不写 CSStransition。
• 能力边界：3D 手势、bloom/portal 出口、SVG 路径 morph 三条 flagged special 项需要规则库之外的技术栈，使用前确认团队/运行环境具备相应能力（R3F/Three.js、WebGL 无头渲染--gl=swiftshader --concurrency=1）。

延伸阅读

• 蓝图索引与角色菜单：blueprints-index.md
• 技能总览与路由表：SKILL.md
• 原子规则目录与公共契约：rules-index.md
• 关键底层规则：3d-page-scroll、multi-phase-camera、viewport-change、coordinate-target-zoom、card-morph-anchor、scale-swap-transition、spring-pop-entrance、press-release-spring、discrete-text-sequence、hacker-flip-3d、sine-wave-loop、svg-path-draw、svg-icon-enrichment、asr-keyword-glow、center-outward-expansion（均位于 skills/hyperframes-animation/rules）
• 可运行的 ground-truth 示例：demo-page-scroll-spotlight.html
• 更广的运动设计技术（SVG 描边、CSS 3D、WebGL 着色器）：techniques.md
• 渲染/预览/审计命令：npx hyperframes lint / check / snapshot / preview / render（见 hyperframes-cli 技能）

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes