A list of links or rows that reveals a preview image next to the cursor when a user hovers or focuses each row, with a spring-animated follow and skew effect.
import HoverImageList from "@/components/ui/hover-image-list";
const items = [
{
id: "1",
title: "Editorial Design",
meta: "Branding, 2024",
href: "#",
image: "https://cdn.21st.dev/assets/mirror/f5/f5ed6d909e86351da7a77e3d5fde6f9f57c214e42b462176280811fe72d71ffa.jpg",
alt: "Editorial Design project cover",
},
{
id: "2",
title: "Studio Website",
meta: "Web Design, 2023",
href: "#",
image: "https://cdn.21st.dev/assets/mirror/db/db58149e56cf0d7b0093e0be3317deb76d00f9a8e152a77929239113f8ce2ec0.jpg",
alt: "Studio Website project cover",
},
{
id: "3",
title: "Product Packaging",
meta: "Art Direction, 2023",
href: "#",
image: "https://cdn.21st.dev/assets/mirror/40/40c15df14857d60fae860437684f62d71862700d359f6359528038f7e834d727.jpg",
alt: "Product Packaging project cover",
},
{
id: "4",
title: "Motion Reel",
meta: "Animation, 2022",
href: "#",
image: "https://cdn.21st.dev/assets/mirror/be/be1c6a4504656baacdd9c1222081f6e61c0385cbb547bede78208dfc6bc1b221.jpg",
alt: "Motion Reel project cover",
},
];
export default function HoverImageListDemo() {
return (
<div className="mx-auto w-full max-w-xl px-6">
<HoverImageList items={items} />
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.