74 lines
1.3 KiB
TypeScript
74 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion, type Variants } from "framer-motion";
|
|
import type { ReactNode } from "react";
|
|
|
|
const pageVariants: Variants = {
|
|
hidden: { opacity: 0, y: 12 },
|
|
visible: { opacity: 1, y: 0 }
|
|
};
|
|
|
|
const cardVariants: Variants = {
|
|
hidden: { opacity: 0, y: 16 },
|
|
visible: { opacity: 1, y: 0 }
|
|
};
|
|
|
|
export function AnimatedPage({ children }: { children: ReactNode }) {
|
|
return (
|
|
<motion.div
|
|
variants={pageVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export function AnimatedCard({
|
|
children,
|
|
className,
|
|
delay = 0
|
|
}: {
|
|
children: ReactNode;
|
|
className?: string;
|
|
delay?: number;
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
variants={cardVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
transition={{
|
|
duration: 0.3,
|
|
delay,
|
|
ease: [0.22, 1, 0.36, 1]
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export function AnimatedStagger({
|
|
children,
|
|
staggerDelay = 0.06
|
|
}: {
|
|
children: ReactNode;
|
|
staggerDelay?: number;
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: { transition: { staggerChildren: staggerDelay } }
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|