Animated Border
Component Props
Prop | Type | Default |
---|---|---|
className | string | - |
Base Component
Copy and paste the following base component in your project
Make sure to install all the required dependencies
basic.tsx
import { motion } from "framer-motion";
import { twMerge } from "tailwind-merge";
interface AnimatedBorderProps {
className?: string;
}
const AnimatedBorder: React.FC<AnimatedBorderProps> = ({ className }) => {
return (
<motion.div
layout
initial="closed"
animate="open"
exit="closed"
variants={{
open: {
scaleX: 1,
originX: 0,
transition: {
delay: 0.2,
type: "spring",
stiffness: 100,
damping: 20,
},
},
closed: {
scaleX: 0,
originX: 0,
transition: {
delay: 0,
type: "spring",
stiffness: 100,
damping: 20,
},
},
}}
className={twMerge("w-full border-white/10 border-t-2", className)}
/>
);
};
export default AnimatedBorder;