Components
Loading preview...
Animated Presence Card Description: A visually striking card component designed to showcase a primary message or product. It features a prominent image, clear typography, and an interactive 3D tilt effect on mouse hover, powered by framer-motion. The component is fully responsive and uses shadcn/ui theme variables for seamless light and dark mode integration.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/presence-card// demo.tsx
import { AnimatedPresenceCard } from '@/components/ui/presence-card';
export default function AnimatedPresenceCardDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<AnimatedPresenceCard
topText="Work fast. Live slow."
imageUrl="https://images.unsplash.com/photo-1738490686724-8531f6912fc9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTAyfHxXb3JrJTIwZmFzdC4lMjBMaXZlJTIwc2xvd3xlbnwwfHwwfHx8MA%3D%3D?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
title="Transform your digital presence."
description="From zero to extraordinary. Let's create your digital reality."
buttonText="Send a message"
buttonHref="#"
footerLeft="sukoya.design"
footerRight="web + product + brand"
/>
</div>
);
}