Morphing Text

Two copies cross-blur under a threshold filter so letters look like liquid flowing into the next word.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add morphing-text

Example

import { MorphingText } from "@/components/galactrex/morphing-text";

<MorphingText words={["Design", "Build", "Ship"]} />

Installs to components/galactrex/morphing-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`words`	`string[]`	—	The words.
`as`	`ElementType`	`"span"`	Element.
`every`	`number`	`2.6`	Seconds per word.
`morph`	`number`	`1`	Seconds of the melt.
`className`	`string`	—	Extra classes for the outer element.