feat(identity): interactive topographic login background

src/login/InteractiveBackground.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from "react";
+
+interface InteractiveBackgroundProps {
+  imageUrl: string;
+}
+
+export function InteractiveBackground({ imageUrl }: InteractiveBackgroundProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    const image = imageRef.current;
+
+    if (!root || !image) {
+      return;
+    }
+
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const finePointer = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+
+    if (reducedMotion || !finePointer) {
+      return;
+    }
+
+    let targetX = 0;
+    let targetY = 0;
+    let currentX = 0;
+    let currentY = 0;
+    let frame = 0;
+
+    const move = (event: PointerEvent) => {
+      const x = event.clientX / window.innerWidth;
+      const y = event.clientY / window.innerHeight;
+
+      targetX = (x - 0.5) * -14;
+      targetY = (y - 0.5) * -10;
+
+      root.style.setProperty("--pointer-x", `${x * 100}%`);
+      root.style.setProperty("--pointer-y", `${y * 100}%`);
+    };
+
+    const leave = () => {
+      targetX = 0;
+      targetY = 0;
+      root.style.setProperty("--pointer-x", "50%");
+      root.style.setProperty("--pointer-y", "50%");
+    };
+
+    const animate = () => {
+      currentX += (targetX - currentX) * 0.055;
+      currentY += (targetY - currentY) * 0.055;
+
+      image.style.transform = `translate3d(${currentX}px, ${currentY}px, 0) scale(1.035)`;
+      frame = window.requestAnimationFrame(animate);
+    };
+
+    window.addEventListener("pointermove", move, { passive: true });
+    window.addEventListener("pointerleave", leave);
+    frame = window.requestAnimationFrame(animate);
+
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerleave", leave);
+      window.cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className="corelink-interactive-background" aria-hidden="true">
+      <div
+        ref={imageRef}
+        className="corelink-interactive-background__image"
+        style={{ backgroundImage: `url(${imageUrl})` }}
+      />
+      <div className="corelink-interactive-background__light" />
+      <div className="corelink-interactive-background__shade" />
+    </div>
+  );
+}

src/login/KcPage.tsx

@@ -2,13 +2,16 @@ import { lazy, Suspense, useEffect } from "react";
 import DefaultPage from "keycloakify/login/DefaultPage";
 import Template from "keycloakify/login/Template";
 import type { KcContext } from "./KcContext";
+import { InteractiveBackground } from "./InteractiveBackground";
 import { useI18n } from "./i18n";
+import "./InteractiveBackground.css";
 
 const UserProfileFormFields = lazy(() => import("keycloakify/login/UserProfileFormFields"));
 
 const brandName = import.meta.env.VITE_BRAND_NAME || "CoreLink";
 const brandTagline = import.meta.env.VITE_BRAND_TAGLINE || "Secure connected intelligence";
 const brandMark = import.meta.env.VITE_BRAND_MARK || "img/corelink-mark.svg";
+const backgroundImage = import.meta.env.VITE_IDENTITY_BACKGROUND || "img/identity-topography.webp";
 
 export default function KcPage({ kcContext }: { kcContext: KcContext }) {
   const { i18n } = useI18n({ kcContext });
@@ -23,6 +26,7 @@ export default function KcPage({ kcContext }: { kcContext: KcContext }) {
 
   return (
     <Suspense>
+      <InteractiveBackground imageUrl={`${kcContext.url.resourcesPath}/${backgroundImage}`} />
       <div className="corelink-brand-bar">
         <img src={`${kcContext.url.resourcesPath}/${brandMark}`} alt={`${brandName} logo`} />
         <span>{brandName}</span>