Components
NotchCard
A shaped image card with a notched bottom-right corner, featuring a clip-path hover reveal effect and animated SVG border overlay. Fully customizable colors, images, timing, and labels via props.
import { HelmetCard } from "../components/ui/notch-card";
const BASE = "https://images.unsplash.com/photo-1557672172-298e090bd0f1?w=800&h=800&fit=crop";
const HOVER = "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&h=800&fit=crop";
export default function DemoOne() {
return (
<div className= "flex items-center justify-center min-h-screen w-full bg-[#101400]" >
<HelmetCard
baseImage={ BASE }
hoverImage = { HOVER }
label = "Abstract"
year = "2026"
accentColor = "#00d4ff"
borderColor = "#3a4a5a"
bgColor = "#1a2a3a"
/>
</div>
);
}