Components
Starting preview...
Animates text by morphing shared letters between words, creating fluid transitions
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/text-morph'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
}