USER EXPERIENCE

The Interface Layer

Engineered with premium design tokens. 60fps animations. Zero layout shift.

Orchestrated Motion

Every interaction in Chronos-X is fluid. We strictly type our transition objects to avoid runtime overhead and ensure GPU acceleration.

PageTransition.tsx

We use a custom wrapper with AnimatePresence mode="wait" to ensure exit animations complete before the new page mounts.

src/animations.ts: pageVariants

const pageVariants = {
  initial: {
    opacity: 0,
    y: 8,
    scale: 0.99
  },
  animate: {
    opacity: 1,
    y: 0,
    scale: 1
  },
  exit: {
    opacity: 0,
    y: -8,
    scale: 1.01
  }
};

src/components/MapVisuals.tsx

const MapVisuals = memo(
  function MapVisuals(...) {
    // 1. Memoize Projection
    const projection = useMemo(() =>
      d3.geoMercator()
        .center([82.5, 23])
        .scale(1250)
    , []);

    // 2. Render Paths Cheaply
    return geoData.features.map(f => (
      <path d={pathGen(f)} />
    ))
  }, 
  (prev, next) => {
    // 3. Strict Equality Check
    return prev.geoData === next.geoData;
  }
);

Memoized D3 Rendering

Rendering 500+ district paths is expensive. We use React.memo with a custom comparator to strictly control re-renders.

Reference StabilityProjection functions and path generators are stable across renders.
CSS-First HoversHover states handled via CSS :hover instead of React state to bypass diffing.