Flip Text
Installation
Copy and paste the following code into your project.
components/magicui/flip-text.tsx
"use client";
import { cn } from "@/lib/utils";
import { AnimatePresence, Variants, motion } from "framer-motion";
interface SlightFlipProps {
word: string;
duration?: number;
delayMultiple?: number;
framerProps?: Variants;
className?: string;
}
export default function SlightFlip({
word,
duration = 0.5,
delayMultiple = 0.08,
framerProps = {
hidden: { rotateX: -90, opacity: 0 },
visible: { rotateX: 0, opacity: 1 },
},
className,
}: SlightFlipProps) {
return (
<div className="flex justify-center space-x-2">
<AnimatePresence mode="wait">
{word.split("").map((char, i) => (
<motion.span
key={i}
initial="hidden"
animate="visible"
exit="hidden"
variants={framerProps}
transition={{ duration, delay: i * delayMultiple }}
className={cn("origin-center drop-shadow-sm", className)}
>
{char}
</motion.span>
))}
</AnimatePresence>
</div>
);
}
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component | |
duration | number | The class name to be applied to the shimmer. | 0.2 |
delayMultiple | number | The class name to be applied to the shimmer. | 0.08 |
word | string | An array of words to rotate through | "" |
framerProps | HTMLMotionProps | An object containing framer-motion animation props |