Text Flip

Animated text component that cycles through items with a smooth flip transition built with Motion for React.

I am a Developer

"use client"
 
import { motion } from "motion/react"
 
import { TextFlip } from "@/components/ncdai/text-flip"
 
export 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 add @ncdai/text-flip

Usage

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

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

API Reference

Prop	Type	Default	Description
`as`	`MotionElement`	`motion.p`	The motion element type to render.
`className`	`string`		Additional CSS classes applied to the rendered element.
`children`	`ReactNode[]`		List of items to cycle through.
`interval`	`number`	`2`	Time in seconds between each flip.
`transition`	`Transition`	`defaultTransition`	Motion transition config for the flip animation.
`variants`	`Variants`	`defaultVariants`	Motion variants for `initial`, `animate`, and `exit` states.
`onIndexChange`	`(index: number) => void`		Callback fired whenever the active item index changes.

const defaultTransition = {
  duration: 0.3,
}
 
const defaultVariants = {
  initial: { y: -8, opacity: 0 },
  animate: { y: 0, opacity: 1 },
  exit: { y: 8, opacity: 0 },
}