Skip to content
[lettra for agents]
Download .md

What Lettra is, when to use it, how to start, and where the source is. Or and hand it to your agent.

What Lettra is

[about]
name
Lettra
by
JOYCO Studio
package
lettra
renderer
Three.js WebGPURenderer
text
MSDF, Latin script
license
MIT

Lettra is a TypeScript library for MSDF text in Three.js: baked font atlases, kerned layout and composable TSL materials. Made by JOYCO. This site shows it off in one journey: a tree canopy, a lake, a sheet of paper on it, and a stack of TVs.

lettra handles font data and layout; lettra/three turns it into geometry, materials and effects. You install it in your project. No account or API key.

When to use it

[scope]
  • Text that lives in a Three.js scene: a camera path, a screen, a sign, a label.
  • Latin display type that stays sharp as the camera, scale and angle change.
  • Text effects composed in TSL: wipes, dissolves, scrambles, input-driven animation.

For regular page copy, use HTML. Lettra has no complex-script shaping, bidi or color emoji. Check that the atlas covers your characters. Requires three/webgpu, also for the WebGL2 fallback.

Getting started

[setup]

Give your agent a font you’re allowed to use, the words, and the scene. Say how the text should move, appear, disappear or react to input.

npx skills add joyco-studio/lettra
pnpm add lettra three

Bake the font first. Lettra loads a metrics JSON and an MSDF atlas PNG, not a font file. Check the filenames, glyph coverage and kerning report.

npx lettra bake font.ttf --charset latin-es --size 64 --pxrange 8 --out public/fonts/display

Import from lettra/three and use the three/webgpu renderer. Load the metrics and atlas, create the text, add text.mesh to the scene, and warm it up before showing it. Check the docs for your installed version.

Open source, MIT

[license]

MIT License, © 2026 joyco.studio. Use, modify and distribute it, commercially too, as long as you keep the copyright notice. No warranty. See the license for exact terms.

Fonts have their own licenses. Lettra’s license doesn’t let you redistribute a third-party font.

Give your agent a direction

[brief]
File:
brief.txt
Build a Three.js scene using Lettra and the supplied font.Use the text: “Words you can walk through.”Bake and load a matching MSDF atlas and font metrics.Place the words between objects so depth and occlusion are visible.Add a cursor-driven response and a keyboard-accessible control.Keep semantic HTML for reading and navigation.Respect reduced motion and provide a fallback if graphics fail.Check the installed Lettra documentation before choosing APIs.

What this site shows

[experiments]
  • Canopy: type between branches as the camera moves through.
  • Perspective: leaves falling in front of and behind the letters.
  • Lake: cursor trails and ripples bend the text.
  • Rich text: a sheet on the pond in several weights and italics, editable live.
  • Televisions: the sheet scene on a screen, then a camera ride along a cable.

Go to the source

[resources]

Read without the canvas

[markdown]

Send Accept: text/markdown to get Markdown, or use the .md URLs. llms.txt indexes the same content; sitemap.xml lists the HTML pages.