Components
Loading preview...
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
npx shadcn@latest add https://21st.dev/r/TomIsLoading/clip-path-linksimport 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;