Login — Waves
AI Pass+login#form#validation#authentication
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Login component
About Login — Waves
A cinematic login card floating over slow-drifting ocean waves and blurred blobs, with floating-label inputs, password validation, a show/hide toggle, and social sign-in.
Features
- Ocean waves and deep-night waves recolor the four layered SVG wave shapes, three blurred blobs, card surface, inputs, and accents from a single token palette
- Four layered SVG waves with subtle transform drift and three floating blurred blobs, rendered at runtime for ambient depth
- Floating-label email and password inputs with leading icons that tint on focus
- Password show/hide eye toggle with cross-fading open/closed icons
- Client-side password validation on submit (length, letter, number, symbol) with an inline "Missing: …" error
- Google and Apple social sign-in buttons and forgot-password / sign-up footer links
- Accessible:
aria-labelcontrols,aria-liveerror region, focus-visible outlines, and reduced-motion support - Responsive: stacks social buttons and footer actions below 480px
Accessibility
- Language
<html lang="en">- Password toggle
<button>witharia-labeland cross-fading icons- Error messaging
.password-errorwitharia-live="polite"- Input labels
<label for>association on both fields- Focus indicators
:focus-visibleoutlines on all interactive elements- Decorative SVGs
- Runtime wave, blob, and logo scenes marked
aria-hidden="true" - Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Login — Waves in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the login is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Atlas Login
VanillaReact
A two-column Atlas login: a bare Poppins form with pill OAuth rows, email and password fields (live `:user-invalid` validation, reveal toggle, Caps-Lock hint), remember-me and a springy pill submit, beside a deep accent panel of JS-rendered drifting topographic contour art.
#login#authentication#form
Login — Proxima
VanillaReact
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.
#login#form#validation
Inkline Sign In
VanillaReact
A two-column editorial sign-in for Inkline: underline-only fields with floating labels, a drawn accent focus line, JetBrains Mono state glyphs (› ✓ !) and a password strength meter living inside the underline itself, beside a ruled panel — tinted with the active design system's accent — carrying a paper testimonial card.
#login#form#validation
Gradient Login Form
VanillaReact
A polished sign-in card floating on a full-viewport diagonal gradient, with a brand logo, real-time email and password validation, inline error messaging, a password visibility toggle, and social sign-in buttons — fully token-driven and design-system agnostic.
#login#form#validation
One-Time Code Input
VanillaReact
A one-time code input for sign-ins, 2FA and email verification. Six digit boxes share one real input, a focus ring glides to the next box as you type, the texted code arrives with an Autofill chip, a wrong code shakes and clears, and the right one ripples green box by box.
#input#login#password
Spec Sheet
VanillaReact
Machined field specimens on a cool ground: boxed inputs annotated with monospace serials, type tags, and live state ticks, held by a single accent. Leading icons, clear buttons, password reveal, a counted textarea, and live per-field validation announced through aria-live.
#input#validation#password
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
