Aurora Login Card

Customize

Title
Subtitle
Field Label
Placeholder
Google Button
X Button
Footer Text
Footer Link
Video URL
Accent Start
Accent End
Card Background
Panel Background
Font
Text Scale
100%

Aurora Login Card

Forms
246 views•31 uses

Props

15 properties
titlestringWelcome back
Main heading on the form.
subtitlestringSign in to your a…
Supporting line under the heading.
emailLabelstringEmail
Small label above the input.
emailPlaceholderstringEnter your email
Placeholder inside the email field.
googleLabelstringContinue with Goo…
Label on the Google button.
xLabelstringContinue with X
Label on the X button.
footerTextstringDon't have an acc…
Prompt above the sign-up link.
footerLinkTextstringSign up
The gradient-filled link text.
videoSrcstring/aurora-login-car…
Clip used for both the backdrop and the card panel.
accentFromcolor#FF512F
First stop of the sunset gradient.
accentTocolor#F09819
Second stop of the sunset gradient.
cardBackgroundcolor#ffffff
Fill behind the form.
panelBackgroundcolor#0c0c0e
Fill behind the video panel while it loads.
fontFamilystringvar(--font-dm-san…
Typeface for the card.
textScalenumber100
Relative size of the heading.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add aurora-login-card

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A frosted sign-in card over a full-bleed video, with the same clip playing undimmed inside the card and a submit button ringed by a conic gradient that spins under the cursor.

KEY FEATURES

  • ·The background clip and the card's left panel are the same video, one dimmed behind a blur and one at full strength, so the card reads as a window cut through the backdrop
  • ·The submit button's rim and its outer glow share a single conic-gradient declaration, so the two can never drift apart when a stop is edited
  • ·The rim is a padded gradient box with a black disc laid over it, which gives a thick multi-colour border that a real border property can't express
  • ·Rules either side of the divider fade to transparent at the outer edges instead of stopping hard against the padding