36 lines
983 B
TypeScript
36 lines
983 B
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import type { ReactNode } from "react";
|
|
|
|
type Props = {
|
|
children: ReactNode;
|
|
className?: string;
|
|
delay?: number;
|
|
direction?: "up" | "left" | "right" | "none";
|
|
};
|
|
|
|
const smoothEase = [0.16, 1, 0.3, 1] as const;
|
|
|
|
const variants = {
|
|
up: { hidden: { opacity: 0, y: 32 }, visible: { opacity: 1, y: 0 } },
|
|
left: { hidden: { opacity: 0, x: -32 }, visible: { opacity: 1, x: 0 } },
|
|
right: { hidden: { opacity: 0, x: 32 }, visible: { opacity: 1, x: 0 } },
|
|
none: { hidden: { opacity: 0 }, visible: { opacity: 1 } },
|
|
};
|
|
|
|
export function MotionSection({ children, className = "", delay = 0, direction = "up" }: Props) {
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, amount: 0.15 }}
|
|
variants={variants[direction]}
|
|
transition={{ duration: 0.55, ease: smoothEase, delay }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|