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

---

title: Text Animate date: 2025-01-01 description: A text animation component that animates text using a variety of different animations. author: dillionverma published: true

<ComponentPreview name="text-animate-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/text-animate

</TabsContent> <TabsContent value="manual"> <Steps>

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

<ComponentSource name="text-animate" />

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

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

Examples

Blur In by Text

<ComponentPreview name="text-animate-demo-2" />

Slide Up by Word

<ComponentPreview name="text-animate-demo-3" />

Scale Up by Text

<ComponentPreview name="text-animate-demo-4" />

Fade In by Line

<ComponentPreview name="text-animate-demo-5" />

Slide Left by Character

<ComponentPreview name="text-animate-demo-6" />

With Delay

<ComponentPreview name="text-animate-demo-7" />

With Duration

<ComponentPreview name="text-animate-demo-8" />

With Custom Motion Variants

<ComponentPreview name="text-animate-demo-9" />

Usage

import { TextAnimate } from "@/components/ui/text-animate"

<TextAnimate animation="blurInUp" by="word">
  Blur in by word
</TextAnimate>

Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------------- | ---------- | --------------------------------------------------------- | | children | string | - | The text content to animate | | className | string | - | The class name to be applied to the component | | delay | number | 0 | Delay before animation starts | | duration | number | 0.3 | Duration of the animation | | variants | Variants | - | Custom motion variants for the animation | | as | ElementType | "p" | The element type to render | | by | "text" \| "word" \| "character" \| "line" | "word" | How to split the text ("text", "word", "character") | | startOnView | boolean | true | Whether to start animation when component enters viewport | | once | boolean | false | Whether to animate only once | | animation | AnimationVariant | "fadeIn" | The animation preset to use |

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