分层速率控制在 0.15×–0.6×
背景网点 0.15×、卡片层 0.35×、主视觉 0.6×、文字层 1×。相邻层速率差保持在 0.2 以上才有纵深，但不要超过 0.5，否则前景会「飞出去」。
量化：层数 4 层，位移差 ≤ 120px/屏这是一个网页样式设计参考 · 视差滚动 / 半调网点 / 大字镂空标题 / bento 错落格
探索与发现 · 多层视差下的 AI 平台
让每一次滚动
让每一次滚动
都发现一层推理纵深
我们把 AI 平台展示拆成 4 层视差：网点底纹 0.15×、指标卡 0.35×、主视觉 0.6×、前景文字 1×。用户顺着滚动逐层发现模型、算力与数据可视化的真实关系，而不是被动看完一张首屏大图。
0.15–0.6×视差速率区间
16ms滚动帧预算
5步接入验证路径
实时数据可视化面板
探索第一步 · 可落地清单
把「科技跃动」做成真能上线的 6 条视差规范
下面每条都带阈值与做法，照着改就能避免视差滚动最常见的翻车：抖动、掉帧、移动端错位、焦点丢失。
只动 transform 与 opacity
位移一律用 translate3d 触发合成层，禁止在滚动回调里改 top/left。配合 will-change:transform 仅对正在滚动的 4–6 个元素开启，用完即关，避免显存被吃满。
量化：单帧 ≤ 16ms，长任务 ≤ 50ms滚动监听用 IntersectionObserver 做揭示
进入视口 15% 触发一次入场动画，阈值设 threshold:[0,.15,.5]，只播一次不循环。滚动事件仅保留给背景视差，并用 requestAnimationFrame 节流到 1 帧 1 次。
量化：揭示动效时长 700ms，缓动 cubic-bezier(.16,1,.3,1)移动端降级为 2 层或关闭视差
视口宽 < 768px 时把层数降到 2 层、速率减半；同时监听 prefers-reduced-motion:reduce，命中即完全关闭位移，只保留淡入，保证晕动症用户可读。
量化：移动端 LCP ≤ 2.5s，CLS ≤ 0.1图片统一固定宽高比防跳动
所有展示图用 aspect-ratio 容器 + object-fit:cover 裁切，写死 alt 与 loading="lazy"，首屏主图给 fetchpriority 提示，避免视差位移时图片回填造成布局跳动。
量化：图片区 CLS 贡献 0，首屏图 ≤ 200KB焦点与键盘可及性不能丢
视差只作用于装饰与容器，正文顺序保持文档流；所有可点元素 :focus-visible 给 2px 描边，点按区 ≥ 44×44px。滚动揭示完成前内容也可被屏幕阅读器读到。
量化：对比度 ≥ 4.5:1，Tab 顺序与视觉一致
探索第二步 · 图文特写
在 0.6× 视差层里，读懂一次推理请求的全过程
当用户滚到这一屏，主视觉以 0.6× 速率上移，右侧数据卡以 1× 跟随，形成「数据从图里浮出来」的发现感。我们建议把最关键的三个指标直接钉在这层，让探索路径有明确终点。
- 首令牌延迟 P95
- ≤ 420ms
- 单卡并发会话
- 48 路
- 令牌吞吐
- 2.6k tok/s
- 缓存命中率
- 61%
探索第三步 · 解决方案对比
三种 AI 平台展示形态，按目标选型
视差滚动不是默认答案。先用下面这张对照表判断你的场景是否需要它，再决定投入多少动效预算。
| 方案 | 适用目标 | 首屏信息量 | 实现成本 | 关键指标 |
|---|---|---|---|---|
| 静态海报式 | 品牌认知、发布会引流 | 低（1 屏 1 主张） | 0.5 人日 | LCP ≤ 1.8s |
| 视差滚动式（本页） | 平台能力讲解 + 用户探索 | 中（每屏 1 发现点） | 2–3 人日 | 滚动深度 ≥ 55% |
| 交互式控制台式 | 技术决策者深度验证 | 高（可操作面板） | 5–8 人日 | 试用转化 ≥ 12% |
| 纯文档式 | 接入与运维交付 | 极高（结构化） | 1–2 人日 | 搜索命中 ≥ 80% |
探索第四步 · 工作流程
从素材到上线的 5 步接入流程
每一步都有明确的交付物与验收口径，避免「做完才发现掉帧」。
盘点分层素材
整理 4 类图：网点底纹、数据面板、模型特写、场景实拍。每层导出 WebP，宽度不超过 1920px，单张 ≤ 200KB。
搭帧与令牌
先在根类把间距、圆角、阴影、字号全部落成变量，再拼 bento 网格，保证后加卡片不改版式。
接视差与揭示
背景层用 rAF 节流驱动位移，内容层用 IntersectionObserver 播一次入场，阈值 0.15。
性能与可及性验收
用 Performance 面板确认单帧 ≤ 16ms；跑一遍键盘 Tab 与 reduced-motion 降级，确认无横向溢出。
探索第五步 · 平台能力拼图
五块错落格，拼出 AI 平台的技术底牌
悬停任意卡片会轻微放大并抬升，对应「网格拼图」的探索手感；数据均为可替换的示例量级口径。
视差纵深 + 滚动揭示，一次滚动一层发现
把模型能力、算力调度、数据可视化三条叙事线分别放进不同速率层，让企业客户在滚动中自然发现平台的完整性，而不是读一段功能罗列。
实时指标看板
吞吐、延迟、命中率三指标钉在 1× 层，滚动时始终可读。
超小屏单列兜底
≤ 380px 自动单列、内边距收到 8–12px，点按区仍 ≥ 44px。
降级策略内置
reduced-motion 命中即关闭位移，只保留淡入，晕动用户不受影响。
半调网点母题
16px 网格网点 + 径向遮罩，随滚动缓慢位移，成本低但纵深感强。
探索第六步 · 场景图集
悬停放大，看看 AI 平台在真实场景里的样子
图集采用统一 4:3 裁切，悬停放大 1.08×，用于快速建立「平台可用」的直觉判断。
