Text
Draw text in any font as a distance field, and let your app change it.
The Text node turns a line or paragraph of text into a signed distance
field: a float that is negative inside the letters, zero on their outline
and grows with the distance from them. It works like the shapes in the
Shapes presets, so Fill, Stroke, Glow and Shadow draw it,
and Round, Onion and the smooth booleans reshape it.
Add Text from the picker, type into it and wire its output into Fill.
Placing it
| Input | Type | Default | What it does |
|---|---|---|---|
uv | vec2 | the mesh uv | The space the text is drawn in |
center | vec2 | [0.5, 0.5] | Where the middle of the text block sits |
size | float | 0.2 | The font size, as a fraction of the height |
Wire a distort into uv to bend the text, or animate center and size to
move and scale it.
Fonts and style
Pick from more than 50 Google Fonts, grouped into sans serif, serif,
monospace, display and handwriting: Inter, Geist, Roboto, Montserrat,
Poppins, DM Sans, Playfair Display, Fraunces, Geist Mono, JetBrains Mono,
Bebas Neue, Caveat and many more. Or choose Upload a font to use your own
.ttf, .otf, .woff or .woff2 file. Uploaded fonts are private until
you publish the shader, like images.
The node also sets the weight (for fonts that come in several), the alignment of multiple lines, the spacing between letters and the leading between lines.
Let your app set the text
Expose the node as an input and pass a string:
<Shader id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21" inputs={{ title: "Hello" }} />Changing it updates the shader in place, without a reload.
Limits
A text node holds up to 500 characters. The distance is exact near the letters and an approximation far from them, so very wide glows and shadows round off towards a rectangle around the text.