Flip Text

An animated text component where each character flips and rotates on hover. Creates a playful, interactive typography effect.

Component preview

ObsidianUI

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/flip-text.json"

Install Manually

Install dependencies

npm install motion clsx tailwind-merge

Copy the source code

Copy into components/block/flip-text.tsx

Code


"use client";
 
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { cn } from '@/lib/utils';
 
interface FlipTextProps {
  children: string;
  className?: string;
}
 
export function FlipText({ children, className }: FlipTextProps) {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
  return (
    <span className={cn("inline-flex", className)}>
      {children.split('').map((char, index) => (
        <motion.span
          key={index}
          className="inline-block cursor-pointer"
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
          animate={{
            rotateX: hoveredIndex === index ? 360 : 0,
            y: hoveredIndex === index ? -8 : 0,
          }}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          {char === ' ' ? '\u00A0' : char}
        </motion.span>
      ))}
    </span>
  );
}
 
export default FlipText;

Props

Prop	Type	Default	Description
children	`string`	`-`	Text content to display
className	`string`	`-`	Additional CSS classes