Text Distortion Effects using Blotter.js

Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API for drawing artsy text effects. We used it to distort text on scroll and on mouse move.

The inspiration for this experiment comes from the project page of Bounce where you can see decorative letters being distorted on scroll.

If you enjoy this little experiment, you might also like Yannis’ Liquid Distortion Effects or Robin’s WebGL Distortion Hover Effects or Lucas’ Animated Heat Distortion Effects with WebGL.

Blotter gives us an easy to use interface for creating text effects that utilize GLSL shaders. You can use one of the many configurable effects (materials) or, if you are familiar with GLSL, implement completely new ones. Read the basics to understand how to use it and play with one of the materials to see it in action.

The main idea in our demos is to change the value of the material’s uniform as we scroll the page. The faster the scrolling the more the value changes. Here’s a simplified example on how to achieve this:

We hope you like this experiment and find it useful!