Text 3D Flip

PreviewCode

Stay hungry, stay foolish

@/demos/Text3DFlipDemo.tsx

import Text3DFlip from '@/registry/magicui/text-3d-flip'

export function Text3DFlipDemo() {
  return (
    <Text3DFlip
      class="
        bg-background font-serif text-2xl
        sm:text-5xl
        md:text-[56px]
      "
      textClassName="bg-background text-foreground"
      flipTextClassName="bg-background text-foreground"
      rotateDirection="top"
      staggerDuration={0.03}
      staggerFrom="first"
      transition={{ type: 'spring', damping: 25, stiffness: 160 }}
    >
      Stay hungry, stay foolish
    </Text3DFlip>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/text-3d-flip

bun

bunx shadcn@latest add @magicui-solid/text-3d-flip

yarn

yarn dlx shadcn@latest add @magicui-solid/text-3d-flip

npm

npx shadcn@latest add @magicui-solid/text-3d-flip

Usage

import Text3DFlip from '@/components/magicui/text-3d-flip'

<Text3DFlip
  class="bg-background"
  textClassName="bg-background text-foreground"
  flipTextClassName="bg-background text-foreground"
  rotateDirection="top"
>
  Stay hungry, stay foolish
</Text3DFlip>

Examples

Stagger from center

PreviewCode

Design for failure

@/demos/Text3DFlipDemo2.tsx

import Text3DFlip from '@/registry/magicui/text-3d-flip'

export function Text3DFlipDemo2() {
  return (
    <Text3DFlip
      class="
        bg-background font-serif text-2xl
        sm:text-5xl
        md:text-[56px]
      "
      textClassName="bg-background text-foreground"
      flipTextClassName="bg-background text-foreground"
      rotateDirection="top"
      staggerDuration={0.03}
      staggerFrom="center"
    >
      Design for failure
    </Text3DFlip>
  )
}

Props

Prop	Type	Default	Description
children	JSX.Element	Required	The content to be displayed and animated
as	ValidComponent	"p"	HTML element to render the component as
class	string	-	Class name for the main container element
textClassName	string	-	Class name for each letter (visible before flip)
flipTextClassName	string	-	Class name for each letter (revealed after flip)
staggerDuration	number	0.05	Duration of stagger delay between each letter in seconds
staggerFrom	"first" "last" "center" number "random"	"first"	Direction to stagger animations from. Use a number to stagger from a specific character index
transition	ValueAnimationTransition AnimationOptions	{ type: "spring", damping: 30, stiffness: 300 }	Animation transition configuration from Motion
rotateDirection	"top" "right" "bottom" "left"	"right"	Direction of 3D rotation on hover

Credits

• Credit to @AayushBharti

Original:

magicui.design/docs/components/text-3d-flip