液态文字特效
Blotter.js,Bradley Griffith,2016 年

正在布展…
它是怎么做的
- 第 1 步先把文本渲染到 2D canvas 生成纹理。
- 第 2 步把纹理交给 WebGL,用材质(Material)着色器对 UV 做扰动、分通道偏移。
- 第 3 步多段文字共享一张纹理图集和一个 GL 上下文,降低开销。
- 第 4 步Uniform 可在运行时修改,实现悬停时速度/强度变化。
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Draw the text with fillText into an offscreen 2D canvas sized with device pixel ratio and padding for distortion overflow. Upload it as a texture to a WebGL quad and write a fragment shader that offsets UVs with time-varying noise or sine waves before sampling, optionally sampling R, G and B at slightly different offsets. Expose uniforms such as speed and strength and tween them on pointerenter. Keep the real text in the DOM (visually hidden) for accessibility and selection.
档案
性能开销
轻重
视觉强度
安静强烈
实现难度
一个下午数周打磨
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Site loads (HTTP 200, title 'Blotter.js'); read license.txt in repo (The MIT License, Bradley Griffith).


