Tilt Text React component

Tilt Text is a free display-type effect: a large line of text rotates in 3D toward the pointer and scales up slightly while hovered, then eases back flat when the pointer leaves. It is real DOM text, so screen readers and search engines read it like any other text, and the motion is written directly to the transform each frame without re-rendering React.

text supports line breaks with \n, and fontSize, fontWeight, fontFamily, letterSpacing, lineHeight and textColor style it. autoFit sizes it to the container instead, leaving fitPadding percent on each side. tiltStrength is the maximum rotation in degrees, perspectiveDepth the CSS perspective and smoothing how quickly the tilt follows, and scaleOnHover with scaleAmount sets the zoom. useGradient fills the letters with a horizontal, vertical, diagonal or radial gradient toward gradientColorTo.

Use it for a hero headline, a 404 or 'coming soon' message, or a big closing statement on a landing page, where one short phrase should feel tactile.

For a wobbly, melting look use Liquid Text. For text made of particles, use Particle Text.