Hover Cards

Link cards that answer the pointer with one of four treatments, and only where a pointer can hover.

Examples

The image grows inside its frame while the card keeps its size.

How the Fernhill team keeps goals in one living page

Small releases, fewer surprises and a calmer on-call

The details rise over the image on hover or keyboard focus. On touch screens they stay visible.

Design team

Platform team

The card leans toward the mouse on a spring and its edge catches the light where the pointer is.

A guided route of 11 km with a stop at the old lookout

A border draws itself around the card, and leaves faster than it came.

Send invitations, pick roles and set who can see billing

Show meetings beside your tasks and block focus time

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-hover-cards.json

Renders an <a>: every other anchor attribute (href, target, rel) passes through.

Prop	Type	Description
effect	'zoom' \| 'rise' \| 'tilt' \| 'trace'	The hover treatment.
title	React.ReactNode	The card title.
description	React.ReactNode	A short line under the title.
meta	React.ReactNode	A small row of details. With `rise`, it is the panel that rises in.
image	`{ src: string; alt: string }`	The card image.
className	string	Classes for the link.

Every card is a link with a visible focus outline. Keyboard focus also brings up the rising details and the traced border.
Hover effects run only on devices that can hover. The tilt follows a mouse, never a finger.
With reduced motion, the zoom and the tilt are off, the rising details only fade and the border appears without drawing.

The effects are inspired by the hover cards of UI Layouts, rebuilt on our tokens and motion.