TorbatYar/frontend/modules/experience/design-system/ExperienceMotion.tsx
Mortezakoohjani 0eec9f729b feat(experience): deploy Experience frontend FE-11.0-11.5 portal
Commit completed Torbat Pages admin frontend module, BFF proxy, routes, and validation artifacts for official platform deploy.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 21:01:50 +03:30

63 lines
1.3 KiB
TypeScript

"use client";
import { motion, type HTMLMotionProps } from "framer-motion";
import type { ReactNode } from "react";
const fadeUp = {
initial: { opacity: 0, y: 8 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.28, ease: [0.22, 1, 0.36, 1] as const },
};
const fadeIn = {
initial: { opacity: 0 },
animate: { opacity: 1 },
transition: { duration: 0.2 },
};
export function ExperienceFadeUp({
children,
className,
...rest
}: { children: ReactNode; className?: string } & HTMLMotionProps<"div">) {
return (
<motion.div className={className} {...fadeUp} {...rest}>
{children}
</motion.div>
);
}
export function ExperienceFadeIn({
children,
className,
...rest
}: { children: ReactNode; className?: string } & HTMLMotionProps<"div">) {
return (
<motion.div className={className} {...fadeIn} {...rest}>
{children}
</motion.div>
);
}
export function ExperienceStagger({
children,
className,
}: {
children: ReactNode;
className?: string;
}) {
return (
<motion.div
className={className}
initial="hidden"
animate="show"
variants={{
hidden: {},
show: { transition: { staggerChildren: 0.06 } },
}}
>
{children}
</motion.div>
);
}