雾、墨与
长阅读
一次从 Dark Thoughts 的〈Never Enough〉↗ 出发的原创重构。下面先是一个属于 Ryanyx 的博客样张，再是将它拆成设计与技术决策的笔记。
留下一点
不被优化的时间
写于 2026 年 7 月 23 日
我想把偶遇的好网页收集起来。不是把它们封进截图，而是试着理解：是什么让一个界面安静下来，又为什么它能让人愿意读完一段更长的文字。
也许好的数字空间不总是更快。它会留下可停顿的边缘、不会被填满的空白，以及一张在背景里几乎不要求你注意的风景。
这不是像素级临摹。实验提取的是阅读的气质：温暖的纸张感、克制的导航、文学性的标题和会呼吸的图像纹理；视觉内容、文案、画布算法与组件结构均为本项目重新创作。
让阅读成为界面的主角
样张把内容列限制在约 760px，给 20–22px 的正文和 1.65 左右的行高留出呼吸空间。标题采用高对比、带书写感的衬线字体；导航和日期则缩小、淡化，形成“先读文章，再看界面”的视觉层级。这里的关键不是复古字体本身，而是将不同字体承担的角色分开：展示字体制造情绪，正文承担长时间阅读，等宽小字提供元信息。
把“装饰图”改成低负担的环境层
顶部使用一张原创山雾照片，但它不会以原图直接呈现：脚本先将照片裁切、灰阶化并提高对比度，绘入离屏 Canvas；再以 4×4 Bayer 阈值矩阵逐格采样亮度，决定是否在主 Canvas 绘制一个暖白色 2px 方点。结果是照片的体积和明暗被保留，图像语言却变成了参考页那种克制的点阵。
画布以受限的设备像素比重绘。为让云层有呼吸感，它只在可见区域以约 12fps 工作：原图以 18 秒周期横移几个像素，Bayer 阈值矩阵缓慢换相。离开视窗或系统启用“减少动态效果”时，动画立即暂停并固定一帧，避免装饰效果持续消耗 CPU。
source image → subtle 18s pan → grayscale / contrast · 4×4 Bayer matrix + slow phase → 2px warm dots → visible-only ~12fps render变量先于颜色，避免“反相”夜间模式
样张的日间与夜间不是简单反色。它们分别定义纸张、墨水、标题、弱文本、链接和雾色等语义 token；组件只引用 token，因此按钮、画布和正文可以一起切换。局部主题状态挂在样张容器上，既能演示交互，也不会覆盖站点本身的全局主题偏好。
渐进增强，而不是把效果变成门槛
页面默认用语义化的 article、标题、段落、导航和按钮完成阅读；Canvas 被标记为装饰性，脚本失败或禁用时不影响内容。主题按钮使用真实 button 和 aria-pressed，键盘可操作。绘制代码延后到页面加载后执行，并避免在滚动时进行布局读写。
这让“趣味”保持在渐进增强的位置：它可以增加记忆点，却不能成为阅读、可访问性或性能的前提条件。