# 五个日常故事：让画面结构服务一次真实操作

本批围绕短片、骑行、食谱、明信片和想象星图，新增五组网站与同品牌登录页。每个网站有八个职责不同的主体章节；二十枚 UI 图形独立绘制，五个品牌标识另计。它们是创意作品集合，认证服务未接入。

## 从历史比较到五种结构

| 作品 | 结构与素材 | 主要操作 | 与既有作品的差异 |
| --- | --- | --- | --- |
| CUTLINE | 珊瑚色电影工作册、错位胶片、三张有序叠卡 | 写三个镜头并下载清单 | 从字样与印刷转向镜头顺序，非对称画幅承接叙事 |
| RIVET | 酸黄道路、横向自行车、有限固定的部件重组 | 下载不同路线卡、勾选出发清单 | 对象分解与三个行程阶段对应，不复制音响商品卡 |
| citrus | 居中衬线标题、原创俯视餐桌、配料列与步骤 | 选择份数并下载相应食谱 | 核心是配料计算；区别于植物照护与港口全景 |
| postie | 蓝色邮政纸、穿孔卡片、会看向指针的邮票 | 写称呼与短文，查看字数并保存 | 使用问候语和明信片两面组织信息，不重复任务清单 |
| NOCT | 中央留白、外围星图、金色角色沿圆轨道转动 | 下载三种 SVG 星图并为故事命名 | 创作想象天空，不是实时天文数据或海洋观察 |

五套共享语义控件和安全边界，分别编写主布局、插画和品牌样式。浅底深字、深底浅字、圆形餐盘、纸张网格和环形空场形成不同阅读节奏。

## 参考只解决具体构图问题

NOCT 观察了[源铺 Cyrclo 详情](https://yuanpu.cc/templates/cyrclo-website-template)与[公开预览](https://preview.yuanpu.cc/cyrclo-website-template/)的中央空场、外围倾斜对象和紧凑导航。实际改为原创星图、环绕角色与创作内容，字体、素材、路径和业务文案自行实现。没有购买模板、复制源代码或下载其商业素材；公开预览不构成素材许可。

其余四套自主设计。所有场景与图标为本批绘制的矢量；系统字体不随源码分发。本地 SVG 是真正的路径文件，没有内嵌位图。原创不等于进行过商标检索。

## 动效按页面输入运行

CUTLINE 的三张卡按顺序覆盖，操作区保持普通文档流。RIVET 在有限区间内重排车轮和车架，进入、展开、收拢之后自然退出。citrus 的餐布、盘子、香草与餐具有不同指针位移。postie 的瞳孔限制在眼睛内，密码聚焦时避开输入。NOCT 的角色绕舞台中心运动，正文和表单不受滚动控制。

登录页采用同主题的微缩视差或视线跟随。指针状态与 SVG 原始定位分别使用 translate 和 transform，避免运动时覆盖插画的初始分组坐标。只有输入、滚动或可见状态变化时请求动画帧；离屏、页面隐藏和离开时复位并清理自有资源。减少动态效果时保留完整静态构图，窄屏取消固定与叠卡。

## 原创图标与真实状态变形

每套四枚独立语义图形：镜头、骑行工具、厨房器具、邮政符号和星图器物。以 24×24 网格绘制，提供 outline 与 duotone SVG/透明 PNG；风格变体不重复计算为原创图形。配套品牌有 SVG 母版与 32、180、192、512px PNG。

[Morphicons 官网](https://www.morphicons.com/)与[官方仓库](https://github.com/guillermolg00/morphicons)用于原生状态变形参考。沿用已同源打包的 MIT 版本 1.7.1，通过 DOM createMorph 接收自绘加减端点，并明确设置 reducedMotion: user。加减端点是 details 的展开收起指示，不计入二十枚。原生 summary 的文字和展开语义始终可用；模块失败显示静态端点，状态不依赖动画成功。

## 服务边界与修复

登录字段在脚本安装拦截前保持禁用，表单不具备网络提交路径。空值、格式与最短长度错误指向字段；合格输入只显示服务不可用，并清空两项输入。页面隐藏或离开也清空凭据。本批没有认证、支付、消息发送或持久化服务；没有虚构成功状态。

真实可完成的操作是当前页面上的清单、文字与 SVG 文件下载。citrus 将下载控件保留为原生链接，脚本可用时再生成所选份数的食谱；即使脚本加载失败，仍能取得两人份文件。集中审查还修正了 SVG 分组定位、标题字距与视线回正。

## 验证与复用边界

本批保留桌面、平板、手机全页、图标 16/24/32px 深浅背景、状态、减少动态效果和资源失败证据；检查本地下载、请求与存储。必要检查的详细结果随批次记录更新。桌面浏览器的触屏模拟不等于实体手机验收，没有测量 Lighthouse 分数或宣称帧率。

知识资料只来自本项目与以上公开来源。本次没有扫描私人笔记、复制个人技能正文或扩大外部服务权限。继续保留原有案例与路由；构建显式列举公开资源，内部评审和状态夹具不进入站点。

## 打开作品

- [CUTLINE 网站](https://shuihuaibin.com/web-cases/cutline/)与[登录页](https://shuihuaibin.com/login-cases/cutline/)
- [RIVET 网站](https://shuihuaibin.com/web-cases/rivet/)与[登录页](https://shuihuaibin.com/login-cases/rivet/)
- [citrus 网站](https://shuihuaibin.com/web-cases/citrus/)与[登录页](https://shuihuaibin.com/login-cases/citrus/)
- [postie 网站](https://shuihuaibin.com/web-cases/postie/)与[登录页](https://shuihuaibin.com/login-cases/postie/)
- [NOCT 网站](https://shuihuaibin.com/web-cases/noct/)与[登录页](https://shuihuaibin.com/login-cases/noct/)