A frosted glass sign-in card under drifting aurora curtains whose colors react to the form: one hue for the email field, another for the password, amber when Caps Lock is on and green on success. Floating labels, a stay-signed-in switch and a status line complete it.
npx shadcn@latest add https://hyperblur.dev/r/auth-aurora-glass.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-aurora-glass.tsx.
import { AuthAuroraGlass } from "@/components/hyperblur/auth-aurora-glass"
<AuthAuroraGlass brand="Polaris" onSubmit={async ({ email, password, stay }) => signIn(email, password, stay)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Polaris" | Product name in the card header. |
| title | string | "Sign in under the lights" | Card heading. |
| subtitle | string | "Welcome back. Your workspace syncs the moment you arrive." | Text under the heading. |
| colors | { idle: [string, string]; email: string; password: string; success: string } | { idle: ["#22d3ee", "#8b5cf6"], email: "#2dd4bf", password: "#a855f7", success: "#4ade80" } | Aurora colors for each mood. The sky blends between them as focus moves. |
| defaultEmail | string | "" | Prefills the email field. |
| forgotHref | string | "#forgot" | Target of the Forgot password link. |
| signup | { label: string; href: string } | null | { label: "Request access", href: "#signup" } | Link under the button. Pass null to hide it. |
| onSubmit | (values: { email: string; password: string; stay: boolean }) => boolean | void | Promise<boolean | void> | Called after validation. Return or resolve false to show an error; a rejection shows its message. |