Text Morph

A fluid text primitive that blends one value into the next while preserving its visual center and inheriting the surrounding typography.

Installation

pnpm dlx shadcn@latest add @componentry/text-morph

Dependencies: clsx tailwind-merge

Usage

import { TextMorph } from "@/components/ui/text-morph"

<TextMorph
  words={["IMAGINE", "REFINE", "RELEASE"]}
  className="text-4xl font-bold tracking-tight md:text-5xl"
/>

API Reference

Prop	Type	Default
`words`	`string[]` Text, numbers, prices, or short phrases displayed by the morph sequence.	`["IMAGINE", "REFINE", "RELEASE"]`
`interval`	`number` Time each value rests before the next morph begins, in milliseconds.	`2600`
`morphDuration`	`number` Duration of the fluid morph in milliseconds.	`680`
`className`	`string` Additional classes for layout or typography. All visual text properties inherit naturally.	—

Working with this component

Write the sequence

Pass a words array of short words or phrases. The component filters blank entries and falls back to its default sequence if there are no usable values.

Timing and typography

interval controls the resting time and morphDuration controls the transition; both are measured in milliseconds. The component inherits typography, so set font size and weight on it or its surrounding element.

Content fit

Try the longest phrase at the narrowest supported width. Keep essential meaning in a stable sentence so visitors do not have to wait for a rotating phrase to understand the page.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X