Text Morph

Buttons 31

About

Animates text by morphing shared letters between words, creating fluid transitions

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Morph to your project and fits it to your theme.

Code

How Text Morph is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';
import { useState } from 'react';
import { TextMorph } from '@/components/ui/text-morph';

function TextMorphButton() {
  const [text, setText] = useState('Continue');

  return (
    <button
      onClick={() => setText(text === 'Continue' ? 'Confirm' : 'Continue')}
      className='flex h-10 w-[120px] flex-shrink-0 items-center justify-center rounded-full bg-black px-4 text-base font-medium text-zinc-50 shadow-sm transition-colors hover:bg-zinc-800 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200'
    >
      <TextMorph>{text}</TextMorph>
    </button>
  );
}

function TextMorphInput() {
  const [text, setText] = useState('Craft');

  return (
    <div className='flex flex-col items-center justify-end space-y-12'>
      <TextMorph className='text-5xl font-medium text-black dark:text-white'>
        {text}
      </TextMorph>
      <input
        type='text'
        value={text}
        onChange={(e) => setText(e.target.value)}
        className='h-9 w-full rounded-lg border border-zinc-950/10 bg-transparent p-2 text-zinc-900 placeholder-zinc-500 focus:outline-none dark:border-zinc-50/10 dark:text-white dark:placeholder-zinc-400'
        placeholder='Type your text here'
      />
    </div>
  );
}

export default {
TextMorphButton,
TextMorphInput
}