Focus Cards

A card grid effect where hovering focuses one card while the rest blur and fade out.

When the mouse enters any card, that card scales up slightly and stays sharp while the others blur, shrink, and fade out together, concentrating attention on the one at hand.

Loading preview…

npx shadcn@latest add https://webberui.com/r/focus-cards.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Blur strength (px)blur

Unfocused scalescale

0.96

Zoom on focusfocusScale

1.02

Unfocused opacitydim

0.6

Card height (px)height

260

<FocusCards />

Installation

npx shadcn@latest add https://webberui.com/r/focus-cards.json

Or, once registries are configured in components.json, install it as @webberui/focus-cards.

Usage

import { FocusCards } from "@/components/ui/focus-cards";

const cards = [
  {
    title: "Aurora",
    description: "A cool-toned aurora gradient background",
    background: "linear-gradient(135deg, #22d3ee 0%, #6366f1 100%)",
  },
  // ...
];

<FocusCards cards={cards} />;

Each card renders its backdrop through CSS background (a gradient or a flat color both work), with no dependency on external images. Omit background and a built-in gradient is applied cyclically by index.

Props

Prop	Type	Default	Description
`cards`	`FocusCard[]`	—	List of cards; see the type below
`blur`	`number`	`8`	Blur strength of unfocused cards (px)
`scale`	`number`	`0.96`	Scale of unfocused cards
`focusScale`	`number`	`1.02`	Scale of the focused card
`dim`	`number`	`0.6`	Opacity of unfocused cards
`height`	`number`	`260`	Card height (px)
`className`	`string`	—	Forwarded to the outer grid container

The `FocusCard` type

Field	Type	Description
`title`	`string`	Card title
`description`	`string`	Subtitle, fading in on focus (optional)
`background`	`string`	Any CSS `background` value used as the backdrop (optional)

Accessibility

Every card can be focused with the keyboard, and focus triggers the same focusing effect as hover
When the user has "reduce motion" enabled at the system level, the cards stay static with no blur or scaling
Cards carry role="group" and an aria-label, and the darkening gradient along the bottom is decorative only (aria-hidden)