DocsText Morph

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

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

PropertyTypeDefault
words

Text, numbers, prices, or short phrases displayed by the morph sequence.

string[]["IMAGINE", "REFINE", "RELEASE"]
interval

Time each value rests before the next morph begins, in milliseconds.

number2600
morphDuration

Duration of the fluid morph in milliseconds.

number680
className

Additional classes for layout or typography. All visual text properties inherit naturally.

string—

View source

Click the icon in the preview panel to browse source for each variant.

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
IMAGINEREFINE