Text Flip

Animated text that cycles through items with a smooth flip transition.

I am a Developer

"use client"
 
import { motion } from "motion/react"
 
import { TextFlip } from "@/components/text-flip"
 
export default function TextFlipDemo() {
  return (
    <div className="text-2xl font-medium text-muted-foreground">
      <span>I am a </span>
      <TextFlip as={motion.span} className="min-w-32 text-foreground">
        <span>Developer</span>
        <span>Designer</span>
        <span>Creator</span>
        <span>Builder</span>
      </TextFlip>
    </div>
  )
}

Installation

$ pnpm dlx shadcn@latest add @ncdai/text-flip

Usage

import { TextFlip } from "@/components/text-flip"

<TextFlip>
  <span>Developer</span>
  <span>Designer</span>
  <span>Creator</span>
</TextFlip>

API Reference

TextFlip

Prop

Type