VOIDTYPE

Kinetic particle typography on a pure-black canvas. less is more 与 Slow down to speed up. 由数万个粗颗粒组成；指针让画面轻摆，并通过流体网格扰动字形。

VOIDTYPE 是一个独立的 Three.js / Vite 实验，不依赖任何业务网站、框架或数据。

运行

npm install
npm run dev

生产构建：

npm run build
npm run preview

文件

• index.html：最小演示结构。
• src/style.css：全黑全屏展示页面与粒子容器。
• src/main.ts：样式与粒子入口。
• src/particle-wordmark.ts：完整粒子算法，来自当前首页实现。
• TWEET.md：可直接发布的 X 文案。
• IMPLEMENTATION.md：算法和参数说明。

换成自己的文字

修改 index.html 中这一行：

<span class="wordmark-source" data-particle-source>
  <span data-particle-line>less is more</span>
  <span data-particle-line>Slow down to speed up.</span>
</span>

每个 data-particle-line 对应一行。字体、字号和字重由 .wordmark-source 控制；程序会把多行文字居中绘制到离屏 Canvas，再从字形像素生成粒子的 home positions。

交互模型

1. 离屏 Canvas 采样文字 alpha。
2. Three.js Points 绘制数万个 1.6px 的高亮颗粒；实际数量随文字行数与视口变化，尺寸包含原站渲染链路中的两次 DPR 放大。
3. 整块演示板根据指针位置做最大 2.8° 的双轴倾斜，并用每帧 0.08 缓动追随和回正。
4. 指针无论是否碰到文字，都会把移动速度注入 10px 流体网格。
5. 输入只在动画帧中采样一次，避免高刷新率鼠标重复灌入动量。
6. 指针离文字较远时，只有传播过来的微弱压力波；掠过字形时自然形成明显流动。
7. 每帧先用已经过阻尼的旧速度判断回位，再读取新的流场速度：粒子能自然散开；速度降到 0.5 以下时，0.05 秒回位曲线直接接管。

降级

prefers-reduced-motion、WebGL 初始化失败或上下文丢失时，保留静态文字。DPR 上限为 2；页面离屏或切到后台时暂停动画。

权利说明

流体网格算法改编自 MIT 许可的公开 fluid.js 模型，并依据 newmix 公开可观察的运行行为调校；没有包含 newmix 的视觉资产或生产源码。发布代码前请保留 THIRD_PARTY_NOTICES.md。