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_Featurefeature_showcase——设备/窗口成为英雄其屏幕循环切换static-tour · floating-window push-scroll · 3d-hand demo时选择它它展示的是功能在真实界面内部被体验而不是罗列功能卡片那是grid-card-assemble或追逐光标走完流程那是cursor-ui-demo。Product_Introproduct_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揭示了与口播台词对位的节奏而不是在 t0 一次性倾倒内容。镜头总骨架一个持久的表面 相机移动蓝图的整体结构可以用一句话概括一个产品表面——[device mockup]或[floating browser/app window]——是[styled backdrop: gradient / radial / stylized 3D void]上持久的主角它的[screens/sections]沿着真实[product flow]循环切换同时一个展示型相机静态持机、推近→拉远、或一次连续推进来呈现它。每个屏幕状态保持约 1.0–1.5s。三幕分镜结构Scene 10.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-hand3D 手势演示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.4sin-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-handhacker-flip-3d逐字符 3D 旋转 确定性字形替换屏幕交换为协调的缩小退出/弹出进入scale-swap-transition同形状状态交换模板应用新布局从中心生长填满表面3d-handcenter-outward-expansion簇集于中心 → 展开填满表面在状态间变形 / 标题卡→窗口溶解card-morph-anchor眼睛锚定的过渡形状变化按钮点击压缩95%→100%press-release-spring重按用physics-press-reaction线性压缩 弹簧恢复悬浮窗口光标点击高亮列表项cursor-click-ripple光标移动点击涟漪活动侧栏/列表项的强调高亮弹出asr-keyword-glow焦点项上的强调辉光光标沿侧栏列表下移floating-windowcamera-cursor-tracking平面光标漂移与推入配对悬浮浏览器窗口空闲浮动 / 3D 设备漂移呼吸sine-wave-loop有界正弦空闲3D 设备漂移 自旋对镜头 透视深度css-3d-transforms或3d.md技术真 Three.js/R3F 设备见相机修饰器水平[marquee]滚动3d-handviewport-changePAN 模式薄适配字面 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-devicespring-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-keyframesmorph机制在techniques.md/ keyframes 技能中插入式 claim-word 门控淡入轻微放大再淡出gsap-effects普通淡入/缩放和弦刻意比kinetic-beat-slam安静品牌皮肤循环 每次翻转 logo 交叉淡入discrete-text-sequence阈值处整状态内容替换scale-swap-transition翻转读作缩小/弹出卡片→倾斜 widget 翻转 →card-morph-anchorcss-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-changecounter-translate 为T -offset × SCSS 先应用 scale 再应用 translate。双层嵌套coordinate-target-zoom外层 scale、内层 translatecounter-translate 为T -offset与 S 无关。两个公式不可互换——混用会让目标在缩放中漂离中心。从源码看floating-window 的推入→拉出弧线与 3d-hand 的连续推进都依赖multi-phase-camera的一个 writer纪律相位 scale 与微漂移在同一个onUpdate内合成除它之外没有任何代码触碰camera.style.transform。三条被明确标记的超纲特殊项flagged special蓝图诚实标注了三处超出规则库能力边界的机制写实现前必须知道3D 手势驱动3d-hand——3D 手模型 WebGL bloom 有技术文档支撑3d.md——R3F、useGLTFHandModel、--glswiftshader处理着色器/bloom但没有任何 motion-shape 规则能把 3D 手建模为滑动滚动 / 点击选择的手势协议。context-sensitive-cursor/camera-cursor-tracking只建模平面打字/指针光标不是 3D 手势手。缩放穿过 bloom/portal 出口——能力在techniques.md→ WebGL shader经3d.md的无头 WebGL--glswiftshader --concurrency1但没有命名过渡规则覆盖 bloom/portal 飞越。图标变形为对勾生物识别仪式——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留在 CSSGSAP 只补间scale时可能覆写整个矩阵而丢失旋转由 GSAP 持有 transform 状态可完全避免此问题。程序化滚动第 712–717 行#scroll-content的y: 0 → -280power2.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-flowshowcase-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 的公共契约——单条暂停时间线、双向可 seekfromTo显式 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 无头渲染--glswiftshader --concurrency1。延伸阅读蓝图索引与角色菜单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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考