Text 3D

ProNew

A heading extruded into real 3D geometry with bevelled edges that rocks gently and leans toward the pointer.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/text-3d

Usage

Props

Prop	Type	Default	Description
`text`	`string`	`-`	The text to extrude. One to three words read best.
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span"`	`"h2"`	Element that carries the text for screen readers and search engines.
`depth`	`number`	`0.35`	Extrusion depth relative to the letter height.
`bevel`	`boolean`	`true`	Round the edges.
`color`	`string`	theme	Face colour. Defaults to `--primary`.
`sideColor`	`string`	darker face	Colour of the extruded sides.
`sway`	`boolean`	`true`	Gently rock the text.
`speed`	`number`	`1`	Sway speed multiplier.
`fill`	`number`	`0.86`	Fraction of the width the text may fill.
`font`	`FontData`	Geist Bold	A three.js typeface JSON font.
`className`	`string`	`-`	Classes for the outer element.

Fonts

The default font is a Latin subset of Geist Bold (SIL Open Font License) converted to the three.js typeface format, about 44 kB, loaded with the scene. To use another face, convert it with facetype.js and pass the JSON as font.

Performance and accessibility

three.js loads only when the component comes within 200px of the viewport, in its own chunk, so pages that do not show it never download it.
Rendering pauses while it is offscreen or the tab is hidden, and the pixel ratio is capped at 2.
With prefers-reduced-motion: reduce it renders a single still frame.
Without WebGL, or before the scene loads, a static gradient is shown instead.
Colours come from your theme's CSS variables and update when the theme changes.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/text-3d

Usage

Props

Prop	Type	Default	Description
`text`	`string`	`-`	The text to extrude. One to three words read best.
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span"`	`"h2"`	Element that carries the text for screen readers and search engines.
`depth`	`number`	`0.35`	Extrusion depth relative to the letter height.
`bevel`	`boolean`	`true`	Round the edges.
`color`	`string`	theme	Face colour. Defaults to `--primary`.
`sideColor`	`string`	darker face	Colour of the extruded sides.
`sway`	`boolean`	`true`	Gently rock the text.
`speed`	`number`	`1`	Sway speed multiplier.
`fill`	`number`	`0.86`	Fraction of the width the text may fill.
`font`	`FontData`	Geist Bold	A three.js typeface JSON font.
`className`	`string`	`-`	Classes for the outer element.

Fonts

Performance and accessibility

three.js loads only when the component comes within 200px of the viewport, in its own chunk, so pages that do not show it never download it.
Rendering pauses while it is offscreen or the tab is hidden, and the pixel ratio is capped at 2.
With prefers-reduced-motion: reduce it renders a single still frame.
Without WebGL, or before the scene loads, a static gradient is shown instead.
Colours come from your theme's CSS variables and update when the theme changes.