Animated Card

/kavikatiyar/animated card

Components

Featured

Newest

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

import React, { useState } from "react"; import { AnimatedJobCard, JobCardProps } from "@/components/ui/animated-card"; import { cn } from "@/lib/utils"; // --- SVG ICONS FOR DEMO --- const SlackIcon = () => ( <svg viewBox="0 0 2447.6 2452.5"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0"/><path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d"/><path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e"/><path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a"/></g></svg> ); const GoogleIcon = () => ( <svg viewBox="0 0 256 262" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg> ); // --- INITIAL DEMO DATA --- const initialJobs: JobCardProps[] = [ { companyLogo: <SlackIcon />, companyName: "Slack", jobTitle: "Senior UI Designer", salary: "$3,500-5,500 net", tags: ["Project Based", "Remote"], postedDate: "Posted 2 Day Ago", variant: "pink", }, { companyLogo: <GoogleIcon />, companyName: "Google", jobTitle: "Lead UX Designer", salary: "$4,000-6,000 net", tags: ["Full Time", "B2B"], postedDate: "Posted Yesterday", variant: "yellow", }, { companyLogo: <SlackIcon />, companyName: "Slack", jobTitle: "Lead Product Designer", salary: "$3,500-5,500 net", tags: ["Full Time", "Remote"], postedDate: "Posted 2 Day Ago", variant: "blue", }, ]; // --- DEMO COMPONENT --- export default function AnimatedJobCardDemo() { const [cards, setCards] = useState(initialJobs); const cardTransforms = [ "rotate-[-8deg] translate-x-[-30%] translate-y-[10%] z-0", "rotate-[0deg] translate-y-[-5%] z-20", "rotate-[8deg] translate-x-[30%] translate-y-[10%] z-10", ]; const handleCardClick = (index: number) => { if (index === 1) return; const newCards = [...cards]; const clickedCard = newCards.splice(index, 1)[0]; newCards.splice(1, 0, clickedCard); setCards(newCards); }; return ( <div className="relative flex h-[500px] w-full items-center justify-center bg-background"> <div className="relative h-full w-full" style={{ perspective: "1000px" }}> {cards.map((job, index) => ( <AnimatedJobCard key={job.jobTitle + job.companyName} {...job} onClick={() => handleCardClick(index)} className={cn( "absolute left-0 right-0 top-1/4 mx-auto", "w-96", cardTransforms[index] )} /> ))} </div> </div> ); }

Featured

Newest

Popular