--- sensitivity: public --- # 五种动效，五种阅读方式 本轮将字体、港湾、小事清单、纸模型与桌面路线分别做成一个完整的静态产品世界。每套包含八个职责不同的主体板块、配对登录页和四个独立原创图标。二十个图形各自输出线性与双色 SVG、透明 PNG；品牌标记和尺寸导出另计。 ## 从结构区分作品 [KERN](https://shuihuaibin.com/web-cases/kern/) 用巨大字标建立识别，再让三张字体画幅随滚动依次叠放。后半段从字距和基线进入构件、方法、项目简报与下载。与已有 MONOFORM 的桌面部件相比，它把文字作为对象，主要操作是填写并下载项目简报。配对[登录页](https://shuihuaibin.com/login-cases/kern/)把表单与立体活字分置两侧，指针只产生轻微空间偏移。 [BREAKWATER](https://shuihuaibin.com/web-cases/breakwater/) 以原创微缩港湾铺满首屏。水陆交界、设施长行、三条观察路线、停驻留白和比较表形成长短不同的阅读节奏。筛选直接改变路线条目，港湾 SVG 和观察纸可以下载。它与 ATLAS 的地图数据界面、STRATUM 的器物摄影有明显不同：所有港湾形状均为原创示意插画，页面明确说明不能用于导航。[登录页](https://shuihuaibin.com/login-cases/breakwater/)沿用同一港湾，但缩成靠近表单的景窗。 [pebble](https://shuihuaibin.com/web-cases/pebble/) 把一块有眼睛的橘色石头放在中轴上。三项任务清单、大小任务对照、当下与稍后、完成后的留白、整理方法和文件保存构成主体。眼神跟随指针，内容输入始终在正常页面流中。与 MARGIN 的长文编辑不同，清单只允许三条，支持完成、删除和真实文本下载，刷新后清空。[登录页](https://shuihuaibin.com/login-cases/pebble/)把角色放在表单上方，密码聚焦时眼神收起。 [HINGE](https://shuihuaibin.com/web-cases/hinge/) 使用蓝色工程纸与黄色连接点。有限的固定区域让三个折面随着阅读分开，滚回时重新合拢；之后进入山折与谷折、线型比较、制作步骤与纸模型下载。它与 KINETIC 的工业场景不同，核心内容是可打印的纸张练习，页面不声称具备制造公差或承载能力。[登录页](https://shuihuaibin.com/login-cases/hinge/)将折面拟人化，保持独立于正文的表单阅读区。 [ROAM](https://shuihuaibin.com/web-cases/roam/) 将窄索引、圆形棋盘与衬线标题排成三轨。棋子沿地图外围随着有限滚动改变位置，后续从目标、地点进入两条路线、规则、双人讲故事与下载。内环地图有三个编号站点，外环地图有五个，文件内容与选择文案一致。它与 FIELDWORK 的自然标本检索不同，主任务是带走一份可以实际使用的桌面路线。[登录页](https://shuihuaibin.com/login-cases/roam/)使用两张叙事卡片，输入表单保留正常顺序。 ## 动效由阅读和状态触发 五种处理分别是章节卡片叠放、微缩场景视差、眼神跟随、固定区重组与角色环绕。它们不依赖自动无限循环。指针和滚动按需请求一帧，离屏移除变换，页面进入后台取消待执行帧，回来后根据当前位置恢复。触屏不要求悬停；窄屏固定区与叠卡回到正常流。系统减少动效设置将装饰变换归零，但不影响内容、导航、选择和下载。 每套网站的原生折叠说明由真实展开状态驱动加减号变形。实现使用固定版本、自托管的 [Morphicons DOM 模块](https://github.com/guillermolg00/morphicons)，保留 MIT 许可并显式设置用户减少动效策略。库加载失败时，原生 details 仍然可读可用，符号采用静态回退；应用不引入 React、远程 CDN 或动画设置面板。 ## 文件内容和服务边界也是设计的一部分 一次修正来自 ROAM：两条路线不能只用同一张图换虚线。最终文件分别标出三个与五个站点，并明确编号顺序，让下载真正兑现页面说明。另一处是 HINGE 的重复插画：同页复用 SVG 图案时必须为定义分配独立 ID，避免引用意外指向另一幅图。 登录页没有接通认证服务。脚本加载前禁用字段，加载后只做本地格式校验；合格输入返回真实的服务不可用反馈并清空密码，不生成 token、不跳转成功、不写入浏览器存储，也不发送凭据。页面隐藏或离开时清空输入。任务与简报文件由用户主动下载，内容仅在当前页面内处理。 ## 维护和验证边界 页面继续使用原生 HTML、CSS 与 JavaScript，沿用既有 CSP、安全响应头和静态发布流程。主内容在 HTML 中可见；字体或动效资源缺失时仍能阅读。图标库继续提供真实搜索、复制与下载。只有明确列入构建白名单的页面、图片、脚本和许可文件进入公开产物，创作脚本、截图、状态夹具和审阅记录留在源码与内部归档。 验收覆盖桌面、平板、手机的布局和实际操作，并分别检查本地校验、真实下载、键盘、触屏、减少动效、离屏与后台恢复、无脚本和资源失败。浏览器验证只代表实际检查过的环境；认证、支付、预约等未连接的服务没有作为成功业务验收。发布状态由目标提交的工作流结果与正式域名检查共同确认，不能仅凭本地构建判断。 ## 参考与原创边界 结构参考来自 Yuanpu 的 [Mono](https://yuanpu.cc/templates/mno-website-template) 与 [Fleet 实际预览](https://preview.yuanpu.cc/fleet-template-website-template/)：前者的大字与留白、后者的全幅画面与底部信息层次，用于研究信息关系。没有复制它们的模板源码、照片、字体或品牌资源。五套品牌标记、场景、下载图与二十个图标均在本项目中独立绘制。