aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
813 lines • 19.6 kB
TypeScript
/**
* Animation presets for Motion component
* Predefined animation configurations for common use cases
*/
export declare const animationPresets: {
readonly fadeIn: {
readonly initial: {
readonly opacity: 0;
};
readonly animate: {
readonly opacity: 1;
};
readonly exit: {
readonly opacity: 0;
};
readonly duration: 300;
readonly easing: "ease-out";
};
readonly fadeOut: {
readonly initial: {
readonly opacity: 1;
};
readonly animate: {
readonly opacity: 0;
};
readonly exit: {
readonly opacity: 1;
};
readonly duration: 300;
readonly easing: "ease-in";
};
readonly slideUp: {
readonly initial: {
readonly opacity: 0;
readonly y: 20;
};
readonly animate: {
readonly opacity: 1;
readonly y: 0;
};
readonly exit: {
readonly opacity: 0;
readonly y: 20;
};
readonly duration: 400;
readonly easing: "ease-out";
};
readonly slideDown: {
readonly initial: {
readonly opacity: 0;
readonly y: -20;
};
readonly animate: {
readonly opacity: 1;
readonly y: 0;
};
readonly exit: {
readonly opacity: 0;
readonly y: -20;
};
readonly duration: 400;
readonly easing: "ease-out";
};
readonly slideLeft: {
readonly initial: {
readonly opacity: 0;
readonly x: 20;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
};
readonly exit: {
readonly opacity: 0;
readonly x: 20;
};
readonly duration: 400;
readonly easing: "ease-out";
};
readonly slideRight: {
readonly initial: {
readonly opacity: 0;
readonly x: -20;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
};
readonly exit: {
readonly opacity: 0;
readonly x: -20;
};
readonly duration: 400;
readonly easing: "ease-out";
};
readonly scaleIn: {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 0.9;
};
readonly duration: 300;
readonly easing: "spring";
};
readonly scaleOut: {
readonly initial: {
readonly opacity: 0;
readonly scale: 1.1;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 1.1;
};
readonly duration: 300;
readonly easing: "spring";
};
readonly rotateIn: {
readonly initial: {
readonly opacity: 0;
readonly rotate: -10;
};
readonly animate: {
readonly opacity: 1;
readonly rotate: 0;
};
readonly exit: {
readonly opacity: 0;
readonly rotate: -10;
};
readonly duration: 400;
readonly easing: "spring";
};
readonly bounceIn: {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.3;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
readonly transition: {
readonly type: "spring";
readonly damping: 10;
readonly stiffness: 200;
};
};
readonly exit: {
readonly opacity: 0;
readonly scale: 0.3;
};
readonly duration: 600;
};
readonly pulseIn: {
readonly initial: {
readonly opacity: 0.5;
readonly scale: 1;
};
readonly animate: {
readonly opacity: 1;
readonly scale: readonly [1, 1.05, 1];
readonly transition: {
readonly duration: 0.5;
readonly repeat: number;
readonly repeatType: "reverse";
};
};
readonly exit: {
readonly opacity: 0.5;
readonly scale: 1;
};
readonly duration: 500;
};
readonly blur: {
readonly initial: {
readonly opacity: 0;
readonly filter: "blur(4px)";
};
readonly animate: {
readonly opacity: 1;
readonly filter: "blur(0px)";
};
readonly exit: {
readonly opacity: 0;
readonly filter: "blur(4px)";
};
readonly duration: 400;
readonly easing: "ease-out";
};
readonly dropIn: {
readonly initial: {
readonly opacity: 0;
readonly y: -100;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly y: 0;
readonly scale: 1;
readonly transition: {
readonly type: "spring";
readonly damping: 15;
readonly stiffness: 150;
};
};
readonly exit: {
readonly opacity: 0;
readonly y: 100;
readonly scale: 0.9;
};
readonly duration: 500;
};
readonly flipIn: {
readonly initial: {
readonly opacity: 0;
readonly rotateY: -90;
};
readonly animate: {
readonly opacity: 1;
readonly rotateY: 0;
readonly transition: {
readonly duration: 0.6;
readonly ease: "easeOut";
};
};
readonly exit: {
readonly opacity: 0;
readonly rotateY: 90;
};
readonly duration: 600;
};
readonly staggerChildren: {
readonly animate: {
readonly transition: {
readonly staggerChildren: 0.1;
readonly delayChildren: 0.2;
};
};
};
readonly listItem: {
readonly initial: {
readonly opacity: 0;
readonly x: -20;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
};
readonly exit: {
readonly opacity: 0;
readonly x: 20;
};
readonly duration: 300;
readonly easing: "ease-out";
};
readonly modalOverlay: {
readonly initial: {
readonly opacity: 0;
};
readonly animate: {
readonly opacity: 1;
};
readonly exit: {
readonly opacity: 0;
};
readonly duration: 200;
readonly easing: "ease-out";
};
readonly modalContent: {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.95;
readonly y: 20;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
readonly y: 0;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 0.95;
readonly y: 20;
};
readonly duration: 300;
readonly easing: "spring";
};
readonly drawerLeft: {
readonly initial: {
readonly x: "-100%";
};
readonly animate: {
readonly x: 0;
};
readonly exit: {
readonly x: "-100%";
};
readonly duration: 300;
readonly easing: "ease-out";
};
readonly drawerRight: {
readonly initial: {
readonly x: "100%";
};
readonly animate: {
readonly x: 0;
};
readonly exit: {
readonly x: "100%";
};
readonly duration: 300;
readonly easing: "ease-out";
};
readonly drawerTop: {
readonly initial: {
readonly y: "-100%";
};
readonly animate: {
readonly y: 0;
};
readonly exit: {
readonly y: "-100%";
};
readonly duration: 300;
readonly easing: "ease-out";
};
readonly drawerBottom: {
readonly initial: {
readonly y: "100%";
};
readonly animate: {
readonly y: 0;
};
readonly exit: {
readonly y: "100%";
};
readonly duration: 300;
readonly easing: "ease-out";
};
readonly notificationSlide: {
readonly initial: {
readonly opacity: 0;
readonly x: 100;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly x: 100;
readonly scale: 0.9;
};
readonly duration: 400;
readonly easing: "spring";
};
readonly skeleton: {
readonly animate: {
readonly backgroundPosition: readonly ["200% 0", "-200% 0"];
readonly transition: {
readonly duration: 1.5;
readonly repeat: number;
readonly ease: "linear";
};
};
};
};
export type AnimationPresetName = keyof typeof animationPresets;
/**
* Get animation preset configuration
*/
export declare const getAnimationPreset: (name: AnimationPresetName) => {
readonly initial: {
readonly opacity: 0;
};
readonly animate: {
readonly opacity: 1;
};
readonly exit: {
readonly opacity: 0;
};
readonly duration: 300;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 1;
};
readonly animate: {
readonly opacity: 0;
};
readonly exit: {
readonly opacity: 1;
};
readonly duration: 300;
readonly easing: "ease-in";
} | {
readonly initial: {
readonly opacity: 0;
readonly y: 20;
};
readonly animate: {
readonly opacity: 1;
readonly y: 0;
};
readonly exit: {
readonly opacity: 0;
readonly y: 20;
};
readonly duration: 400;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly y: -20;
};
readonly animate: {
readonly opacity: 1;
readonly y: 0;
};
readonly exit: {
readonly opacity: 0;
readonly y: -20;
};
readonly duration: 400;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly x: 20;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
};
readonly exit: {
readonly opacity: 0;
readonly x: 20;
};
readonly duration: 400;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly x: -20;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
};
readonly exit: {
readonly opacity: 0;
readonly x: -20;
};
readonly duration: 400;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 0.9;
};
readonly duration: 300;
readonly easing: "spring";
} | {
readonly initial: {
readonly opacity: 0;
readonly scale: 1.1;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 1.1;
};
readonly duration: 300;
readonly easing: "spring";
} | {
readonly initial: {
readonly opacity: 0;
readonly rotate: -10;
};
readonly animate: {
readonly opacity: 1;
readonly rotate: 0;
};
readonly exit: {
readonly opacity: 0;
readonly rotate: -10;
};
readonly duration: 400;
readonly easing: "spring";
} | {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.3;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
readonly transition: {
readonly type: "spring";
readonly damping: 10;
readonly stiffness: 200;
};
};
readonly exit: {
readonly opacity: 0;
readonly scale: 0.3;
};
readonly duration: 600;
} | {
readonly initial: {
readonly opacity: 0.5;
readonly scale: 1;
};
readonly animate: {
readonly opacity: 1;
readonly scale: readonly [1, 1.05, 1];
readonly transition: {
readonly duration: 0.5;
readonly repeat: number;
readonly repeatType: "reverse";
};
};
readonly exit: {
readonly opacity: 0.5;
readonly scale: 1;
};
readonly duration: 500;
} | {
readonly initial: {
readonly opacity: 0;
readonly filter: "blur(4px)";
};
readonly animate: {
readonly opacity: 1;
readonly filter: "blur(0px)";
};
readonly exit: {
readonly opacity: 0;
readonly filter: "blur(4px)";
};
readonly duration: 400;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly y: -100;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly y: 0;
readonly scale: 1;
readonly transition: {
readonly type: "spring";
readonly damping: 15;
readonly stiffness: 150;
};
};
readonly exit: {
readonly opacity: 0;
readonly y: 100;
readonly scale: 0.9;
};
readonly duration: 500;
} | {
readonly initial: {
readonly opacity: 0;
readonly rotateY: -90;
};
readonly animate: {
readonly opacity: 1;
readonly rotateY: 0;
readonly transition: {
readonly duration: 0.6;
readonly ease: "easeOut";
};
};
readonly exit: {
readonly opacity: 0;
readonly rotateY: 90;
};
readonly duration: 600;
} | {
readonly animate: {
readonly transition: {
readonly staggerChildren: 0.1;
readonly delayChildren: 0.2;
};
};
} | {
readonly initial: {
readonly opacity: 0;
readonly x: -20;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
};
readonly exit: {
readonly opacity: 0;
readonly x: 20;
};
readonly duration: 300;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
};
readonly animate: {
readonly opacity: 1;
};
readonly exit: {
readonly opacity: 0;
};
readonly duration: 200;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.95;
readonly y: 20;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
readonly y: 0;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 0.95;
readonly y: 20;
};
readonly duration: 300;
readonly easing: "spring";
} | {
readonly initial: {
readonly x: "-100%";
};
readonly animate: {
readonly x: 0;
};
readonly exit: {
readonly x: "-100%";
};
readonly duration: 300;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly x: "100%";
};
readonly animate: {
readonly x: 0;
};
readonly exit: {
readonly x: "100%";
};
readonly duration: 300;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly y: "-100%";
};
readonly animate: {
readonly y: 0;
};
readonly exit: {
readonly y: "-100%";
};
readonly duration: 300;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly y: "100%";
};
readonly animate: {
readonly y: 0;
};
readonly exit: {
readonly y: "100%";
};
readonly duration: 300;
readonly easing: "ease-out";
} | {
readonly initial: {
readonly opacity: 0;
readonly x: 100;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly x: 0;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly x: 100;
readonly scale: 0.9;
};
readonly duration: 400;
readonly easing: "spring";
} | {
readonly animate: {
readonly backgroundPosition: readonly ["200% 0", "-200% 0"];
readonly transition: {
readonly duration: 1.5;
readonly repeat: number;
readonly ease: "linear";
};
};
};
/**
* Micro-interaction presets
*/
export declare const microInteractions: {
readonly hover: {
readonly scale: 1.02;
readonly transition: {
readonly duration: 0.2;
readonly ease: "easeOut";
};
};
readonly tap: {
readonly scale: 0.98;
readonly transition: {
readonly duration: 0.1;
readonly ease: "easeOut";
};
};
readonly focus: {
readonly scale: 1.01;
readonly boxShadow: "0 0 0 2px var(--glass-color-primary, 0.5)";
readonly transition: {
readonly duration: 0.2;
readonly ease: "easeOut";
};
};
};
/**
* Page transition presets
*/
export declare const pageTransitions: {
readonly fade: {
readonly initial: {
readonly opacity: 0;
};
readonly animate: {
readonly opacity: 1;
};
readonly exit: {
readonly opacity: 0;
};
readonly transition: {
readonly duration: 0.3;
};
};
readonly slide: {
readonly initial: {
readonly x: "100%";
};
readonly animate: {
readonly x: 0;
};
readonly exit: {
readonly x: "-100%";
};
readonly transition: {
readonly duration: 0.3;
readonly ease: "easeInOut";
};
};
readonly scale: {
readonly initial: {
readonly opacity: 0;
readonly scale: 0.9;
};
readonly animate: {
readonly opacity: 1;
readonly scale: 1;
};
readonly exit: {
readonly opacity: 0;
readonly scale: 1.1;
};
readonly transition: {
readonly duration: 0.3;
readonly ease: "easeInOut";
};
};
};
//# sourceMappingURL=presets.d.ts.map