北京
你有没有想过，如果界面不是用色值和渐变“画”出来的，而是像旧报纸一样，被一台引擎逐点“印”上去，会是什么体验？Halftone UI 正是这样一种存在。它没有走常规的绘制路线，每一个视觉表面都是一块实时画布，由一个组件提供色调函数——告诉引擎在这一点上墨水的深浅——然后那台看不见的印刷机就只留下色调能够到达的那些圆点。
这个想法的核心是一次阈值判决。把屏幕坐标映射到一个 0 到 1 的色调值，一条简单的规则就能决定圆点是否被保留。它可以是一个进度条：水平位置超过 72% 就切换深浅。也可以是一个按钮、一张图表，甚至一整页示例。所有这些都是同一台印刷机印出来的，方式完全一样。
支撑这种印刷感的点阵，来自一个带种子的泊松盘云，一种平滑的蓝噪声分布，很像随机加网印刷中所用的点分布。每个点都有自己的阈值门限，当色调场发生变化时，这些点会重新测试自己是否应该留在画面上。这直接影响到动画表现——它不是靠补间颜色填充来实现平滑过渡，而是墨点的颗粒本身在运动，印刷机每帧都在重新评估整个色调场。
种子是确定性的，刷新页面会产出完全相同的印刷品。但如果你按下“reroll”，整张页面就会依据一个新的种子，重新印刷一遍，连纹理的随机性都变得可以设计。
Halftone UI 内置了四种网屏，每一种都能在演示中实时切换。不管换成点状、线状还是其他形态的网屏，底层的色调场完全不需改动，页面的性格却会立刻改变。除了单色印刷，它还提供了一套真正的四色叠印：青、品红、黄、黑四个色版，按照专业印刷的网角分离，并支持可调节的套印偏差。那些轻微的错位和不完美的重叠，反而成了最终画面的一部分。
同样的色调场方法也可以驱动图表，而不仅仅是装饰性表面。一张饼图和一张照片，完全由同一套引擎印刷出来，但该有的语义一个不少。React 和 Vue 的适配器包裹着同一个核心引擎，而核心没有任何运行时依赖。按钮还是真正的 button，仪表保持 progress 标签，图表暴露可访问的表格和标题。Canvas 只是装饰，底层的真实 DOM 和语义结构始终完整、可审查。
Halftone UI 刻意没有发布成 npm 包。它的源码就是为了被复制到你的项目里，就像 shadcn 那类库的理念一样。整个文档站点包含了 88 个可查阅的部分：从最基础的原色、图表，到登录流程、仪表盘、定价页、对话框、菜单、组合框、验证码字段，还有图片半色调转换，以及常驻的墨水小精灵 Smudge。每一处都是可以上手把玩的——打开文档，调整颗粒感，旋转色相环，切换主题，看着同一台印刷机重新渲染所有已挂载的表面。
甚至连这个项目的吉祥物，也是用那套半色调引擎压印出来的。在几乎所有 UI 库都忙着刷新色板、堆叠渐变时，Halftone UI 像是在数字屏幕上架起了一台属于印刷时代的设备，给界面带来了完全不同的物质感和纹理逻辑。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
