UI by hampton.io

Back to Components

Text Effects

Morph Text

Morphs between words with a smooth blur and slide transition.

Seamless transitions between product highlights.

Build for momentum

Dependencies

clsx
tailwind-merge
framer-motion

Files

components/ui/morph-text.tsx

Installation

Using shadcn CLI

npx shadcn add morph-text --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion