Extruded Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ExtrudedText from "./ExtrudedText";

export default function Example() {
  return (
    <ExtrudedText
      text={"DEPTH"}
      color={"#eee5d7"}
      sideColor={"#756772"}
      depth={16}
      rotateX={14}
      rotateY={-16}
      interactive={true}
      style={{
        "fontSize": 84,
        "letterSpacing": "-.055em"
      }}
    />
  );
}

Using Extruded Text

Use a short heading with enough surrounding space for its depth. color defines the face and sideColor defines the extrusion.

Set rotateX and rotateY for the resting angle. Turn interactive off when the text should hold that angle instead of responding to the pointer.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to render as a dimensional object. It is announced only once.
color	string	No	"#eee5d7"	Front face colour.
sideColor	string	No	"#756772"	Extruded edge colour.
depth	number	No	12	Depth in pixels, built from 1 to 24 layers.
rotateX	number	No	14	Resting vertical tilt in degrees.
rotateY	number	No	-16	Resting horizontal tilt in degrees.
interactive	boolean	No	true	Add pointer-controlled rotation. Reduced-motion users see static flat text.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.