墨逸斋

盼历 · 原型 v5（自由舞台 · 协作说明） ​

v5 把「日子结晶」页改成一整张自由画布：没有容器、没有列表、没有大段说明文字。

  • 每个日子是一张小日历页：顶上一道类别红头、中间一个大字当"日期"、下面是名字与频率、底边是撕痕
  • 日历页在整页上自由悬浮：每张有独立的浮动周期与相位，随机角度，像一桌摊开的日历
  • 点一下，它沿弧线飞进下方摊开的好日子册；也可以直接拖过去。册子里的日子像贴纸一样贴着，可放回
  • 页面上只有三处文字：左上角品牌、右上角导航、「好日子册」标签——其余全靠元素自己说话

预览地址：https://moyi.fan/panli/v5/shelf.html （部署后生效） 完整源码包下载：https://moyi.fan/panli/panli-v5.zip

页面 ​

  • home.html — 盼头首屏：巨型倒数、日历牌（指针视差）、再往后、今年进度
  • shelf.html — 日子结晶：整页自由悬浮的日历页 + 底部贴纸册（点击飞入 / 拖拽入册 / 放回）
  • year.html — 年度日历：12 个月发丝线网格
  • assets/style.css — 全部样式；结晶页样式在文件末尾 v5：自由舞台 区块
  • assets/blocks.js — 数据与逻辑：CATS 类别、BLOCKS 方块库（含 glyph 大字符）、FAMILY、TRIPS、规则展开
  • assets/icons.js — lucide 线性图标（内联）
  • assets/fonts/ — 字体子集（Noto Serif SC 400/600、Playfair Display 400/500）

交互实现（改的时候看这里） ​

  • 散布：scatter() 按视口大小算格子，hash() 给每颗日子稳定的抖动与角度，重排不会乱跳
  • 浮动：.leaf-wrap 用 floaty 动画，幅度/周期/相位由内联变量控制；悬停暂停并抬起
  • 点击飞入：flyToBook() 用 Web Animations 沿弧线飞向册子，超时兜底提交状态（后台标签页动画会被节流，状态不能丢）
  • 拖拽：指针移动超过 7px 进入拖拽，克隆 .leaf--ghost 跟随；落在册子上松手即收下，否则弹回
  • 放回：册子里悬停出现「×」，贴纸淡出后回到画布
  • 响应式：≤1020px 自动切换成流式网格 + 册子改为页面下方区块

内容怎么改 ​

  • 换文案 / 预置日子：改 assets/blocks.js 里的 BLOCKS（glyph 是日历页上的大字、name、freq、rule）
  • 换配色：改 assets/style.css 顶部 :root 与 blocks.js 里的 CATS
  • 新增日子：往 BLOCKS 加一项，图标名从 https://lucide.dev 挑（需内联进 icons.js）；rule 五种写法见 v3 README
  • 浮动幅度：renderLeaves() 里的 rnd(6, 12)（px）与 rnd(6.5, 10.5)（秒）

小提示 ​

  • 字体是子集（只含原型里出现的字），换文案时如有生僻字会回退到系统宋体，属正常
  • 全部交互原生 JS，无框架

版本管理约定 ​

  • 大改版复制上一版目录为 v6 再改，旧版保留可对比
  • 在 ../index.html 的版本列表里登记新版本
  • 部署跟着 moyi.fan 现有流程走（vitepress build docs）