60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { motion, useReducedMotion, type Variants } from "motion/react";
|
||
|
|
|
||
|
|
const easeOut = [0.22, 1, 0.36, 1] as const;
|
||
|
|
|
||
|
|
/** Fade + rise on mount. Respects prefers-reduced-motion. */
|
||
|
|
export function FadeIn({
|
||
|
|
children,
|
||
|
|
delay = 0,
|
||
|
|
y = 8,
|
||
|
|
className,
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode;
|
||
|
|
delay?: number;
|
||
|
|
y?: number;
|
||
|
|
className?: string;
|
||
|
|
}) {
|
||
|
|
const reduce = useReducedMotion();
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className={className}
|
||
|
|
initial={reduce ? false : { opacity: 0, y }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
viewport={{ once: true, margin: "-10% 0px" }}
|
||
|
|
transition={{ duration: 0.4, ease: easeOut, delay }}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Stagger container — pair with <StaggerItem>. */
|
||
|
|
export const staggerContainer: Variants = {
|
||
|
|
hidden: {},
|
||
|
|
show: { transition: { staggerChildren: 0.06 } },
|
||
|
|
};
|
||
|
|
export const staggerItem: Variants = {
|
||
|
|
hidden: { opacity: 0, y: 10 },
|
||
|
|
show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: easeOut } },
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Stagger({ children, className }: { children: React.ReactNode; className?: string }) {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className={className}
|
||
|
|
variants={staggerContainer}
|
||
|
|
initial="hidden"
|
||
|
|
whileInView="show"
|
||
|
|
viewport={{ once: true, margin: "-10% 0px" }}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
export function StaggerItem({ children, className }: { children: React.ReactNode; className?: string }) {
|
||
|
|
return <motion.div className={className} variants={staggerItem}>{children}</motion.div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export { motion };
|