Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

19.0k
216

Flip Text

PreviousNext

Text flipping character animation

Installation

pnpm dlx shadcn@latest add @magicui/flip-text

Usage

import { FlipText } from "@/components/magicui/flip-text";
<FlipText>Flip Text</FlipText>

Props

PropTypeDefaultDescription
classNamestring-The class name to be applied to the component
durationnumber0.5Duration of the animation
delayMultiplenumber0.08Transition delay multiplier.
variantsVariants{}An object containing motion variants
asElementTypespanThe element type of the component
childrenReact.ReactNoderequiredThe children of the component