blotter

The Basics

To get started, install Blotter from npm together with three, which it depends on as a peer dependency: 

npm install blotter.ts three

Blotter ships as an ES module with TypeScript types. Everything you need comes from two entry points: the core classes from blotter.ts, and the ready-made effects from blotter.ts/materials. Import what you use; the rest is tree-shaken away. 

import { Blotter, Material, Text } from "blotter.ts";
import { ChannelSplitMaterial } from "blotter.ts/materials";

Plain Text

Before adding any effects, you should learn how to replace text in your document with plain text rendered1 by Blotter. Instances of Blotter take at least one Text object and a single Material object, which is the source of any Blotter effect you wish to apply to your texts.

In the following example, we create a single Text object, apply the basic Material (which simply draws the Text as described by its properties) and add the rendered canvas to an element on the page. The examples on this page run as you type; output is the element below each editor. 

// BLOTTER - Example 1
import { Blotter, Material, Text } from "blotter.ts";

const text = new Text("observation", {
  family: "'EB Garamond', serif",
  size: 27,
  fill: "#202020",
});

const material = new Material();

const blotter = new Blotter(material, {
  texts: text,
});

const scope = blotter.forText(text);

scope.appendTo(output);
await blotter.ready;

Ready-made Effects

Blotter is a tool designed to allow anyone, regardless of their knowledge of GLSL itself, to use the power of GLSL fragment shaders2 to create and apply real-time visual effects to texts on the web. To this end, Blotter provides a growing collection of ready-to-use and configurable materials.

The configurability of provided materials will depend on the material itself, but the basic interface will typically center around the manipulation of “uniforms”. Think of uniforms as values that describe how effects are rendered. For example, a material that bends and distorts your text as if viewed on the bottom of a pool might have a uniform called uSpeed to help you control the speed at which the distortion occurs when animated.

Below, we will use Blotter's ready-made LiquidDistortMaterial to illustrate how to use Blotter materials by controlling uniforms. 

// BLOTTER - Example 2
import { Blotter, Text } from "blotter.ts";
import { LiquidDistortMaterial } from "blotter.ts/materials";

const text = new Text("observation", {
  family: "'EB Garamond', serif",
  size: 27,
  fill: "#171717",
  paddingLeft: 40,
  paddingRight: 40,
});

const material = new LiquidDistortMaterial();

// Play with the value for uSpeed. Lower values slow
// down animation, while higher values speed it up. At
// a speed of 0.0, animation is stopped entirely.
material.uniforms.uSpeed.value = 0.25;

// Try uncommenting the following line to play with
// the "volatility" of the effect. Higher values here will
// produce more dramatic changes in the appearance of your
// text as it animates, but you will likely want to keep
// the value below 1.0.
// material.uniforms.uVolatility.value = 0.3;

const blotter = new Blotter(material, {
  texts: text,
});

const scope = blotter.forText(text);

scope.appendTo(output);
source code