Animated Profile Card

Cards 103

About

Animated Profile Card A modern, animated profile card to showcase user details, stats, and skills. It features a subtle hover effect and staggered animations on load, built with Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Profile Card to your project and fits it to your theme.

Code

How Animated Profile Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx

import React, { useState } from 'react';
import { ProfileCard, Tool } from '@/components/ui/animated-profile-card';

// Example icons, you can replace these with your preferred icon library
import { Code, Figma, Framer } from 'lucide-react';

const toolsData: Tool[] = [
  { name: 'Figma', icon: Figma },
  { name: 'Framer', icon: Framer },
  { name: 'VS Code', icon: Code },
];

const ProfileCardDemo = () => {
  const [isBookmarked, setIsBookmarked] = useState(false);

  const handleBookmark = () => {
    setIsBookmarked((prev) => !prev);
    console.log('Bookmark toggled');
  };

  const handleGetInTouch = () => {
    console.log('Get in touch clicked');
    alert(`Contacting Henrie Ekemezie`);
  };

  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <ProfileCard
        name="Henrie Ekemezie"
        role="Web & UI/UX Designer"
        avatarUrl="https://cdn.21st.dev/assets/mirror/0e/0e070896705960db5025f59cd13d62e3ab4289d8702d084c79e11234b7ee1eab.jpg"
        coverImageUrl="https://cdn.21st.dev/assets/mirror/65/65d87811cc913be5b3a2486c3319a85385e975c3501833c34f5779cfc749773d.jpg"
        rating={4.8}
        duration="8 Days"
        rate="$40/hr"
        tools={toolsData}
        isBookmarked={isBookmarked}
        onBookmark={handleBookmark}
        onGetInTouch={handleGetInTouch}
      />
    </div>
  );
};

export default ProfileCardDemo;