Aurora Glass — Sign Up at the Speed of Thought

Summary

A premium dark glassmorphism sign-up screen: a single full-viewport hero that doubles as the auth surface, set over an animated aurora gradient + film-grain backdrop under a translucent sticky nav. A mx-auto max-w-6xl grid splits the hero into two columns: the LEFT is a marketing pitch (a 'no card' trial pill, a big Space Grotesk display headline with a teal-to-magenta gradient accent line 'speed of thought.', a value paragraph, a three-item teal-check benefit list, and a stacked-avatar + 4.9-star social-proof cluster) and the RIGHT is a frosted-glass account-creation card with a gradient edge-light: Google + GitHub social buttons in a 2-col grid above an 'or with email' divider, then full-name / email / password fields (icon-leading, with a Show/Hide password toggle), a four-segment password-strength meter, and a teal-to-magenta gradient 'Create account' CTA, plus a Terms/Privacy footnote and a 'Sign in' link beneath the card. A full-bleed glass 'Trusted by' logo strip closes the screen. Aurora-on-near-black glassmorphism aesthetic (teal #2dd4bf + magenta #e879f9 accents on ink #0b0f14), Inter body + Space Grotesk display.

Style

Premium dark glassmorphism on a near-black ink canvas, lit by a slow-drifting two-color aurora (teal + magenta radial blooms) under a fine film-grain + vignette overlay. Frosted-glass surfaces (backdrop-blur, translucent white fills, hairline white borders, an inner top-edge sheen) float over the aurora; the hero auth card carries a teal-to-magenta gradient edge-light. Two accent hues: teal #2dd4bf as the primary/affirmation color and magenta #e879f9 as the secondary, blended into a teal-to-magenta gradient on the brand mark, the CTA, the headline accent, and gradient text. Typography pairs Inter (body/UI) with Space Grotesk (display headlines + brand). Inputs glow teal on focus; the CTA lifts and brightens on hover. High polish, high atmosphere, restrained color, calm motion.

Layout & Structure

A fixed translucent glass nav, then a single min-h-screen hero section that is BOTH the marketing pitch and the sign-up surface, laid out as a two-column grid (left pitch, right glass auth card) over the fixed aurora + grain background, then a full-bleed glass 'Trusted by' logo strip. The hero content is centered in a mx-auto w-full max-w-6xl container; the nav in a mx-auto max-w-7xl container. Below lg the hero collapses to a single centered column (pitch stacked above the card, both center-aligned), the nav center links hide below md, and the 'Sign in' nav link hides below sm.

Sticky glass nav

Hero shell + aurora background

Hero LEFT — marketing pitch

Hero RIGHT — frosted glass auth card

Trust strip (full-bleed glass)

Responsive reflow

Special Notes

Built on the Tailwind CDN with a custom theme.extend: fontFamily.sans = ['Inter','system-ui','sans-serif'] and fontFamily.display = ['"Space Grotesk"','sans-serif'] (Inter weights 400;500;600;700 + Space Grotesk 500;600;700 from Google Fonts); colors ink #0b0f14, aqua #2dd4bf, magenta #e879f9 (aqua #5eead4 used in gradients via Tailwind's teal/fuchsia scales). CSS keys: :root color-scheme dark; body background #0b0f14. .aurora = fixed inset-0 z-0 with a ::before of five radial gradients (teal rgba(45,212,191,.55) at 16% 20%, magenta rgba(232,121,249,.50) at 86% 26%, teal rgba(45,212,191,.30) at 64% 90%, magenta rgba(232,121,249,.26) at 30% 82%, aqua rgba(94,234,212,.22) at 78% 70%), filter blur(42px) saturate(155%), animation drift 22s ease-in-out infinite alternate (translate3d + scale to 1.08). .grain = fixed z-1 vignette (radial transparent->rgba(5,7,10,.55)) + a tiled SVG fractalNoise data-URI at .04 opacity. .glass = linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.025)) + backdrop-filter blur(26px) saturate(130%) + 1px rgba(255,255,255,.12) border. .glass-sheen::after = a 180deg white->transparent overlay + inset 0 1px 0 rgba(255,255,255,.18). .glass-nav = rgba(11,15,20,.55) + backdrop-blur 16px saturate 140%. .card-glow::before = a masked (mask-composite exclude) 135deg rgba(45,212,191,.55)->rgba(232,121,249,.45)->transparent 1px gradient ring at opacity .7. .field:focus = background rgba(45,212,191,.06), border-color rgba(45,212,191,.65), box-shadow 0 0 0 3px rgba(45,212,191,.14) + 0 0 28px rgba(45,212,191,.22); .field-wrap:focus-within .field-icon = #2dd4bf. .btn-grad = linear-gradient(105deg, #2dd4bf, #5eead4 35%, #e879f9) + a dual teal/magenta drop shadow, hover translate-y -1px + brightness 1.05. .grad-text = linear-gradient(100deg, #5eead4, #2dd4bf 30%, #e879f9) clipped to text. Icons via Iconify (Phosphor 'ph:*' set, logos:google-icon, mdi:github). The Show/Hide password toggle is a small inline onclick that flips the password input type. Teal is the primary action/affirmation color, magenta the secondary, blended in the gradients. The reusable prompt-library value is the FROSTED-GLASS auth card (gradient edge-light + inner sheen + teal focus-glow inputs + a password-strength meter) floating over an animated two-color aurora, with an email-first form that puts Google/GitHub SSO above the email fields, wrapped in a one-screen sign-up landing (sticky glass nav, two-column pitch+card hero, full-bleed trust strip). Original prompt-library product for the placeholder brand 'Nebula'. Responsive: nav center links hide below md, the 'Sign in' nav link below sm, the hero stacks to one centered column below lg, the social buttons stay a 2-col grid, no overflow at 390px.