Focus Cards
Image cards where hovering one focuses it while blurring all others.
Preview
Focus Cards
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Portfolio showcases and image galleries.
Why this component matters
Focus through contrast. The blur effect creates a natural hierarchy by isolating the user's point of interest.
Usage guidance
Use with high-quality images. Grid of 4-6 cards. Each card should be a standalone visual that works without supporting text.
Installation
bash
npx shadcn@latest add @aceternity/focus-cardsUsage
example.tsxtsx
import { FocusCards } from "@/components/ui/focus-cards";
export default function Example() {
return (
<FocusCards>
{/* Your content here */}
</FocusCards>
);
}Source
focus-cards.tsx
components/ui/focus-cards.tsx