A sign-in card that tilts toward the pointer in 3D, with a rotating conic border and a spotlight that follows the cursor across the surface. Includes SSO, email and password with validation, a loading sweep and a drawn success check.
npx shadcn@latest add https://hyperblur.dev/r/auth-tilt-spotlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-tilt-spotlight.tsx.
import { AuthTiltSpotlight } from "@/components/hyperblur/auth-tilt-spotlight"
<AuthTiltSpotlight brand="Northbeam" onSubmit={async ({ email, password }) => signIn(email, password)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northbeam" | Product name next to the logo mark. |
| title | string | "Welcome back" | Card heading. |
| subtitle | string | "Sign in to pick up where your team left off." | Text under the heading, followed by the sign-up link. |
| tilt | number | 9 | Maximum tilt in degrees. Set 0 to keep only the spotlight. |
| defaultEmail | string | "" | Prefills the email field. |
| forgotHref | string | "#forgot" | Target of the Forgot link. |
| signup | { label: string; href: string } | null | { label: "Create an account", href: "#signup" } | Sign-up link after the subtitle. Pass null to hide it. |
| onSso | () => void | Called when Continue with single sign-on is clicked. | |
| onSubmit | (values: { email: string; password: string; remember: boolean }) => boolean | void | Promise<boolean | void> | Called after validation. Return or resolve false to show a mismatch error; a rejection shows its message. Without it the card simulates a successful sign-in. | |
| accent | string | "#7c5cff" | Border, spotlight, focus ring and button color. |