Text Lift
0
Used by 0Controls
Text Lift
Stack each letter into a layered 3D extrusion that expands and lifts off the surface when you hover it individually.
KEY FEATURES
- — Per-letter hover lift driven by a spring animation
- — Six push directions for the extruded depth
- — Adjustable layer count up to 10 for stack density
- — Separate rest and hover offset positions
- — Optional depth fade with opacity falloff across layers
- — Solid fill or outline stroke rendering
- — Independent front-face and depth fill colors
- — Configurable stroke width and color
- — Customizable spring transition settings
- — Extended font control for family, size, weight, and spacing
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
text
string
TEXT LIFT
The text to render; each letter becomes its own hoverable 3D stack.
direction
enum
bottomRight
Direction the layers push for depth: top, bottom, or a diagonal corner.
depth
number
10
Number of stacked copies per letter; more layers make a thicker extrusion.
spread
number
0
Per-layer offset at rest in px; 0 collapses the stack flat.
expand
number
18
Per-layer offset when a letter is hovered; higher lifts it further off the surface.
fade
boolean
true
Progressively fades the deeper layers so back copies grow more transparent.
filled
boolean
true
Fills the letters solid; off leaves only the outline stroke.
stroke
number
3
Outline width around each letter in px; 0 removes the stroke.
strokeColor
color
#FFFFFF
Color of the letter outline stroke.
frontColor
color
#FFFFFF
Fill color of the readable front face of each letter.
depthColor
color
#FFFFFF
Fill color of the stacked depth layers behind the front face.
transition
transition
{"..."}
Spring transition that drives the lift and settle motion on hover.
font
font
{"..."}
Font family, weight, size, spacing, and alignment of the text.
