Blotter.js

Blotter.js 通过WebGL和GLSL着色器，让前端开发者无需编写着色器代码即可为网页文本添加液体扭曲、滚动变形等非常规动画效果，突破CSS文本特效的局限。

核心能力

Blotter.js 提供了一套基于GLSL着色器的文本特效方案，所有文字渲染在单个WebGL上下文中，通过纹理图集（atlas）合并相同特效的文本，减少draw call次数。动画循环使用requestAnimationFrame，与浏览器刷新率同步，切换标签页时自动暂停以节省性能。

• 内置材质库：提供LiquidDistortMaterial（液体扭曲）、RollDistortMaterial（滚动变形）等现成特效，每个材质暴露可调uniform参数（如uSpeed、uDistortion）
• 无GLSL门槛：普通用户直接调用内置材质并调整uniform值即可；高级用户可基于Blotter.Material类快速编写自定义着色器
• 输出为Canvas：渲染结果以Canvas元素插入DOM，文本不可选中，适合标题、Logo等图形化文字，不推荐用于长文

使用方式与配置

Blotter实例至少需要一个Text对象和一个Material对象。初始化时可通过options参数控制：texts（指定文本）、ratio（设备像素比，默认自动适配）、autobuild（是否立即构建）、autostart（是否立即开始渲染）、autoplay（是否立即播放动画）。构建完成后触发ready事件，如需更新材质或文本可设置needsUpdate为true。

• 依赖要求：必须引入Three.js和Underscore.js；生产版minified体积402KB，开发版752KB
• 自定义字体：支持通过@font-face引入自定义字体，但最终渲染为Canvas，无法选中
• uniforms控制：每个材质的uniforms对象包含uTime（自上一帧经过的毫秒数，默认0.0）等参数，类型为1f（单浮点）

适用场景与限制

Blotter.js 专为需要动态、非常规文本效果的图形化场景设计，不适合长篇幅正文。官方明确建议仅用于标题、标语等短文本，且优秀逐词应用。

• 出色实践：用于首页大标题、品牌标语、动态Logo等需要视觉冲击力的短文本
• 限制说明：渲染结果不可选中、不可搜索，无法用于正文或需要SEO的文本内容

常见问题

Q1：Blotter.js 必须依赖Three.js和Underscore.js吗？

A1：是的，官网明确要求同时引入Three.js和Underscore.js。如果项目中已包含这两个库，可参考自定义构建说明进一步减小文件体积。

Q2：Blotter.js 的LiquidDistortMaterial如何控制扭曲速度？

A2：通过材质uniforms中的uSpeed参数控制，该参数为浮点数值，默认0.0。调整该值可改变液体扭曲动画的速度。

Q3：Blotter.js 渲染的文本为什么不能选中？

A3：因为Blotter将文本渲染为Canvas元素，最终输出的是像素图像而非真实DOM文本节点，因此无法选中或搜索。官方建议仅用于标题、Logo等图形化用途。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。