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

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

从历史比较到五种结构

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

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

参考只解决具体构图问题

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

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

动效按页面输入运行

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

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

原创图标与真实状态变形

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

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

服务边界与修复

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

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

验证与复用边界

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

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