Text for Three.js & React Three Fiber

Text objects put words in a 3D scene with an animation built in. Type your words, choose a Font, and the text draws itself on in a look: written by a pen, lit like neon, burnt away, stitched in thread, or traced by spinning circles. For solid letters with depth that take any material, use 3d Text from the mesh family instead.

The looks

• Plain: flat, crisp text with a weight setting, an optional outline and soft edges, for labels, captions, prices and menus.
• Hand-made: Handwriting, where a pen writes in single strokes and the ink dries from wet to matte; Ink Bleed, where fountain-pen ink feathers into paper fibres; Chalkboard, with chalk dust and smudged erasing; and Embroidery, with satin, stem stitch and French knots on linen.
• Light: Neon Tube, which stutters on and settles into a steady hum; Plasma Discharge, with a white-hot arc and forking streamers along the letters; and Light Painting, written like a long-exposure photo of a sparkler.
• Materials: Liquid Metal, letters as puddles of mercury reflecting a studio; and Frost Growth, with hoarfrost crystals growing over the outlines.
• Storytelling: Burn Away, paper letters that burn along their strokes to char and ash; Constellation, where the strokes become a star chart; and Fourier Sketch, where each letter is traced by a chain of rotating circles.

Draw, erase and playback

Every look shares the same controls for how text arrives and leaves. Draw sets how it appears (Pen, Trace, Both ends, Wipe, Radial, Scatter, Dissolve, Fade or Off) and Erase how it goes (Fade, Reverse, Wipe, Radial, Scatter, Dissolve, Trace, Both ends, Pen, Cut or Off), each with its own duration, easing and stagger between letters. Play on load starts the draw when the scene starts. Loop repeats the cycle with a Hold on the finished text and a Hidden pause between rounds, and Yoyo plays the cycle forward then back. A new line in the Text box starts a second line.

All looks use the same fonts: clean faces like Inter, Montserrat and Bebas Neue, serifs like Playfair Display and Lora, and handwritten faces like Caveat, Kalam and Dancing Script.

Choosing a look

• Titles and hero lines: Neon Tube, Liquid Metal, Light Painting.
• Signatures, invitations and personal brands: Handwriting, Ink Bleed.
• Menus, classrooms and hand-made brands: Chalkboard, Embroidery.
• Science and education: Fourier Sketch, Constellation.
• Dramatic reveals: Burn Away, Plasma Discharge.
• Winter campaigns and cold brands: Frost Growth.
• Interface labels and prices: Plain.

Because the draw and erase are part of the object, text works well as a scene's opening line or as the reveal at the end of a scroll.