Text

Plain

Flat solid text from the font outlines with a weight axis, an optional outline and soft edges, anti-aliased from a signed distance field. Use for labels, captions, prices, menus and titles.

  • plain
  • label
  • caption
  • solid
  • flat
  • sans
  • title
  • text

Settings and defaults

Colour
#ffffff
Weight
0 em
Outline
0 em
Opacity
1
Outline colour
#111111
Fill
1
Softness
0 em
Font
Inter
Draw
Fade
Draw duration
1.2 s
Draw easing
Smooth
Draw stagger
0.6
Draw direction
0 °
Erase
Fade
Erase duration
0.8 s
Erase easing
Smooth
Erase stagger
0.6
Erase direction
0 °
Play on load
On
Loop
Off
Yoyo
Off
Hold
2 s
Hidden pause
0.5 s
Shown
On

Plain is flat, solid text: the everyday label, caption, price, menu line or title in a 3D scene. It has no idle motion; it simply stands where you put it, sharp at any distance.

How it works

The letter outlines are turned once into a distance map: for every point, how far it is from the nearest edge of a letter. The text is drawn from that map, so its edges stay smooth and crisp however close the camera gets, and the weight, outline and softness are all just different cuts of the same map.

Settings

  • Font: clean faces such as Inter, Roboto, Montserrat, Oswald, Bebas Neue, Playfair Display and Lora, plus the handwriting faces.
  • Weight makes every letter bolder or lighter, like a variable font.
  • Outline adds a line just outside the letters in its own Outline colour; set Fill to 0 for hollow, outline-only lettering.
  • Softness widens the edge from crisp to a soft printed look.
  • Draw and Erase pick how it appears and disappears: Pen, Trace, Wipe, Radial, Scatter, Dissolve, Fade and more.

Use it for

  • Labels and captions next to products
  • Prices, menus and UI text inside a scene
  • Titles that need to stay readable

For letters with real depth and a material, use 3D Text.

Code and API

Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.

See plans

More text

Works well with

Used in