aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
119 lines (117 loc) • 2.22 kB
JavaScript
const createMotionAwareVariants = {
fadeInScale: prefersReducedMotion => ({
hidden: prefersReducedMotion ? {
opacity: 1,
scale: 1
} : {
opacity: 0,
scale: 0.8
},
visible: prefersReducedMotion ? {
opacity: 1,
scale: 1,
transition: {
duration: 0
}
} : {
opacity: 1,
scale: 1,
transition: {
duration: 0.3,
ease: 'easeOut'
}
}
}),
slideIn: (direction, prefersReducedMotion) => {
const directionMap = {
left: {
x: -50
},
right: {
x: 50
},
up: {
y: -50
},
down: {
y: 50
}
};
return {
hidden: prefersReducedMotion ? {
opacity: 1,
...directionMap[direction]
} : {
opacity: 0,
...directionMap[direction]
},
visible: prefersReducedMotion ? {
opacity: 1,
x: 0,
y: 0,
transition: {
duration: 0
}
} : {
opacity: 1,
x: 0,
y: 0,
transition: {
duration: 0.4,
ease: 'easeOut'
}
}
};
},
fadeInUp: prefersReducedMotion => ({
hidden: prefersReducedMotion ? {
opacity: 1,
y: 0
} : {
opacity: 0,
y: 20
},
visible: prefersReducedMotion ? {
opacity: 1,
y: 0,
transition: {
duration: 0
}
} : {
opacity: 1,
y: 0,
transition: {
duration: 0.3,
ease: 'easeOut'
}
}
})
};
const createMotionAwareInteractive = {
button: prefersReducedMotion => ({
whileHover: prefersReducedMotion ? {} : {
scale: 1.02
},
whileTap: prefersReducedMotion ? {} : {
scale: 0.98
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.2
}
}),
card: prefersReducedMotion => ({
whileHover: prefersReducedMotion ? {} : {
y: -2,
scale: 1.01
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.2
}
})
};
export { createMotionAwareInteractive, createMotionAwareVariants };
//# sourceMappingURL=motionPrimitives.js.map