A social-first sign-in where provider buttons circle the brand mark on a slow orbit that pauses on hover. Pointing at a provider draws a beam to the center, tints the scene and morphs the main button to Continue with that provider.
Pick the account you already use. We only read your name, email and avatar.
By continuing you agree to the Kite Terms and Privacy Policy.
npx shadcn@latest add https://hyperblur.dev/r/auth-social-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-social-orbit.tsx.
import { AuthSocialOrbit } from "@/components/hyperblur/auth-social-orbit"
<AuthSocialOrbit brand="Kite" onProvider={(id) => { window.location.href = `/api/oauth/${id}`; }} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Kite" | Product name used in the terms line and the success copy. |
| title | string | "One tap and you are in" | Heading under the orbit. |
| subtitle | string | "Pick the account you already use..." | Text under the heading. |
| providers | { id: string; label: string; tint?: string; icon?: ReactNode }[] | GitHub, Google, Apple, Microsoft, X, Slack | Providers on the orbit. Built-in neutral glyphs exist for those ids; pass icon for anything else. |
| lastUsed | string | null | "github" | Provider selected first and marked with a Last badge. |
| speed | number | 48 | Seconds for one full turn of the orbit. |
| terms | { label: string; href: string } | { label: "Terms and Privacy Policy", href: "#terms" } | Link in the consent line. |
| onProvider | (id: string) => boolean | void | Promise<boolean | void> | Start your OAuth redirect here. Resolve false to return to the idle state. | |
| onEmail | (email: string) => void | Called with a valid email from the Use email instead panel. |