A dark magic link sign-in where the letter folds into an envelope and flies along a dotted route into an inbox tray that catches it and shows a badge. The sent state has a live expiry bar, an Open mail button and a resend cooldown.
npx shadcn@latest add https://hyperblur.dev/r/auth-magic-flight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-magic-flight.tsx.
import { AuthMagicFlight } from "@/components/hyperblur/auth-magic-flight"
<AuthMagicFlight brand="Parcel" onSend={async (email) => (await fetch("/api/magic-link", { method: "POST", body: email })).ok} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Parcel" | Product name at the top of the card. |
| title | string | "Sign in with a link" | Heading of the email step. |
| subtitle | string | "Enter your email and we will send a one-tap sign-in link..." | Text of the email step. |
| sender | string | "login@parcel.app" | Sender address shown under the letter. |
| expiresMinutes | number | 15 | Lifetime of the link, drives the expiry bar. |
| resendSeconds | number | 30 | Cooldown before the link can be sent again. |
| mailHref | string | "mailto:" | Target of the Open mail button. |
| defaultEmail | string | "" | Prefills the email field. |
| defaultSent | boolean | false | Starts on the Check your inbox state, useful for previews. |
| onSend | (email: string) => boolean | void | Promise<boolean | void> | Send the link here. Return or resolve false to show an error; a rejection shows its message. | |
| onResend | (email: string) => void | Called when Resend link is pressed after the cooldown. | |
| accent | string | "#ff8a4c" | Trail, badge and button color. |