Components
Clip Path Links
The LinkBox component displays either an icon or image inside a styled grid item. On hover, it animates a dark overlay from the nearest edge using clip-path with Framer Motion. It's used for linking to external platforms and opens the target URL in a new tab
import React from "react";
import { ClipPathLinks } from "./components/ui/clip-path-links";
const Demo: React.FC = () => {
return (
<div className="min-h-screen flex items-center justify-center px-4 py-12">
<div className="w-full max-w-7xl">
<ClipPathLinks />
</div>
</div>
);
};
export default Demo;
Dependencies
Published
Similar components
Explore more
Part of Hover.Dev — browse the full library on 21st.dev.