# Login — Proxima

> A cosmic split-screen login with Proxima Centauri orbital visualization, social sign-in (Google, Apple, Passkey), real-time email and password validation, animated star-field background, and a full HUD status bar — fully token-driven and design-system agnostic.

- Category: Login
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: form, validation, authentication
- Page: https://builder.atheros.ai/components/login-proxima
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_login_proxima/preview-2a098ab38cce.webp

## Features

- Split-screen layout — login form on the left, interactive orbital visualization on the right
- Animated cosmic background with layered star-fields, token-tinted nebulas, and a perspective grid floor
- Interactive Proxima Centauri system with rotating orbit rings, planet dots with hover tooltips, and a pulsing stellar core
- Binary star companions (Alpha Centauri A & B) with twinkle animation
- Social sign-in buttons (Google, Apple, Passkey) with gradient hover border
- Real-time email format and password strength validation with inline error messages
- Password visibility toggle with eye/eye-off icons and aria-pressed state
- Remember-me checkbox with gradient fill on check and spring pop animation
- Submit button with loading spinner and state label transitions
- Signal telemetry badge with animated bars
- HUD-style status panel with live dot, spectral type, and distance readout
- Dev footer bar with status, build, and latency readouts
- Design-system agnostic — accent colors derive from primary token via color-mix
- Accessible: ARIA live regions, aria-invalid, focus-visible, reduced-motion support
- Responsive: info side collapses below 820px, card and socials adapt below 480px

## Accessibility

- **Form labels** — Associated `<label>` via `for`/`id` for email and password
- **Validation** — `aria-invalid`, `aria-describedby`, and `role="alert"` live error regions
- **Password toggle** — `<button>` with `aria-label` and `aria-pressed`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Decorative content** — Cosmic layers and orbit scene marked `aria-hidden="true"`
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Tab` — Move focus across fields, links, and controls

## Common questions

**Which frameworks is Login — Proxima available in?**

Login — Proxima ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Login — Proxima free?**

Login — Proxima is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Login — Proxima support dark mode?**

Yes. Login — Proxima ships light and dark themes, both drawn from the Runway design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Login — Proxima live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/login-proxima

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt