Blur In
Installation
Copy and paste the following code into your project.
components/magicui/blur-in.tsx
"use client";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
interface BlurIntProps {
word: string;
className?: string;
variant?: {
hidden: { filter: string; opacity: number };
visible: { filter: string; opacity: number };
};
duration?: number;
}
const BlurIn = ({ word, className, variant, duration = 1 }: BlurIntProps) => {
const defaultVariants = {
hidden: { filter: "blur(10px)", opacity: 0 },
visible: { filter: "blur(0px)", opacity: 1 },
};
const combinedVariants = variant || defaultVariants;
return (
<motion.h1
initial="hidden"
animate="visible"
transition={{ duration }}
variants={combinedVariants}
className={cn(
className,
"font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]",
)}
>
{word}
</motion.h1>
);
};
export default BlurIn;
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component | |
duration | number | Durations (seconds) for the animation | 1 |
word | string | The word to be animated | |
variant | object | Custom animation variants for motion component | hidden: { filter: "blur(10px)", opacity: 0 }, visible: { filter: "blur(0px)", opacity: 1 } |