62 lines
1.7 KiB
TypeScript
Executable File
62 lines
1.7 KiB
TypeScript
Executable File
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={reduce ? { duration: 0 } : { 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 }) {
|
|
const reduce = useReducedMotion();
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
variants={reduce ? undefined : staggerContainer}
|
|
initial={reduce ? false : "hidden"}
|
|
whileInView="show"
|
|
viewport={{ once: true, margin: "-10% 0px" }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
export function StaggerItem({ children, className }: { children: React.ReactNode; className?: string }) {
|
|
const reduce = useReducedMotion();
|
|
return <motion.div className={className} variants={reduce ? undefined : staggerItem}>{children}</motion.div>;
|
|
}
|
|
|
|
export { motion };
|