Embossed 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 EmbossedText from "./EmbossedText";

export default function Example() {
  return (
    <EmbossedText
      text={"Made of\nsubstance."}
      color={"#aaa294"}
      highlight={"#fff2d5"}
      shadow={"#302820"}
      depth={2}
      interactive={true}
      style={{
        "fontSize": 62,
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Embossed Text

Use a large, short heading so the raised edges remain visible. Adjust color, highlight, and shadow together to create the chosen material.

depth controls the edge treatment in pixels. Set interactive to false to keep the lighting fixed when the pointer moves.

Props

Name	Type	Required	Default	Description
text	string	No	""	Your text; newlines and wrapping are supported.
color	string	No	"#a9a39a"	Base metallic face colour.
highlight	string	No	"#fff5df"	Light on the raised edge.
shadow	string	No	"#27221b"	Shadow below the raised edge.
depth	number	No	2	Edge depth in pixels, clamped to zero or above.
interactive	boolean	No	true	Move the light direction with the pointer.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.