perf(ui): smooth gsap page transitions

src/components/common/PageTransition.scss

@@ -27,6 +27,8 @@
 
   &--animating &__layer {
     will-change: transform, opacity;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
   }
 
   // When both layers exist, current layer also needs positioning

src/components/common/PageTransition.tsx

@@ -9,7 +9,9 @@ interface PageTransitionProps {
   scrollContainerRef?: React.RefObject<HTMLElement | null>;
 }
 
-const TRANSITION_DURATION = 0.65;
+const TRANSITION_DURATION = 0.5;
+const EXIT_DURATION = 0.45;
+const ENTER_DELAY = 0.08;
 
 type LayerStatus = 'current' | 'exiting';
 
@@ -99,6 +101,13 @@ export function PageTransition({
       scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' });
     }
 
+    const containerHeight = scrollContainer?.clientHeight ?? 0;
+    const viewportHeight = typeof window === 'undefined' ? 0 : window.innerHeight;
+    const travelDistance = Math.max(containerHeight, viewportHeight, 1);
+    const enterFromY = transitionDirection === 'forward' ? travelDistance : -travelDistance;
+    const exitToY = transitionDirection === 'forward' ? -travelDistance : travelDistance;
+    const exitBaseY = scrollOffset ? -scrollOffset : 0;
+
     const tl = gsap.timeline({
       onComplete: () => {
         setLayers((prev) => prev.filter((layer) => layer.status !== 'exiting'));
@@ -108,15 +117,16 @@ export function PageTransition({
 
     // Exit animation: fly out to top (slow-to-fast)
     if (exitingLayerRef.current) {
-      gsap.set(exitingLayerRef.current, { y: scrollOffset ? -scrollOffset : 0 });
+      gsap.set(exitingLayerRef.current, { y: exitBaseY });
       tl.fromTo(
         exitingLayerRef.current,
-        { yPercent: 0, opacity: 1 },
+        { y: exitBaseY, opacity: 1 },
         {
-          yPercent: transitionDirection === 'forward' ? -100 : 100,
+          y: exitBaseY + exitToY,
           opacity: 0,
-          duration: TRANSITION_DURATION,
+          duration: EXIT_DURATION,
-          ease: 'power3.in', // slow start, fast end
+          ease: 'power2.in', // fast finish to clear screen
+          force3D: true,
         },
         0
       );
@@ -125,15 +135,16 @@ export function PageTransition({
     // Enter animation: slide in from bottom (slow-to-fast)
     tl.fromTo(
       currentLayerRef.current,
-      { yPercent: transitionDirection === 'forward' ? 100 : -100, opacity: 0 },
+      { y: enterFromY, opacity: 0 },
       {
-        yPercent: 0,
+        y: 0,
         opacity: 1,
         duration: TRANSITION_DURATION,
-        ease: 'power2.in', // slow start, fast end
+        ease: 'power2.out', // smooth settle
         clearProps: 'transform,opacity',
+        force3D: true,
       },
-      0
+      ENTER_DELAY
     );
 
     return () => {

src/pages/LogsPage.tsx

@@ -50,7 +50,8 @@ const HTTP_METHOD_REGEX = new RegExp(`\\b(${HTTP_METHODS.join('|')})\\b`);
 const LOG_TIMESTAMP_REGEX = /^\[?(\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?)\]?/;
 const LOG_LEVEL_REGEX = /^\[?(trace|debug|info|warn|warning|error|fatal)\s*\]?(?=\s|\[|$)\s*/i;
 const LOG_SOURCE_REGEX = /^\[([^\]]+)\]/;
-const LOG_LATENCY_REGEX = /\b(\d+(?:\.\d+)?)(?:\s*)(µs|us|ms|s)\b/i;
+const LOG_LATENCY_REGEX =
+  /\b(?:\d+(?:\.\d+)?\s*(?:µs|us|ms|s|m))(?:\s*\d+(?:\.\d+)?\s*(?:µs|us|ms|s|m))*\b/i;
 const LOG_IPV4_REGEX = /\b(?:\d{1,3}\.){3}\d{1,3}\b/;
 const LOG_IPV6_REGEX = /\b(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}\b/i;
 const LOG_REQUEST_ID_REGEX = /^([a-f0-9]{8}|--------)$/i;
@@ -102,6 +103,12 @@ const normalizeTimestampToSeconds = (value: string): string => {
   return `${match[1]} ${match[2]}`;
 };
 
+const extractLatency = (text: string): string | undefined => {
+  const match = text.match(LOG_LATENCY_REGEX);
+  if (!match) return undefined;
+  return match[0].replace(/\s+/g, '');
+};
+
 type ParsedLogLine = {
   raw: string;
   timestamp?: string;
@@ -244,9 +251,9 @@ const parseLogLine = (raw: string): ParsedLogLine => {
     // latency
     const latencyIndex = segments.findIndex((segment) => LOG_LATENCY_REGEX.test(segment));
     if (latencyIndex >= 0) {
-      const match = segments[latencyIndex].match(LOG_LATENCY_REGEX);
+      const extracted = extractLatency(segments[latencyIndex]);
-      if (match) {
+      if (extracted) {
-        latency = `${match[1]}${match[2]}`;
+        latency = extracted;
         consumed.add(latencyIndex);
       }
     }
@@ -287,8 +294,8 @@ const parseLogLine = (raw: string): ParsedLogLine => {
   } else {
     statusCode = detectHttpStatusCode(remaining);
 
-    const latencyMatch = remaining.match(LOG_LATENCY_REGEX);
+    const extracted = extractLatency(remaining);
-    if (latencyMatch) latency = `${latencyMatch[1]}${latencyMatch[2]}`;
+    if (extracted) latency = extracted;
 
     ip = extractIp(remaining);