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.
71 lines
1.3 KiB
TypeScript
71 lines
1.3 KiB
TypeScript
/**
|
|
* Animation Configuration
|
|
* Centralized configuration for all animations in the portfolio
|
|
*/
|
|
|
|
export const animationConfig = {
|
|
// Easing curves
|
|
easings: {
|
|
easeOut: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
|
|
spring: {
|
|
default: { stiffness: 200, damping: 20 },
|
|
hover: { stiffness: 260, damping: 20 },
|
|
magnetic: { stiffness: 150, damping: 15 },
|
|
gentle: { stiffness: 60, damping: 20 },
|
|
},
|
|
},
|
|
|
|
// Durations (in seconds)
|
|
durations: {
|
|
instant: 0.15,
|
|
fast: 0.3,
|
|
normal: 0.6,
|
|
slow: 0.9,
|
|
verySlow: 1.2,
|
|
},
|
|
|
|
// Scroll trigger
|
|
scrollTrigger: {
|
|
threshold: 0.2,
|
|
once: true,
|
|
margin: "0px",
|
|
},
|
|
|
|
// Stagger
|
|
stagger: {
|
|
default: 0.08,
|
|
fast: 0.04,
|
|
slow: 0.12,
|
|
reducedMotion: 0.03,
|
|
},
|
|
|
|
// Parallax
|
|
parallax: {
|
|
speed: 0.5, // 50% mais lento que scroll normal
|
|
maxDistance: 100, // pixels
|
|
},
|
|
|
|
// Magnetic effect
|
|
magnetic: {
|
|
radius: 80, // pixels
|
|
strength: 12, // max movement in pixels
|
|
},
|
|
|
|
// Cursor
|
|
cursor: {
|
|
size: 40,
|
|
expandedSize: 60,
|
|
followDelay: 0.1,
|
|
},
|
|
|
|
// Reduced motion overrides
|
|
reducedMotion: {
|
|
duration: 0.15,
|
|
stagger: 0.03,
|
|
disableParallax: true,
|
|
disableMagnetic: true,
|
|
disableCursor: true,
|
|
},
|
|
} as const;
|