cinematic-scroll

Web 设计工作室

打造一种独特体验，让动态效果阐明主题。精湛技艺源自这项技能；视觉识别则来自用户的需求说明和项目。本纯文本版本无需账户、密钥、付费服务或特定动画库。

选择一种路径

如果请求仅涉及审查，且已安装 scroll-audit 技能，请使用它；否则，只需检查并返回发现，不要构建。如果请求仅涉及设计方向或分镜，请使用 故事方向。其他情况下，先阅读方案目录，再阅读一个方案：

• 对于以图像为主的叙事、作品集、长篇内容或营销活动，请使用编辑式故事。
• 对于发布、机制、对比或以物体为核心的故事，请使用产品亮相。
• 对于 GLB、程序化物体、环绕运动或镜头飞行，请使用实时 3D。

配套技能：launch-page-strategy 用于在设计动态效果之前确定页面必须传达和证明什么；scroll-audit 用于评估现有页面。

如果是修复问题，仅针对受影响的行为使用最接近的方案。除非所选方案指出了具体需求，否则不要浏览其他参考资料。保留宿主框架、路由、样式、依赖项、内容和可正常使用的交互。优先使用提供的资源和已安装的软件包。除非用户请求中包含相关操作，否则不要发布、部署、安装软件包，也不要将项目内容发送到服务。

保持首轮工作精简：项目说明 -> 需求说明/资源 -> 目录 -> 一个方案 -> 构建。这些方案内容完整，可独立使用。在出现具体缺口之前，不要查阅可选参考资料或创建流程文档。把迭代精力花在渲染结果上，而非不断积累上下文。

确定设计方向

检查项目说明、现有代码、文案和资源。明确受众、期望操作、交付形式、目标设备，以及品牌的配色、字体搭配、信息密度、强调方式、图像风格和动态效果特征。当可通过合理且可撤销的假设推进时，说明假设并继续。

除非用户要求改写，否则在源文件和渲染文本中都原样保留提供的文案。不要使用 text-transform、生成的替换文本或脚本驱动的大小写变换来改写其视觉呈现。不要编造宣传主张、评价、指标、价格、客户徽标或链接目标。

选择一个具有特定主题效果的标志性时刻：展示组装过程、重新构图、描绘路线，或穿行于真实几何结构。定义其开场 -> 转变 -> 清晰停留 -> 退出，并确定移动端和静态状态。先构建这一纵向切片并进行检查，再扩展页面。

明确视觉焦点、有意设置字体对比、命名材质/光线风格，并确定一到两个反复出现的视觉母题。设计转场，而不只是设计每个状态的终点。调整示例机制以适应项目，不要照搬其他品牌的样式。

构建体验

• 恰好渲染一个语义化 h1，保持标题层级连贯、文本可选中、链接实用、焦点可见，并在开始增强前显示主要操作。页内操作必须跳转到有意义且带标签的目标，其中包含其承诺提供的内容，而不能只更改 URL 片段。
• 在普通、减少动态效果、故障和无 JavaScript 状态下，确保所有提供的消息和操作均可用。切勿将未激活的故事文案标记为 hidden、inert、display:none 或 visibility:hidden；应为呈现效果添加动画，而非影响内容可用性。
• 在激活边界处保持控件语义与计算后的呈现同步。对于展开控件，同时更改 aria-expanded 和受控区域的可见状态；状态更改后，再为内部包装元素添加动画。
• 使用一个滚动时钟，并为每个动画属性指定唯一控制者。将固定定位的几何布局与移动的子元素分开，并清理所拥有的监听器、观察器、时间线、媒体和渲染循环。
• 在每个采样滚动深度都保持完整可见的画面。在过渡效果后保留永久的基础构图；切勿将整个场景动画化至空白，也不要依赖不受支持的时间线来确保关键内容可见。
• 让滚动联动变化可逆且与进度挂钩。需要阅读时，让文本保持静止。在频繁更新中优先使用变换和不透明度。
• 比较相距较远的滚动位置之间以及同一未变化位置的渲染帧。有意设计的变化必须明显强于空闲漂移；否则应减少时间驱动的移动，或增强映射到镜头／物体的变化。
• 将移动设备视为一种经过编排的状态，采用自然流式布局并减少同时出现的图层。仅在支持悬停且指针精细时启用指针倾斜。
• 减少动态效果模式应移除固定定位、视差、平滑滚动、自动播放和连续循环，同时保留所有消息和操作的可用性。
• 脚本、媒体或渲染器故障时，仍须保留实用且永久显示的构图。

明确要求的 3D、镜头移动或丰富动态效果，决定了所需的实现目标。应先修复依赖项，并降低分辨率、效果或素材体积，再考虑移除所要求的机制。海报只是故障回退的证明，不代表已完成实时 3D。

验证并交付

先在一个常规浏览器视图中证明标志性交互有效，然后在相关修复后执行有针对性的检查。最终润色时检查桌面端、移动端、减少动态效果、无 JS／故障回退、键盘顺序、反向滚动、调整大小以及实际路由。检查开场、中段、可读停留和收尾画面。不要重复报告未变化的故障，也不要把缺失的证据说成通过。 在禁用脚本的浏览器中运行无 JavaScript 检查。证明其准确的静态状态、海报、关键文案、操作目标和作者提供的媒体替代内容均可感知，同时不存在冲突的加载界面。 当本仓库提供相应工具时，修复期间运行 tools/verify/verify-build.mjs --scope output --doctor-mode advisory --runtime，最终润色时运行不带 --profiles 的命令。

交付可正常工作的文件或路由、准确的启动命令、标志性时刻、通过的检查以及重大限制。除非用户提出要求，否则不要在其网站中添加署名、销售文案、跟踪功能或升级横幅。