32 lines
937 B
TypeScript
32 lines
937 B
TypeScript
"use client";
|
|
|
|
import { motion, type HTMLMotionProps } from "framer-motion";
|
|
import { useEffect, useState, type ReactNode } from "react";
|
|
|
|
type AnimatedSectionProps = HTMLMotionProps<"section"> & {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function AnimatedSection({ children, className = "", ...props }: AnimatedSectionProps) {
|
|
const [canReveal, setCanReveal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
const wide = window.matchMedia("(min-width: 1024px)").matches;
|
|
setCanReveal(wide && !reduced);
|
|
}, []);
|
|
|
|
return (
|
|
<motion.section
|
|
{...props}
|
|
className={className}
|
|
initial={canReveal ? { opacity: 0, y: 28 } : false}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.08 }}
|
|
transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
{children}
|
|
</motion.section>
|
|
);
|
|
}
|