Magic Link
Passwordless authentication with magic link email. Features 3D card flip animation on success, gradient shimmer effects, and animated success overlay.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | "Magic Link" | Title text displayed at the top of the form. |
| subtitle | string | "Passwordless login." | Subtitle text displayed below the title. |
| onSendLink | (email: string) => Promise<void> | undefined | Callback function called when magic link is sent. |
| companyName | string | "Acme Inc." | Company name displayed in the logo area. |
| showCompanyLogo | boolean | true | Whether to display the company logo. |
| className | string | undefined | Additional CSS classes for custom styling. |
| successTitle | string | "Check your email" | Title text displayed in the success overlay. |
| successMessage | string | "Click the link in the email we just sent you." | Message text displayed in the success overlay. |
When to Use
Excellent for modern startups, mobile-first apps, and Next.js platforms that want a passwordless 'Magic Link' aesthetic. Use this React component for a friction-free login experience with smooth 3D transitions and ambient gradients.
Best Practices
Maintain consistent spacing within your design system by using it for primary login hubs. Follow React best practices by managed the email delivery state. Optimize for performance by using efficient Framer Motion layout animations.
Why This Component Matters
Magic links eliminate password fatigue and improve conversion. This production-ready UI component helpsคุณ build an interface that feels magical and effortless, leaving a lasting positive impression on your users.
FAQ
QWhat is the 3D flip?
Upon successful email submission, the card smoothly flips 180 degrees using Framer Motion 3D transforms to reveal the success message.
QCan I add social logins?
While designed for email, the card layout is flexible enough to include 'Sign in with Google/GitHub' buttons below the main input.
QIs it mobile responsive?
The magic link card maintains its 3D aspect ratio and legibility on mobile, providing a high-end feel even on smaller screens.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.