blotter.ts

Eccentric ways to render words on screen.

Blotter hands the words on your page to a GLSL shader and gives each one back as a canvas that still reads like type. One WebGL context, one draw call, every text on screen.

A TypeScript rewrite of Bradley Griffith’s Blotter: ESM, typed, tree-shakeable, with three as a peer dependency.

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

const text = new Text("Hello", { family: "serif", size: 96 });
const blotter = new Blotter(new ChannelSplitMaterial(), { texts: text });

blotter.forText(text)?.appendTo(document.body);
await blotter.ready;