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 propertiestitlestringWelcome backsubtitlestringSign in to your a…emailLabelstringEmailemailPlaceholderstringEnter your emailgoogleLabelstringContinue with Goo…xLabelstringContinue with XfooterTextstringDon't have an acc…footerLinkTextstringSign upvideoSrcstring/aurora-login-car…accentFromcolor#FF512FaccentTocolor#F09819cardBackgroundcolor#ffffffpanelBackgroundcolor#0c0c0efontFamilystringvar(--font-dm-san…textScalenumber100Get 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-cardWrites to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
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