Blur in by character

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo() {
  return (
    <TextAnimate animation="blurInUp" by="character" once>
      Blur in by character
    </TextAnimate>
  )
}

Blur in text

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo2() {
  return (
    <TextAnimate animation="blurIn" as="h1">
      Blur in text
    </TextAnimate>
  )
}

Open in

Slide up by word

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo3() {
  return (
    <TextAnimate animation="slideUp" by="word">
      Slide up by word
    </TextAnimate>
  )
}

Open in

Scale up by text

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo4() {
  return (
    <TextAnimate animation="scaleUp" by="text">
      Scale up by text
    </TextAnimate>
  )
}

Open in

Fade in by line as paragraph Fade in by line as paragraph Fade in by line as paragraph

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo5() {
  return (
    <TextAnimate animation="fadeIn" by="line" as="p">
      {`Fade in by line as paragraph\n\nFade in by line as paragraph\n\nFade in by line as paragraph`}
    </TextAnimate>
  )
}

Open in

Slide left by character

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo6() {
  return (
    <TextAnimate animation="slideLeft" by="character">
      Slide left by character
    </TextAnimate>
  )
}

Open in

Blur in by character

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo7() {
  return (
    <TextAnimate animation="blurInUp" by="character" delay={2}>
      Blur in by character
    </TextAnimate>
  )
}

Open in

Blur in by character

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo8() {
  return (
    <TextAnimate animation="blurInUp" by="character" duration={5}>
      Blur in by character
    </TextAnimate>
  )
}

Open in

Wavy Motion!

"use client"

import { TextAnimate } from "@/registry/magicui/text-animate"

export function TextAnimateDemo9() {
  return (
    <TextAnimate
      variants={{
        hidden: {
          opacity: 0,
          y: 30,
          rotate: 45,
          scale: 0.5,
        },
        show: (i) => ({
          opacity: 1,
          y: 0,
          rotate: 0,
          scale: 1,
          transition: {
            delay: i * 0.1,
            duration: 0.4,
            y: {
              type: "spring",
              damping: 12,
              stiffness: 200,
              mass: 0.8,
            },
            rotate: {
              type: "spring",
              damping: 8,
              stiffness: 150,
            },
            scale: {
              type: "spring",
              damping: 10,
              stiffness: 300,
            },
          },
        }),
        exit: (i) => ({
          opacity: 0,
          y: 30,
          rotate: 45,
          scale: 0.5,
          transition: {
            delay: i * 0.1,
            duration: 0.4,
          },
        }),
      }}
      by="character"
    >
      Wavy Motion!
    </TextAnimate>
  )
}

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

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

Text Animate

Installation

Examples

Blur In by Text

Blur in text

Slide Up by Word

Scale Up by Text

Fade In by Line

Slide Left by Character

With Delay

With Duration

With Custom Motion Variants

Usage

Props

Text Animate

Installation

Examples

Blur In by Text

Blur in text

Slide Up by Word

Scale Up by Text

Fade In by Line

Slide Left by Character

With Delay

With Duration

With Custom Motion Variants

Usage

Props

Text Animate

Installation

Examples

Blur In by Text

Blur in textBlur in text

Slide Up by Word

Scale Up by Text

Fade In by Line

Slide Left by Character

With Delay

With Duration

With Custom Motion Variants

Usage

Props

Text Animate

Installation

Examples

Blur In by Text

Blur in textBlur in text

Slide Up by Word

Scale Up by Text

Fade In by Line

Slide Left by Character

With Delay

With Duration

With Custom Motion Variants

Usage

Props

Blur in text

Blur in text