From cb427801ff4fcea01caa00dd00145a735b4943c2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 2 Jun 2026 22:13:15 +0300
Subject: [PATCH] Animated glass auth card

Replace the split layout with a centered glass card on a living background:
drifting aurora blobs, a rotating conic-gradient halo around the card, a
spring entrance with staggered content, a floating logo badge, and a one-time
shimmer sweep on mount. Shared by all auth screens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/auth/auth-ui.tsx | 205 +++++++++++++++------------
 1 file changed, 116 insertions(+), 89 deletions(-)

diff --git a/frontend/components/auth/auth-ui.tsx b/frontend/components/auth/auth-ui.tsx
index d55b6eb..8a986f7 100644
--- a/frontend/components/auth/auth-ui.tsx
+++ b/frontend/components/auth/auth-ui.tsx
@@ -1,82 +1,51 @@
-import { Check } from "lucide-react";
+"use client";
+
+import { motion, type Variants } from "framer-motion";
 import Image from "next/image";
 import type { ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
-const FEATURES = [
-  "Look up any patient just by asking",
-  "Rich record cards — vitals, labs, meds, history",
-  "Open-source, built around patient-owned data",
-];
+const container: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.09, delayChildren: 0.18 } },
+};
 
-// Left brand panel (desktop only): gradient glow, product pitch, feature list.
-function BrandPanel() {
+const item: Variants = {
+  hidden: { opacity: 0, y: 16 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { type: "spring", stiffness: 150, damping: 18 },
+  },
+};
+
+// Slowly drifting colored blobs behind everything.
+function Aurora() {
   return (
-    <div className="relative hidden overflow-hidden border-r border-border/60 bg-[oklch(0.17_0.006_277)] p-12 lg:flex lg:flex-col lg:justify-between">
-      <div
-        aria-hidden
-        className="pointer-events-none absolute -top-32 -left-24 size-[28rem] rounded-full bg-primary/25 blur-[130px]"
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0 overflow-hidden"
+    >
+      <motion.div
+        animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.15, 1] }}
+        className="absolute -top-40 -left-32 size-[34rem] rounded-full bg-primary/30 blur-[140px]"
+        transition={{ duration: 14, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute -right-20 -bottom-32 size-[26rem] rounded-full bg-[oklch(0.62_0.15_305)]/20 blur-[130px]"
+      <motion.div
+        animate={{ x: [0, -50, 0], y: [0, -30, 0], scale: [1, 1.2, 1] }}
+        className="absolute top-1/4 -right-40 size-[32rem] rounded-full bg-[oklch(0.62_0.16_305)]/25 blur-[140px]"
+        transition={{ duration: 18, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 opacity-[0.05]"
-        style={{
-          backgroundImage:
-            "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
-          backgroundSize: "44px 44px",
-          maskImage:
-            "radial-gradient(ellipse at center, black 25%, transparent 75%)",
-        }}
+      <motion.div
+        animate={{ x: [0, 40, 0], y: [0, -40, 0], scale: [1, 1.1, 1] }}
+        className="absolute -bottom-40 left-1/3 size-[30rem] rounded-full bg-[oklch(0.7_0.15_200)]/20 blur-[150px]"
+        transition={{ duration: 16, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
       />
-
-      <div className="relative flex items-center gap-2.5">
-        <Image
-          alt="temetro"
-          className="size-8"
-          height={32}
-          priority
-          src="/temetro-logo.png"
-          width={32}
-        />
-        <span className="text-lg font-semibold tracking-tight">temetro</span>
-      </div>
-
-      <div className="relative max-w-md space-y-5">
-        <h2 className="text-balance text-3xl font-semibold leading-tight tracking-tight">
-          Patient records, organized by conversation.
-        </h2>
-        <p className="text-pretty text-muted-foreground">
-          The AI middleman between you and patient data — retrieve, review and
-          update charts from a simple chat, so you spend less time clicking.
-        </p>
-        <ul className="space-y-3 pt-2">
-          {FEATURES.map((feature) => (
-            <li
-              className="flex items-center gap-3 text-sm text-foreground/90"
-              key={feature}
-            >
-              <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary">
-                <Check className="size-3.5" />
-              </span>
-              {feature}
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      <div className="relative text-xs text-muted-foreground">
-        © temetro — open-source clinical tooling
-      </div>
     </div>
   );
 }
 
-// Centered, branded shell shared by every auth page (split layout on desktop).
 export function AuthShell({
   title,
   subtitle,
@@ -89,41 +58,99 @@ export function AuthShell({
   footer?: ReactNode;
 }) {
   return (
-    <div className="grid min-h-full lg:grid-cols-2">
-      <BrandPanel />
+    <div className="relative flex min-h-full w-full items-center justify-center overflow-hidden px-4 py-12">
+      <Aurora />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 opacity-[0.04]"
+        style={{
+          backgroundImage:
+            "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
+          backgroundSize: "48px 48px",
+          maskImage:
+            "radial-gradient(ellipse at center, black 20%, transparent 70%)",
+        }}
+      />
 
-      <div className="relative flex items-center justify-center px-6 py-12">
-        {/* soft glow behind the form on small screens (no brand panel) */}
-        <div
+      <motion.div
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        className="relative w-full max-w-md"
+        initial={{ opacity: 0, y: 28, scale: 0.96 }}
+        transition={{ type: "spring", stiffness: 120, damping: 18 }}
+      >
+        {/* rotating gradient halo */}
+        <motion.div
+          animate={{ rotate: 360 }}
           aria-hidden
-          className="pointer-events-none absolute inset-0 overflow-hidden lg:hidden"
-        >
-          <div className="absolute -top-24 left-1/2 size-72 -translate-x-1/2 rounded-full bg-primary/15 blur-[120px]" />
-        </div>
+          className="absolute -inset-[2px] rounded-[30px] opacity-70 blur-[3px]"
+          style={{
+            backgroundImage:
+              "conic-gradient(from 0deg, var(--primary), transparent 25%, transparent 50%, oklch(0.62 0.16 305), transparent 75%, var(--primary))",
+          }}
+          transition={{ duration: 10, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
+        />
 
-        <div className="relative w-full max-w-sm">
-          <div className="mb-8">
-            <Image
-              alt="temetro"
-              className="mb-6 size-9 lg:hidden"
-              height={36}
-              priority
-              src="/temetro-logo.png"
-              width={36}
-            />
+        {/* the card */}
+        <motion.div
+          animate="show"
+          className="relative overflow-hidden rounded-[28px] border border-white/10 bg-card/85 p-8 shadow-2xl backdrop-blur-xl"
+          initial="hidden"
+          variants={container}
+        >
+          {/* top edge highlight */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/25 to-transparent"
+          />
+          {/* one-time shimmer sweep on mount */}
+          <motion.div
+            animate={{ x: "130%" }}
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 -inset-x-1"
+            initial={{ x: "-130%" }}
+            style={{
+              background:
+                "linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%)",
+            }}
+            transition={{ duration: 1.1, delay: 0.45, ease: "easeInOut" }}
+          />
+
+          <motion.div
+            className="mb-6 flex flex-col items-center text-center"
+            variants={item}
+          >
+            <motion.div
+              animate={{ y: [0, -6, 0] }}
+              className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/15 ring-1 ring-primary/30 ring-inset"
+              transition={{ duration: 4, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
+            >
+              <Image
+                alt="temetro"
+                className="size-7"
+                height={28}
+                priority
+                src="/temetro-logo.png"
+                width={28}
+              />
+            </motion.div>
             <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
             {subtitle && (
               <p className="mt-2 text-sm text-muted-foreground">{subtitle}</p>
             )}
-          </div>
+          </motion.div>
 
-          {children}
+          <motion.div variants={item}>{children}</motion.div>
 
           {footer && (
-            <div className="mt-8 text-sm text-muted-foreground">{footer}</div>
+            <motion.div
+              className="mt-6 text-center text-sm text-muted-foreground"
+              variants={item}
+            >
+              {footer}
+            </motion.div>
           )}
-        </div>
-      </div>
+        </motion.div>
+      </motion.div>
     </div>
   );
 }