Components

Morph Text

Cycles words by dissolving: the outgoing word blurs and fades while the incoming one sharpens out of the same blur with a subtle tracking widen, the two overlapping for ~40% of the transition.

Designed for clarity

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add morph-text

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { MorphText } from "@lumora/ui/components/morph-text";
// or from the barrel:
import { MorphText } from "@lumora/ui";

Props worth knowing

words cycles on a timer; interval is ms each word holds (default 2600). The outgoing word blurs and fades while the incoming one sharpens out of the same blur with a subtle tracking widen, overlapping ~40% of the transition; a sr-only live region announces each word. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.