Letters that lift off the page in 3D near the cursor
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "Raise the standard." | Text to display. Words wrap as whole units and whitespace is preserved. |
as | "span" | "div" | "p" | "h1" | … | "h6" | "span" | Element to render. The component inherits font, size and alignment from its parent. |
color | string | "currentColor" | Colour of the letter faces. Defaults to the surrounding text colour. |
colors | string[] | ["#B19EEF", "#3A1DB8"] | Two colours for the extrusion. Solid: a gradient from the edge nearest the letter to the deepest point. Stack: the outline of each plate, then its fill. |
extrusion | "solid" | "stack" | "solid" | A smooth solid extrusion, or a stack of separate outlined plates. |
plates | number | 7 | Maximum number of plates in the stack at full lift, from 1 to 16. |
lift | number | 0.5 | How high the letters under the pointer rise, relative to the font size. |
radius | number | 1.4 | Size of the area around the pointer that lifts, relative to the font size. |
view | "pointer" | "fixed" | "pointer" | Pointer: the letters are seen in perspective from above the pointer, so the sides you see change as it moves. Fixed: every letter extrudes in the same direction, set by angle. |
perspective | number | 1.3 | Strength of the perspective, which sets how long the extrusions get. |
angle | number | 35 | Direction the extrusions point in fixed view, in degrees. 0 points right, 90 points down. |
stiffness | number | 1 | Stiffness of the springs lifting each letter. Higher values respond faster. |
damping | number | 0.5 | Damping of the springs. Lower values overshoot and bounce more. |
pop | number | 1 | Strength of the jump a click gives the letters around it. 0 turns it off. |
shadow | number | 0.6 | Soft contact shadow under raised letters, from 0 to 1. |
intro | boolean | true | A lift sweeps once through the text the first time it scrolls into view. |
area | "parent" | "self" | "parent" | Where the pointer is followed: anywhere over the parent element, or only over the text. |
paused | boolean | false | Holds the letters flat. Reduced-motion users always get this. |
ref | { wave, pop } | — | Imperative controls: sweep a lift through the text, or make the letters jump from a point. |
className | string | — | Classes for the root element, for example font size and weight. |
style | CSSProperties | — | Inline styles for the root element. |
textstringText to display. Words wrap as whole units and whitespace is preserved.
"Raise the standard."as"span" | "div" | "p" | "h1" | … | "h6"Element to render. The component inherits font, size and alignment from its parent.
"span"colorstringColour of the letter faces. Defaults to the surrounding text colour.
"currentColor"colorsstring[]Two colours for the extrusion. Solid: a gradient from the edge nearest the letter to the deepest point. Stack: the outline of each plate, then its fill.
["#B19EEF", "#3A1DB8"]extrusion"solid" | "stack"A smooth solid extrusion, or a stack of separate outlined plates.
"solid"platesnumberMaximum number of plates in the stack at full lift, from 1 to 16.
7liftnumberHow high the letters under the pointer rise, relative to the font size.
0.5radiusnumberSize of the area around the pointer that lifts, relative to the font size.
1.4view"pointer" | "fixed"Pointer: the letters are seen in perspective from above the pointer, so the sides you see change as it moves. Fixed: every letter extrudes in the same direction, set by angle.
"pointer"perspectivenumberStrength of the perspective, which sets how long the extrusions get.
1.3anglenumberDirection the extrusions point in fixed view, in degrees. 0 points right, 90 points down.
35stiffnessnumberStiffness of the springs lifting each letter. Higher values respond faster.
1dampingnumberDamping of the springs. Lower values overshoot and bounce more.
0.5popnumberStrength of the jump a click gives the letters around it. 0 turns it off.
1shadownumberSoft contact shadow under raised letters, from 0 to 1.
0.6introbooleanA lift sweeps once through the text the first time it scrolls into view.
truearea"parent" | "self"Where the pointer is followed: anywhere over the parent element, or only over the text.
"parent"pausedbooleanHolds the letters flat. Reduced-motion users always get this.
falseref{ wave, pop }Imperative controls: sweep a lift through the text, or make the letters jump from a point.
—classNamestringClasses for the root element, for example font size and weight.
—styleCSSPropertiesInline styles for the root element.
—