A split sign-in section whose isometric illustration responds to the form: three floating slabs drop and lock together as the email and password become valid, and a beam lights the stack on success. Captions and progress pips follow each step.
Identity confirmed. Checking the second layer.
npx shadcn@latest add https://hyperblur.dev/r/auth-split-assemble.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-split-assemble.tsx.
import { AuthSplitAssemble } from "@/components/hyperblur/auth-split-assemble"
<AuthSplitAssemble brand="Stratum" onSubmit={async ({ email, password }) => signIn(email, password)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Stratum" | Product name in the illustration panel. |
| title | string | "Sign in to Stratum" | Form heading. |
| subtitle | string | "Your infrastructure, layered and accounted for..." | Text under the heading. |
| captions | [string, string, string, string] | 4 step captions | Caption under the illustration for each step: empty, email valid, password valid, signed in. The first sentence is shown in bold. |
| defaultEmail | string | "" | Prefills the email field. A valid email locks the first slab right away. |
| forgotHref | string | "#forgot" | Target of the Forgot password link. |
| signup | { label: string; href: string } | null | { label: "Start for free", href: "#signup" } | Sign-up link under the form. Pass null to hide it. |
| onSubmit | (values: { email: string; password: string }) => boolean | void | Promise<boolean | void> | Called after validation. Return or resolve false to show an error; a rejection shows its message. | |
| accent | string | "#38bdf8" | Slab edges, beam, meter and button color. |