Spaces:
Running
Running
File size: 2,660 Bytes
4724c43 2f67ecf 5e98b5a 2f67ecf 5e98b5a 2f67ecf 5e98b5a 2f67ecf ace64e6 4724c43 ace64e6 4724c43 ace64e6 4724c43 ace64e6 4724c43 ace64e6 deb8696 4724c43 ace64e6 4724c43 ace64e6 4724c43 ace64e6 4724c43 ace64e6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import type { Variants, TargetAndTransition } from 'framer-motion';
export const fadeUp: Variants = {
hidden: { opacity: 0, y: 24 },
show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: [0.25, 1, 0.5, 1] as const } },
};
export const stagger: Variants = {
show: { transition: { staggerChildren: 0.06 } },
};
export const fadeIn: Variants = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { duration: 0.25 } },
};
// βββ Entrance reveal βββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
export const reveal: Variants = {
hidden: { opacity: 0, y: 32, filter: 'blur(6px)' },
show: {
opacity: 1,
y: 0,
filter: 'blur(0px)',
transition: { duration: 0.5, ease: [0.25, 1, 0.5, 1] as const },
},
};
export const zoomIn: Variants = {
hidden: { opacity: 0, scale: 0.96 },
show: { opacity: 1, scale: 1, transition: { duration: 0.4, ease: [0.25, 1, 0.5, 1] as const } },
};
export const slideInLeft: Variants = {
hidden: { opacity: 0, x: -28 },
show: { opacity: 1, x: 0, transition: { duration: 0.4, ease: [0.25, 1, 0.5, 1] as const } },
};
export const slideInRight: Variants = {
hidden: { opacity: 0, x: 28 },
show: { opacity: 1, x: 0, transition: { duration: 0.4, ease: [0.25, 1, 0.5, 1] as const } },
};
// βββ Hover / microinteraction presets ββββββββββββββββββββββββββββββββββββββββ
// Springs (critically damped, bounce 0) so hover/press is interruptible and
// velocity-aware β per apple-design Β§3βΒ§4. Bounce is reserved for momentum.
export const cardHover: TargetAndTransition = { y: -2, transition: { type: 'spring', bounce: 0, duration: 0.35 } };
export const hoverLift: TargetAndTransition = {
y: -4,
transition: { type: 'spring', bounce: 0, duration: 0.35 },
};
export const hoverGlow: TargetAndTransition = {
y: -3,
boxShadow: '0 10px 32px rgba(74, 222, 128, 0.14)',
transition: { type: 'spring', bounce: 0, duration: 0.35 },
};
export const tapScale: TargetAndTransition = { scale: 0.98, transition: { type: 'spring', bounce: 0, duration: 0.25 } };
export const press: TargetAndTransition = {
scale: 0.97,
transition: { type: 'spring', bounce: 0, duration: 0.25 },
};
export const microPop: Variants = {
rest: { scale: 1 },
hover: { scale: 1.03, transition: { type: 'spring', stiffness: 400, damping: 22 } },
tap: { scale: 0.96 },
};
export const staggerFast: Variants = {
show: { transition: { staggerChildren: 0.045 } },
};
|