跳到正文
网页珍奇柜Web Curio

液态文字特效

Blotter.js,Bradley Griffith,2016 年

正在布展…

原作直展:这是 Bradley Griffith 的原始作品,按 MIT(替代字体 EB Garamond / Nunito Sans 为 OFL,Ubuntu Mono 为 Ubuntu Font Licence) 许可证收录(版本 0e6f89e)。原样展出 blotter.js.org 官网(gh-pages),去掉统计脚本;官网用的商业字体 Serapion/Avenir 不能收录,换成免费字体,所以字形与原站不同。首页巨字为色散分离效果,MATERIALS 里每种材质都有可调参数面板。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步先把文本渲染到 2D canvas 生成纹理。
  2. 第 2 步把纹理交给 WebGL,用材质(Material)着色器对 UV 做扰动、分通道偏移。
  3. 第 3 步多段文字共享一张纹理图集和一个 GL 上下文,降低开销。
  4. 第 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.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Site loads (HTTP 200, title 'Blotter.js'); read license.txt in repo (The MIT License, Bradley Griffith).