DocsText Morph

Text Morph

A fluid typography transition that blends blurred word silhouettes through an SVG alpha threshold, then releases the filter for a perfectly crisp resting state.

Installation

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

Usage

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

<TextMorph
  words={["IMAGINE", "REFINE", "RELEASE"]}
  interval={2400}
  morphDuration={680}
  subtext="From idea to impact"
/>

API Reference

Property	Type	Default
`words` Words or phrases displayed by the morph sequence.	`string[]`	`["IMAGINE", "REFINE", "RELEASE"]`
`interval` Time each word rests before the next morph begins, in milliseconds.	`number`	`2600`
`morphDuration` Duration of the fluid morph in milliseconds.	`number`	`680`
`blur` Maximum blur used to merge the two silhouettes.	`number`	`12`
`threshold` Alpha contrast applied by the SVG threshold filter.	`number`	`18`
`subtext` Optional supporting text shown below the morph.	`string`	—
`fontSize` CSS font-size value for the morphing text.	`string`	`"clamp(3rem, 14vw, 9rem)"`
`fontFamily` Font family for the morph and subtext. No remote font is loaded.	`string`	`"inherit"`
`fontWeight` CSS font weight for the morphing text.	`CSSProperties["fontWeight"]`	`700`
`align` Horizontal alignment of the text and supporting copy.	`"left" \| "center" \| "right"`	`"center"`
`animateWidth` Smoothly interpolate width between differently sized words.	`boolean`	`true`
`loop` Continue cycling through the supplied words.	`boolean`	`true`
`pauseOnHover` Pause the next cycle while hovered or focused.	`boolean`	`true`
`className` Additional classes applied to the root wrapper.	`string`	—
`textClassName` Additional classes applied to the morphing text stage.	`string`	—
`subtextClassName` Additional classes applied to the supporting text.	`string`	—
`onMorphStart` Called immediately before a morph begins.	`(nextWord: string, nextIndex: number) => void`	—
`onMorphComplete` Called after the next word becomes crisp and stable.	`(word: string, index: number) => void`	—

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

Fluid typography study

Hover to pause680ms morph

Property

Type

Default

words

Words or phrases displayed by the morph sequence.

string[]

["IMAGINE", "REFINE", "RELEASE"]

interval

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

number

2600

morphDuration

Duration of the fluid morph in milliseconds.

number

680

blur

Maximum blur used to merge the two silhouettes.

number

12

threshold

Alpha contrast applied by the SVG threshold filter.

number

18

subtext

Optional supporting text shown below the morph.

string

—

fontSize

CSS font-size value for the morphing text.

string

"clamp(3rem, 14vw, 9rem)"

fontFamily

Font family for the morph and subtext. No remote font is loaded.

string

"inherit"

fontWeight

CSS font weight for the morphing text.

CSSProperties["fontWeight"]

700

align

Horizontal alignment of the text and supporting copy.

"left" | "center" | "right"

"center"

animateWidth

Smoothly interpolate width between differently sized words.

boolean

true

loop

Continue cycling through the supplied words.

boolean

true

pauseOnHover

Pause the next cycle while hovered or focused.

boolean

true

className

Additional classes applied to the root wrapper.

string

—

textClassName

Additional classes applied to the morphing text stage.

string

—

subtextClassName

Additional classes applied to the supporting text.

string

—

onMorphStart

Called immediately before a morph begins.

(nextWord: string, nextIndex: number) => void

—

onMorphComplete

Called after the next word becomes crisp and stable.

(word: string, index: number) => void

—