Editorialper-word
Kinetic Center Build
Words enter from the right, pushing the line to stay centered.
Installation
Run the following command:
pnpmdlx shadcn@latest add https://mutype.dev/r/kinetic-center-build.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| spec | AnimationSpec | — | Animation spec object (imported from components/mutype/specs/<id>). |
| text | string | — | The text to animate. |
| as | "span" | "div" | "h1"–"h4" | "p" | "span" | The HTML element to render. |
| triggerKey | string | number | — | Re-runs the animation when the value changes. |
| duration_multiplier | number | 1 | Scales duration_ms and stagger_ms uniformly. >1 slower, <1 faster. |
| y_travel_multiplier | number | 1 | Multiplier on y_px values; useful to dampen lift on small text. |
| forceReducedMotion | boolean | false | Forces the reduced-motion fallback even when the user has not opted in (testing). |
| onFinished | () => void | — | Fires once when the enter phase completes (not on cancel). |
| className | string | — | Tailwind / CSS class names. Forwarded to the host element. |
Usage notes
Layout-aware. Each new word changes the target x-position of the whole line; the renderer must measure word widths and animate existing words to their new positions on each insertion. Best for 3–4 word phrases. The reflow blur (0.8) on existing words helps the push read as one motion. For longer phrases use depth-parallax-words.
Inspired by Apple keynote kinetic editorial typography; sequential phrase builds..