npx zenora-ui-registry@latest add luma-login-card
Luma Login Card
Forms 293 views•78 uses
Get this component
Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.
npx zenora-ui-registry@latest add luma-login-cardWrites to components/zenora-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
Props
15 propertiestitlestringGet StartedsubtitlestringCreate your accou…emailLabelstringEmail AddressemailPlaceholderstringhello@example.comgoogleLabelstringSign in with Goog…githubLabelstringSign in with GitH…footerTextstringAlready have an a…footerLinkTextstringLog invideoSrcstring/luma-login-card/…accentFromcolor#FF512FaccentTocolor#F09819cardBackgroundcolor#ffffffpanelBackgroundcolor#0c0c0efontFamilystringvar(--font-dm-san…textScalenumber100