TITLE: AURORA — After-Dark Sign-In
PROMPT: Design 'AURORA', a premium after-dark sign-in experience. Background: deep indigo night (#060918) with three or four slowly drifting, blurred aurora ribbons (teal-violet-magenta gradient bands, 40-60s loops) and a faint static starfield. Centerpiece: a frosted glass card (backdrop-filter, 1px translucent border, layered top highlight) containing a wordmark, an email and passphrase field with floating labels that glow softly on focus, and a sign-in button with a slow sheen sweep. The whole scene tilts a few degrees in mouse parallax; a fake-success state morphs the card into a shimmering check. Typography: light system-ui, wide letter-spacing on the wordmark. Mood: expensive, calm, nocturnal.
DESCRIPTION: The realized piece is a nocturnal access portal floating in an indigo void. Four screen-blended aurora ribbons drift on 47-61s loops above a canvas starfield of ~hundreds of individually twinkling stars. A frosted glass card (22px backdrop blur, 1px translucent edge, gradient top highlight and inner light bloom) carries the ultra-light AURORA wordmark with .52em tracking, floating-label fields that lift and glow teal on focus with springy validity ticks, and a gradient sign-in button swept by a slow diagonal sheen. The entire stage tilts subtly with the cursor in 3D perspective while the ribbons lean against the pointer; a valid submit spins the button, then dissolves the card into a shimmering check-mark success state that greets the user by name.
TECHNIQUES: canvas-rendered twinkling starfield with per-star phase, multi-stop CSS gradient ribbons with blur(52px)+mix-blend-mode:screen on 47-61s keyframe loops, backdrop-filter frosted glass with layered inset highlights and top gradient sheen, floating labels via :not(:placeholder-shown) + transform transitions, gradient text-clipped wordmark and shimmer headline, animated stroke-dashoffset SVG check draw, perspective/rotateX/rotateY pointer parallax with requestAnimationFrame throttling, Web Animations API card shake on invalid input, prefers-reduced-motion media query disabling all ambient loops.
INTERACTION: Mouse or touch movement tilts the card a few degrees in 3D and leans the aurora ribbons. Typing a valid email (regex-checked) or 4+ character passphrase springs a teal tick into place; an invalid submit shakes the card and refocuses email. "Compose a pass-phrase" generates a poetic phrase, flashes it visible, then re-masks it. A valid submit shows a spinner, then morphs into the shimmering WELCOME check with a personalized greeting; "Sign out" returns to the form.