║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

export const metadata = { title: 'Text Morph - Motion-Primitives', description: 'Animates text by morphing shared letters between words, creating fluid transitions. Built for React, Next.js, and Tailwind CSS.', };

import { TextMorphButton } from './text-morph-button'; import { TextMorphInput } from './text-morph-input'; import ComponentCodePreview from '@/components/website/component-code-preview'; import CodeBlock from '@/components/website/code-block';

Text Morph

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

Examples

Text Morph Button

<ComponentCodePreview component={<TextMorphButton />} filePath='app/docs/text-morph/text-morph-button.tsx' />

Text Morph Input

<ComponentCodePreview component={<TextMorphInput />} filePath='app/docs/text-morph/text-morph-input.tsx' classNameComponentContainer='min-h-[300px] py-24 lg:px-32 px-8 items-end' />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value='cli'>CLI</TabsTrigger> <TabsTrigger value='manual'>Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <InstallationCli value='text-morph' /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath='components/core/text-morph.tsx' />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

TextMorph

| Prop | Type | Default | Description | | :-------- | :-------------------------- | :-------- | :--------------------------------------------- | | children | string | | The text content to be animated. | | as | keyof JSX.IntrinsicElements | 'p' | The HTML tag to render, defaults to paragraph. | | className | string | undefined | Optional CSS class for styling the component. | | style | React.CSSProperties | undefined | Optional inline styles for the component. |

Credits

Inspired by Family iOS app. See also Family Values

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║