<TextRender />

Dimensional typography for the web

Install

$npm install @tuckermcl/textrender

import { TextRender } from "@tuckermcl/textrender";

<TextRender puff={0.8}>
  <span>Hello world</span>
</TextRender>

v0.1.3GitHubMade by Tucker

Props

puffnumber = 0.29: Sets outline expansion. Clamped from 0 to 1.
baseColorstring = "#000000": Sets the base color for the text.
highlightColorstring = "#ffffff": Sets the color of highlights.
shadowColorstring = "#000000": Sets the color of the darkest unlit areas.
bounceShadowColorstring = "#6e6e6e": Sets the color of a secondary shadow opposite the key light.
roundnessnumber = 0.26: Controls glyph-corner rounding. Clamped from 0 to 1.
depthnumber = 0.62: Controls crown depth, similar to a bevel. Clamped from 0 to 1.
smoothingnumber = 0.64: Controls normal-sampling distance. Clamped from 0 to 1.
lightXnumber = -0.67: Sets the horizontal direction of the primary light.
lightYnumber = 0.75: Sets the vertical direction of the primary light.
lightZnumber = 0.88: Controls primary-light height.
highlightSizenumber = 0.78: Controls the highlight size; Higher values produce a broader highlight. Clamped from 0 to 1.
glossnumber = 0.83: Controls the glossiness of the highlight. Clamped from 0 to 1.
brightnessnumber = 0.41: Controls overall brightness of the effect. Clamped from 0 to 1.
bounceStrengthnumber = 0.87: Controls the opposing-light shadow strength. Clamped from 0 to 1.