文字翻转

带有平滑翻转过渡效果的动画文字，循环显示各个项目。

I am a Developer

"use client"
 
import { motion } from "motion/react"
 
import { TextFlip } from "@/components/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>
  )
}

安装

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

用法

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

<TextFlip>
  <span>开发者</span>
  <span>设计师</span>
  <span>创作者</span>
</TextFlip>

API 参考

TextFlip

Prop

Type