Evandro Fonseca Junior
08dd046887
- Introduced DrawLine component for drawing animations. - Added LazyRevealImage component for lazy loading images with reveal animations. - Implemented TextDiffuseReveal for animated text reveals with staggered effects. - Created TopProgressBar for a dynamic loading indicator. - Added PointCloud mock for testing animations. - Developed useReducedMotion hook to handle user preferences for reduced motion. - Centralized animation configurations in config.ts for easier management. - Defined animation variants in variants.ts for consistent animation effects. - Established AnimationProvider to supply global animation settings. - Created tests for AnimationProvider and useReducedMotion hook. - Added SVG assets for branding and UI elements. - Documented frontend review plan and hero circuit board animation plan.
99 lines
2.1 KiB
TypeScript
99 lines
2.1 KiB
TypeScript
/**
|
|
* Animation Variants
|
|
* Preset variants for Framer Motion animations
|
|
*/
|
|
|
|
export const variants = {
|
|
// Fade in
|
|
fadeIn: {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
},
|
|
|
|
// Fade in + slide up
|
|
fadeInUp: {
|
|
initial: { opacity: 0, y: 24, filter: "blur(8px)" },
|
|
animate: { opacity: 1, y: 0, filter: "blur(0px)" },
|
|
exit: { opacity: 0, y: -24, filter: "blur(8px)" },
|
|
},
|
|
|
|
// Fade in + slide down
|
|
fadeInDown: {
|
|
initial: { opacity: 0, y: -24, filter: "blur(8px)" },
|
|
animate: { opacity: 1, y: 0, filter: "blur(0px)" },
|
|
exit: { opacity: 0, y: 24, filter: "blur(8px)" },
|
|
},
|
|
|
|
// Fade in + slide left
|
|
fadeInLeft: {
|
|
initial: { opacity: 0, x: 24, filter: "blur(8px)" },
|
|
animate: { opacity: 1, x: 0, filter: "blur(0px)" },
|
|
exit: { opacity: 0, x: -24, filter: "blur(8px)" },
|
|
},
|
|
|
|
// Fade in + slide right
|
|
fadeInRight: {
|
|
initial: { opacity: 0, x: -24, filter: "blur(8px)" },
|
|
animate: { opacity: 1, x: 0, filter: "blur(0px)" },
|
|
exit: { opacity: 0, x: 24, filter: "blur(8px)" },
|
|
},
|
|
|
|
// Scale in
|
|
scaleIn: {
|
|
initial: { opacity: 0, scale: 0.95 },
|
|
animate: { opacity: 1, scale: 1 },
|
|
exit: { opacity: 0, scale: 0.95 },
|
|
},
|
|
|
|
// Image reveal
|
|
imageReveal: {
|
|
initial: {
|
|
opacity: 0,
|
|
scale: 0.98,
|
|
filter: "blur(8px)",
|
|
clipPath: "inset(0 100% 0 0)",
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
filter: "blur(0px)",
|
|
clipPath: "inset(0 0% 0 0)",
|
|
},
|
|
},
|
|
|
|
// Text reveal (per word)
|
|
textReveal: {
|
|
initial: {
|
|
opacity: 0,
|
|
scale: 0.95,
|
|
filter: "blur(6px)",
|
|
clipPath: "inset(0 100% 0 0)",
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
filter: "blur(0px)",
|
|
clipPath: "inset(0 0% 0 0)",
|
|
},
|
|
},
|
|
|
|
// Stagger container
|
|
staggerContainer: {
|
|
animate: {
|
|
transition: {
|
|
staggerChildren: 0.08,
|
|
},
|
|
},
|
|
},
|
|
|
|
// Reduced motion variants
|
|
reducedMotion: {
|
|
fadeIn: {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
},
|
|
},
|
|
} as const;
|