Magnetic Hover Cards

Show Preview
Magnetic Hover Cards

About Magnetic Hover Cards

What it is

Magnetic Hover Cards is a reusable card set with direction-aware hover interaction.

Each card detects where the cursor enters and leaves, creating a smooth magnetic slide effect.

It works equally well for:

• Logos

• Social media links

• Brand grids

• Media previews

• Portfolio blocks

• Any custom content

Features

• Direction-aware hover animation

• Smooth, subtle motion timing

• Works with any inner content (not logo-specific)

• 6 cards included

• Desktop, tablet and mobile layout variants

• Clean and organized layer structure

Customization

You can easily:

• Replace content inside each card

• Use logos, icons, text or images

• Adjust overlay color in the override

• Modify layout through variants

• Combine with stacks or grids

The component is intentionally flexible and content-agnostic.

Usage

Paste the component into your canvas.

Replace the content inside each card.

Choose the layout variant depending on your breakpoint.

Use it as a full section or adapt individual cards for custom layouts.