Letters that lean after the cursor on springs
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "Made to move" | 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 lettering itself. Defaults to the surrounding text colour. |
colors | string[] | ["#FF9FFC", "#5227FF"] | Two colours for the echoes: the one closest to the lettering, then the one that trails furthest. Echoes in between blend smoothly. |
echoes | number | 3 | Number of coloured echoes trailing behind the lettering, from 0 to 6. |
echoOpacity | number | 0.85 | Opacity of the echoes. They fade out completely once they catch up. |
echoLag | number | 1 | How much further behind each echo falls. 0 keeps them tight to the lettering. |
strength | number | 0.35 | How strongly the lettering is drawn towards the pointer. Low values lean, 1 chases the pointer across the area. |
reach | number | 90 | Furthest the lettering can travel from its place, in pixels. It eases into this limit. |
stiffness | number | 1 | Stiffness of the springs. Higher values follow more tightly. |
damping | number | 0.55 | Damping of the springs. Lower values overshoot and wobble more before settling. |
stretch | number | 1 | How elastic the word is: letters at the front of the motion respond faster than those behind, so it stretches as it moves and bunches as it stops. |
tilt | number | 1 | How much each letter leans with its own sideways speed. |
pluck | number | 0.7 | Strength of the kick a click or tap gives nearby letters before they spring back. 0 turns it off. |
area | "parent" | "self" | "window" | "parent" | Where the pointer is followed: anywhere over the parent element (such as a hero section), only over the text, or anywhere in the window. |
paused | boolean | false | Holds the lettering still. Reduced-motion users always get this. |
ref | { pluck, reset } | — | Imperative controls: kick the letters from a point, or send the word home. |
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.
"Made to move"as"span" | "div" | "p" | "h1" | … | "h6"Element to render. The component inherits font, size and alignment from its parent.
"span"colorstringColour of the lettering itself. Defaults to the surrounding text colour.
"currentColor"colorsstring[]Two colours for the echoes: the one closest to the lettering, then the one that trails furthest. Echoes in between blend smoothly.
["#FF9FFC", "#5227FF"]echoesnumberNumber of coloured echoes trailing behind the lettering, from 0 to 6.
3echoOpacitynumberOpacity of the echoes. They fade out completely once they catch up.
0.85echoLagnumberHow much further behind each echo falls. 0 keeps them tight to the lettering.
1strengthnumberHow strongly the lettering is drawn towards the pointer. Low values lean, 1 chases the pointer across the area.
0.35reachnumberFurthest the lettering can travel from its place, in pixels. It eases into this limit.
90stiffnessnumberStiffness of the springs. Higher values follow more tightly.
1dampingnumberDamping of the springs. Lower values overshoot and wobble more before settling.
0.55stretchnumberHow elastic the word is: letters at the front of the motion respond faster than those behind, so it stretches as it moves and bunches as it stops.
1tiltnumberHow much each letter leans with its own sideways speed.
1plucknumberStrength of the kick a click or tap gives nearby letters before they spring back. 0 turns it off.
0.7area"parent" | "self" | "window"Where the pointer is followed: anywhere over the parent element (such as a hero section), only over the text, or anywhere in the window.
"parent"pausedbooleanHolds the lettering still. Reduced-motion users always get this.
falseref{ pluck, reset }Imperative controls: kick the letters from a point, or send the word home.
—classNamestringClasses for the root element, for example font size and weight.
—styleCSSPropertiesInline styles for the root element.
—