feat: implement industrial optimizations, hybrid dev workflow, and simplified reveal animations

apps/web/src/components/Reveal.tsx

@@ -1,26 +1,26 @@
-'use client';
+"use client";
 
-import React, { useEffect, useRef } from 'react';
-import { motion, useInView, useAnimation, Variants } from 'framer-motion';
+import React, { useEffect, useRef } from "react";
+import { motion, useInView, useAnimation, Variants } from "framer-motion";
 
 interface RevealProps {
   children: React.ReactNode;
-  width?: 'fit-content' | '100%';
+  width?: "fit-content" | "100%";
   delay?: number;
   className?: string;
-  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  direction?: "up" | "down" | "left" | "right" | "none";
   scale?: number;
   blur?: boolean;
 }
 
 export const Reveal: React.FC<RevealProps> = ({
   children,
-  width = 'fit-content',
+  width = "fit-content",
   delay = 0.25,
   className = "",
-  direction = 'up',
+  direction = "up",
   scale = 1,
-  blur = false
+  blur = false,
 }) => {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: "-10%" });
@@ -32,31 +32,18 @@ export const Reveal: React.FC<RevealProps> = ({
     }
   }, [isInView, mainControls]);
 
-  const getDirectionOffset = () => {
-    switch (direction) {
-      case 'up': return { y: 20 };
-      case 'down': return { y: -20 };
-      case 'left': return { x: 20 };
-      case 'right': return { x: -20 };
-      default: return {};
-    }
-  };
-
   const variants: Variants = {
     hidden: {
       opacity: 0,
-      ...getDirectionOffset(),
-      scale: scale !== 1 ? scale : 0.99,
-      rotateX: direction === 'up' ? 2 : direction === 'down' ? -2 : 0,
-      rotateY: direction === 'left' ? -2 : direction === 'right' ? 2 : 0,
+      y: direction === "up" ? 10 : direction === "down" ? -10 : 0,
+      x: direction === "left" ? 10 : direction === "right" ? -10 : 0,
+      scale: scale !== 1 ? scale : 1,
     },
     visible: {
       opacity: 1,
       y: 0,
       x: 0,
       scale: 1,
-      rotateX: 0,
-      rotateY: 0,
     },
   };
 
@@ -66,7 +53,6 @@ export const Reveal: React.FC<RevealProps> = ({
       style={{
         position: "relative",
         width,
-        perspective: "1000px"
       }}
       className={className}
     >
@@ -76,13 +62,13 @@ export const Reveal: React.FC<RevealProps> = ({
         animate={mainControls}
         style={{ transformStyle: "preserve-3d" }}
         transition={{
-          duration: 0.8,
+          duration: 0.4,
           delay: delay,
           type: "spring",
-          stiffness: 70,
-          damping: 24,
+          stiffness: 260,
+          damping: 20,
           mass: 1,
-          opacity: { duration: 0.5, ease: [0.16, 1, 0.3, 1] }
+          opacity: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
         }}
       >
         {children}