Text Morph

Animate changing text with shared letters that move into place, soft arrivals, and a smoothly resizing width.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/text-morph

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

Animate changing text with shared letters that move into place, soft arrivals, and a smoothly resizing width.

Demo values are local; no network requests.

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

<TextMorph>{saved ? "Saved" : "Save"}</TextMorph>

Props

Prop	Type	Description
`children`	`string`	The current label. Change it to start a morph.
`duration`	`number · 460`	Duration in milliseconds.
`direction`	`"up" \| "down"`	The direction new characters enter from. Defaults to up.
`animateWidth`	`boolean · true`	Animate the inline width; disable for multi-line text.