Text Animate Demo 9

PreviousNext

Ninth example showing various text animations.

Docs
magicuiexample

Preview

Loading preview…
registry/example/text-animate-demo-9.tsx
"use client"

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

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

Installation

npx shadcn@latest add @magicui/text-animate-demo-9

Usage

import { TextAnimateDemo9 } from "@/components/text-animate-demo-9"
<TextAnimateDemo9 />