Magnetic Card
A card that drifts toward the cursor as it nears, with a subtle pull. Use it for playful landing pages or feature tiles that reward a hovering pointer.
A card that drifts toward the cursor as it nears, with a subtle pull. Use it for playful landing pages or feature tiles that reward a hovering pointer.
Search blocks by description or jump to a page.
Magnetic Card is a single card that drifts toward the cursor as the pointer moves across it. The card contains a header with a title and short description, a content area with a paragraph of supporting text, and a footer row with two buttons. When the pointer enters the card, both the card body and the footer buttons shift independently toward the cursor, each at a slightly different rate, giving the impression of layered depth.
The card content is fully independent copy. You can rewrite the title, description, body text, and button labels to match any offer or action. The footer layout places the secondary button on the left and the primary button on the right, and either button can be removed if a single call to action is enough.
Reach for this block when a single featured item on a landing page needs to feel alive without distracting from the surrounding layout. It suits a product launch section, a featured plan callout, or the hero area of an ecommerce storefront brand where a tactile interaction signals care and craft. Compared to a static card or a simple hover lift, the magnetic pull creates a moment of delight that encourages the visitor to engage rather than scroll past.
A natural flow around it on a Components page:
Before
After
One magnetic card works well as a spotlight for any single item or action that deserves attention. A few ways to put it to use:
Tip: keep the body text to two or three short sentences so the card stays compact and the magnetic motion remains the focal point.