Question 1

How do I use custom fonts with Blotter?

Accepted Answer

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.

Question 2

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

Accepted Answer

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.

Question 3

How to create a custom material in Blotter?

Accepted Answer

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.

Question 4

Is Blotter good for SEO?

Accepted Answer

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.

Question 5

Can I use Blotter with React or Vue.js?

Accepted Answer

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.

Question 6

How does Blotter handle performance with many text elements?

Accepted Answer

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.

Blotter

What is Blotter?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions