Files
SnapOtter/apps/landing/src/components/fade-in.tsx
T

27 lines
524 B
TypeScript

"use client";
import { motion } from "framer-motion";
import type { ReactNode } from "react";
export function FadeIn({
children,
className,
delay = 0,
}: {
children: ReactNode;
className?: string;
delay?: number;
}) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.5, delay, ease: "easeOut" }}
className={className}
>
{children}
</motion.div>
);
}