Words that morph letter by letter, with shared letters gliding into place
| Name | Type | Default | Description |
|---|---|---|---|
words | string[] | ["Imagine", "Create", "Launch"] | The words or short phrases to morph between, in order. |
morph | "liquid" | "blur" | "liquid" | How letters change: liquid thins old letters away and grows new ones in, blur pulls them out of and into focus. Letters both words share glide to their new place in either mode. |
color | string | "currentColor" | Colour of the text. currentColor follows the surrounding text. |
morphColor | string | "#8B5CF6" | Colour letters pass through while they change. |
tint | number | 0.3 | Strength of that colour, from 0 (none) to 1. |
align | "left" | "center" | "right" | "center" | Where shorter words sit inside the space of the longest one. |
fontFamily | string | — | Font of the words. Leave unset to inherit from the surrounding text. |
fontSize | number | — | Font size in pixels. Leave unset to inherit. |
fontWeight | number | — | Font weight. Leave unset to inherit. |
letterSpacing | number | — | Letter spacing in em. Leave unset to inherit. |
interval | number | 2.6 | Seconds from one morph to the next in auto mode. |
duration | number | 1.1 | Seconds a morph takes, from the first letter to the last. |
stagger | number | 0.25 | How much the change ripples across the word, from 0 (every letter at once) to 0.9. |
staggerFrom | "start" | "end" | "center" | "edges" | "random" | "start" | Where the ripple begins. Start follows the reading direction, so it runs right to left in RTL text. |
travel | number | 0.5 | How far changing letters drift toward their place in the next word, from 0 to 1. |
goo | number | 0.1 | How far letters reach to fuse as they pass each other, in em. |
swell | number | 0.02 | Extra weight letters gain mid-morph, in em. |
softness | number | 0.8 | How rounded letters become while they change. In blur mode, how strong the blur is. |
scale | number | 0.04 | How much leaving letters grow and arriving letters settle. |
trigger | "auto" | "hover" | "click" | "auto" | Morph on a timer, each time the pointer enters, or on click. |
loop | boolean | true | Return to the first word after the last. |
intro | boolean | true | Grow the first word in from nothing when it appears. |
startOnView | boolean | true | Wait until the text scrolls into view before starting. |
pauseOnHover | boolean | false | Hold the current word while the mouse is over it (auto mode). |
paused | boolean | false | Stop morphing on the timer. |
quality | number | 1 | Render scale from 0.5 to 1. |
onChange | (word, index) => void | — | Called after each morph with the new word. |
ref | { next, goTo } | — | next() morphs to the next word, goTo(index) to any word. |
className | string | — | Classes for the inline wrapper. It sits inside a heading like any other word. |
style | CSSProperties | — | Inline styles for the wrapper. |
wordsstring[]The words or short phrases to morph between, in order.
["Imagine", "Create", "Launch"]morph"liquid" | "blur"How letters change: liquid thins old letters away and grows new ones in, blur pulls them out of and into focus. Letters both words share glide to their new place in either mode.
"liquid"colorstringColour of the text. currentColor follows the surrounding text.
"currentColor"morphColorstringColour letters pass through while they change.
"#8B5CF6"tintnumberStrength of that colour, from 0 (none) to 1.
0.3align"left" | "center" | "right"Where shorter words sit inside the space of the longest one.
"center"fontFamilystringFont of the words. Leave unset to inherit from the surrounding text.
—fontSizenumberFont size in pixels. Leave unset to inherit.
—fontWeightnumberFont weight. Leave unset to inherit.
—letterSpacingnumberLetter spacing in em. Leave unset to inherit.
—intervalnumberSeconds from one morph to the next in auto mode.
2.6durationnumberSeconds a morph takes, from the first letter to the last.
1.1staggernumberHow much the change ripples across the word, from 0 (every letter at once) to 0.9.
0.25staggerFrom"start" | "end" | "center" | "edges" | "random"Where the ripple begins. Start follows the reading direction, so it runs right to left in RTL text.
"start"travelnumberHow far changing letters drift toward their place in the next word, from 0 to 1.
0.5goonumberHow far letters reach to fuse as they pass each other, in em.
0.1swellnumberExtra weight letters gain mid-morph, in em.
0.02softnessnumberHow rounded letters become while they change. In blur mode, how strong the blur is.
0.8scalenumberHow much leaving letters grow and arriving letters settle.
0.04trigger"auto" | "hover" | "click"Morph on a timer, each time the pointer enters, or on click.
"auto"loopbooleanReturn to the first word after the last.
trueintrobooleanGrow the first word in from nothing when it appears.
truestartOnViewbooleanWait until the text scrolls into view before starting.
truepauseOnHoverbooleanHold the current word while the mouse is over it (auto mode).
falsepausedbooleanStop morphing on the timer.
falsequalitynumberRender scale from 0.5 to 1.
1onChange(word, index) => voidCalled after each morph with the new word.
—ref{ next, goTo }next() morphs to the next word, goTo(index) to any word.
—classNamestringClasses for the inline wrapper. It sits inside a heading like any other word.
—styleCSSPropertiesInline styles for the wrapper.
—