mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
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>
This commit is contained in:
Claude
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user