Text Animate

PreviewCode

Blur in by characterBlur in by character

@/demos/TextAnimateDemo.tsx

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

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

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/text-animate

bun

bunx shadcn@latest add @magicui-solid/text-animate

yarn

yarn dlx shadcn@latest add @magicui-solid/text-animate

npm

npx shadcn@latest add @magicui-solid/text-animate

Examples

Blur In by Text

PreviewCode

Blur in textBlur in text

@/demos/TextAnimateDemo2.tsx

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

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

Slide Up by Word

PreviewCode

Slide up by wordSlide up by word

@/demos/TextAnimateDemo3.tsx

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

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

Scale Up by Text

PreviewCode

Scale up by textScale up by text

@/demos/TextAnimateDemo4.tsx

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

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

Fade In by Line

PreviewCode

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

@/demos/TextAnimateDemo5.tsx

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>
  )
}

Slide Left by Character

PreviewCode

Slide left by characterSlide left by character

@/demos/TextAnimateDemo6.tsx

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

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

With Delay

PreviewCode

Blur in by characterBlur in by character

@/demos/TextAnimateDemo7.tsx

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

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

With Duration

PreviewCode

Blur in by characterBlur in by character

@/demos/TextAnimateDemo8.tsx

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

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

With Custom Motion Variants

PreviewCode

Wavy Motion!Wavy Motion!

@/demos/TextAnimateDemo9.tsx

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>
  )
}

Import

import { TextAnimate } from '@/components/magicui/text-animate'

Usage

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

Props

Prop	Type	Default	Description
children	string	-	The text content to animate
class	string	-	The class name to be applied to the component
segmentClassName	string	-	The class name to be applied to each segment
delay	number	0	Delay before animation starts
duration	number	0.3	Duration of the animation
variants	Variants	-	Custom motion variants for the animation
as	ValidComponent	"p"	The element 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
accessible	boolean	true	Whether to render an accessible screen-reader label

Original:

magicui.design/docs/components/text-animate