About
Animated Promo Card A visually engaging card that applies a 3D tilt effect on hover. It's designed to showcase promotional content with a background image, title, subtitle, and a call-to-action button.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Promo Card to your project and fits it to your theme.
Code
How Promo Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { AnimatedPromoCard } from "@/components/ui/promo-card"; // Adjust the import path
export default function AnimatedPromoCardDemo() {
return (
<div className="w-full h-full flex items-center justify-center bg-background p-4">
<AnimatedPromoCard
imageSrc="https://cdn.21st.dev/assets/mirror/1f/1f1bfee8661eead4fa454430beb9b5d79090d25da678b1b43ce132a129122595.jpg" // Placeholder image
title="Severance"
subtitle="Season 2 streaming now"
buttonText="Watch Now"
href="#"
/>
</div>
);
}