Hover over the card to focus on it, blurring the rest of the cards.
import { FocusCards } from "@/components/ui/focus-cards";
export function FocusCardsDemo() {
const cards = [
{
title: "Forest Adventure",
src: "https://cdn.21st.dev/assets/mirror/0b/0b19c5c1fabaec64306b1368da5b246f8ccd4d28d538ce6fea29d47374c0abc0.jpg",
},
{
title: "Valley of life",
src: "https://cdn.21st.dev/assets/mirror/c4/c43517f5768dc5dc981f7dbb4a91e549679a8bd9d3c81b0a6ad639d25bc930f1.jpg",
},
{
title: "Sala behta hi jayega",
src: "https://cdn.21st.dev/assets/mirror/77/773e007a928155eaec093cec79f4cd2adb718b6fb50b5b5469623d8b1492b076.jpg",
},
{
title: "Camping is for pros",
src: "https://cdn.21st.dev/assets/mirror/b0/b0a3b9eff623f3779d3543114c7a128d6269c7decb5aea47f5738fae078d37ec.jpg",
},
{
title: "The road not taken",
src: "https://cdn.21st.dev/assets/mirror/23/2397ae82f36c0da8c02a48ef12d073eca7c785c062c799add5329f4d7836423b.jpg",
},
{
title: "The First Rule",
src: "https://cdn.21st.dev/assets/mirror/55/55322fc4f6b2cf723261097a093416ebc513dba7d9c39173015e533c71695dbd.png",
},
];
return <FocusCards cards={cards} />;
}
Part of Aceternity UI — browse the full library on 21st.dev.