Text

text turns the element text content into 3D geometry.

Use it when the source of truth should remain text, but the final result needs depth, lighting, material response, or spatial composition.

When to use it

Use text when:

the content is still text, not an image
copy may change over time
typography should become part of the 3D composition
you want to keep layout and authoring close to the DOM layer

Runtime contract

Activation

HTML

<h1 string="3d" string-3d="text">ST3D</h1>

Font registration

Before using custom fonts, register them through the static API:

TypeScript

import { String3D } from 'string-tune-3d';

String3D.registerFont('Display', '/fonts/display.ttf', { default: true });

Key CSS variables

Variable	Default	Effect
`--text-depth`	`8`	Extrusion depth
`--text-curve-segments`	`8`	Curve detail
`--text-bevel-size`	`0`	Bevel size
`--text-bevel-thickness`	`0`	Bevel thickness
`--text-bevel-offset`	`0`	Bevel offset
`--text-bevel-steps`	`0`	Bevel segments
`--text-fit`	`contain`	Fit behavior inside the DOM box

Text also participates in the shared transform and material contract.

Example

HTML

<h1
  string="3d"
  string-3d="text"
  style="
    width: 360px;
    height: 120px;
    --text-depth: 12;
    --text-bevel-size: 0.5;
    --material-color: #f8f1df;
    --rotate-y: 18;
  "
>
  ST3D
</h1>

What the runtime does

It reads the actual text content from the element.
It resolves the active font through the font registry and provider.
It builds 3D text geometry through the engine abstraction.
It fits that geometry back into the element-defined layout box.

Practical note

text is strongest when the wording itself matters. If the visual source is already vector artwork rather than actual copy, svg is usually the cleaner object type.