A 3D tilt card that rotates and glares based on mouse position, used to give buttons or images a perspective hover effect.
import { CometCard } from "@/components/ui/comet-card";
export default function CometCardDemo() {
return (
<CometCard>
<button
type="button"
className="my-10 flex w-80 cursor-pointer flex-col items-stretch rounded-[16px] border-0 bg-[#1F2121] p-2 saturate-0 md:my-20 md:p-4"
aria-label="View invite F7RA"
style={{
transformStyle: "preserve-3d",
transform: "none",
opacity: 1,
}}
>
<div className="mx-2 flex-1">
<div className="relative mt-2 aspect-[3/4] w-full">
<img
loading="lazy"
className="absolute inset-0 h-full w-full rounded-[16px] bg-[#000000] object-cover contrast-75"
alt="Invite background"
src="https://cdn.21st.dev/assets/mirror/02/020f53e5799ee79481595b556b72090a38f84b14940170cb3d1e0e3df4806ba7.jpg"
style={{
boxShadow: "rgba(0, 0, 0, 0.05) 0px 5px 6px 0px",
opacity: 1,
}}
/>
</div>
</div>
<div className="mt-2 flex flex-shrink-0 items-center justify-between p-4 font-mono text-white">
<div className="text-xs">Comet Invitation</div>
<div className="text-xs text-gray-300 opacity-50">#F7RA</div>
</div>
</button>
</CometCard>
);
}
Part of Aceternity UI — browse the full library on 21st.dev.