How do I use custom fonts with Blotter?

Blotter supports custom fonts through the @font-face CSS rule. Define your font in CSS and reference the family name in Blotter.Text options, similar to standard web typography, allowing for branded text effects.

Blotter vs CSS text effects: which is better for animations?

Blotter is superior for complex, shader-based animations that CSS can't replicate, like GLSL-driven distortions. Use CSS for simple transitions or when text needs to remain selectable and lightweight.

How to create a custom material in Blotter?

Refer to the Custom Materials wiki on GitHub; it requires GLSL shader knowledge, but Blotter provides helper functions and a framework to bootstrap new effects, though it's not beginner-friendly.

Is Blotter good for SEO?

No, because Blotter renders text to canvas, search engines may not index the content effectively. It's best used for decorative elements where SEO isn't a priority.

Can I use Blotter with React or Vue.js?

Yes, but integration requires manual DOM handling in lifecycle methods, as Blotter is a vanilla JavaScript library. You'll need to manage Blotter instances and clean-up to avoid memory leaks.

How does Blotter handle performance with many text elements?

Blotter optimizes performance via texture atlasing, batching texts with the same effect into a single draw call. However, excessive use or complex shaders can still impact framerate, so test on target devices.

Open-Awesome

Blotter

NOASSERTIONJavaScript

A JavaScript API for drawing unconventional text effects on the web using WebGL and GLSL shaders.

Visit Website GitHub

3.1k stars200 forks0 contributors

What is Blotter?

Blotter is a JavaScript API that allows developers and designers to apply advanced, unconventional text effects on the web using WebGL and GLSL shaders. It solves the limitation of CSS by enabling animated, shader‑based typography for graphic text elements like titles and headings, rendering them efficiently in canvas.

Target Audience

Frontend developers and web designers looking to create visually striking, animated text effects for headings, logos, or graphic typography without writing low‑level GLSL code.

Value Proposition

Blotter offers an accessible, performance‑optimized way to leverage WebGL shaders for text effects, with a pre‑built library of materials and an API that abstracts complex rendering, making it ideal for creative web projects.

Overview

A JavaScript API for drawing unconventional text effects on the web.

Use Cases

Best For

Creating animated title text with shader‑based effects
Adding playful, non‑CSS typography to website headers
Building graphic text elements for creative portfolios
Implementing WebGL‑powered text animations without deep GLSL knowledge
Enhancing branding with dynamic, custom text rendering
Experimenting with computational typography in web projects

Not Ideal For

Projects requiring text to be selectable or accessible for screen readers
Lengthy body text or content-heavy pages where semantic HTML is essential
Static sites that rely on server-side rendering without client-side JavaScript

Pros & Cons

Pros

Accessible GLSL Effects

Provides a simple API and growing library of configurable materials that abstract GLSL shader complexity, allowing non-experts to apply advanced text effects without coding shaders from scratch.

Efficient WebGL Rendering

Uses texture atlasing to batch draw calls in a single WebGL context, improving performance when multiple texts share the same effect, as detailed in the atlasing explanation.

Optimized Animation Loop

Leverages requestAnimationFrame to sync with browser refresh rate and pause in inactive tabs, enhancing performance and battery life, per the animation loop section.

Custom Font Support

Supports custom fonts via @font-face, enabling designers to maintain branding while applying effects, mentioned in the styling properties.

Cons

Non-Selectable Text

Renders text to canvas elements, making it impossible for users to select or copy text, a limitation explicitly admitted in the 'What Blotter Isn't' section.

Dependency Heavy

Requires Three.js and Underscore.js, adding to bundle size, and while a custom build of Three.js is used, it can complicate setups if other versions are already in use.

Limited to Graphic Text

Not suitable for body text or lengthy content, restricting its use to titles and headings, as stated in the README, which narrows its applicability.

Frequently Asked Questions

Related Projects

Typed.js

A JavaScript Typing Animation Library

Stars16,270

Forks1,740

Last commit9 months ago

Malarkey

:keyboard: Simulate a typewriter effect in vanilla JavaScript.

Stars237

Forks16

Last commit5 years ago

Shuffle-text

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

Stars136

Forks18

Last commit3 months ago

Typebot

Javascript library for typing animation

Stars18

Forks1

Last commit10 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub