motion-words
Cycles through an array of words with a spring-based vertical slide. Each word can have its own color. Designed to be used inline inside headings.
Preview
We help you
Import
Usage
How it works
The component is display: inline-block with overflow: hidden, so it clips to one line of text. On each cycle interval, the
current word animates out upward with a fast ease-in (0.22s), then the next word springs in from below. Because it's inline, it sits naturally alongside
surrounding text in headings.
If words have different lengths, the container width adjusts naturally on each swap. Set a min-width on the element via CSS to prevent layout
shift if needed.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | — | Comma-separated list of words to cycle through |
| | | string | currentColor | Comma-separated colors, one per word. Any valid CSS color value. |
| | | number | 2000 | Time in ms between word changes |
| | | number | 0.5 | Spring animation duration hint in seconds |
Accessibility
When prefers-reduced-motion is set, words swap instantly with no animation.