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/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;