Magic Link acts out passwordless sign in: an ID card slides into a scanner, a beam sweep reveals a verification code scrambling into place, then a checkmark lands and the verified user appears. The scene loops, so it works as an always-on visual. Built with Framer Motion and React. Card copy is prop driven, ready for auth feature grids and passwordless product pages.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import MagicLinkCard from "@/components/pro/blocks/magic-link";<MagicLinkCard />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cardTitle | string | "Magic Links" | Title shown in the card overlay. |
cardDescription | string | "Passwordless one-time passcode sign-in links." | Description shown in the card overlay. |