feat: add animated components for enhanced UI/UX

- 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.

app/lib/animations/config.ts

@@ -0,0 +1,70 @@
+/**
+ * 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;

app/lib/animations/variants.ts

@@ -0,0 +1,98 @@
+/**
+ * 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;