Quiet hover feedback

Hover changes color or background, briefly, and nothing moves.

From vercel-design-md, "Motion and delight". Timing measured on vercel.com.

Hover a card

Hover or tap a card. Watch the image.

Lift and zoomBad
translateY(-6px) scale(1.12) 500ms
Color onlyGood
background 150ms cubic-bezier(0.4, 0, 0.2, 1)
.card {
  --hover-ease: cubic-bezier(0.4, 0, 0.2, 1); /* measured on vercel.com */
  transition: background-color 150ms var(--hover-ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { background: var(--sunken); }
}
.card[aria-pressed="true"] { background: var(--sunken); } /* tap */

/* The image never gets a transform. */

Why it matters, pros and cons

Why it matters

Imagery that moves under the cursor makes the target hard to hit and read.

One shared curve and duration makes every hover feel like one system.

A color or background change confirms the target without shifting layout.

Pros

  • Nothing shifts, so targets stay where the pointer expects.
  • One hover timing token keeps components consistent.
  • Works the same on tap: the state simply sticks.

Cons

  • Less playful; a gallery may want a stronger cue.
  • A subtle change needs enough contrast to be noticed.
  • 150ms is measured on vercel.com; tune it for your own product.