Premium Profile Card

A high-end, interactive profile card with 3D tilt, flip animation, and premium styling.

Henry Jackson

Design Engineer

Henry Jackson

Mumbai, India

STUDIO JACKSON

Location

Mumbai, MH

Skills

Product Design
Systems Eng.
Prototyping
CAD / 3D Mod.

Contact

henry@jackson.eng
jackson.engineering
Bandra West, Mumbai
Lead Engineer

Installation

Run the following command to install the component:

npx rareui add premiumProfileCard

This will install the component to components/rareui/ directory.

Installation

Install the component using the RareUI CLI:

npx rareui add premiumProfileCard

This will automatically install the component to your components/rareui/cards/ directory with all necessary dependencies.

Usage

import PremiumProfileCard from '@/components/rareui/cards/premiumProfileCard';

export default function App() {
  return (
    <PremiumProfileCard />
  );
}

Features

  • 3D Tilt Effect: Smooth, mouse-tracking rotation with configurable sensitivity
  • Flip Animation: Click to reveal card back with contact information
  • Dark Mode Support: Seamlessly adapts to light and dark themes
  • Premium Animations: Glowing borders, sheen effects, and micro-interactions
  • Fully Self-Contained: All CSS included inline - no global styles needed
  • Responsive Design: Optimized for all screen sizes
  • Interactive Elements: Hover states on skills, contact rows, and buttons

Customization

The component is built with customization in mind. You can modify:

Tilt Sensitivity

Adjust the friction and maxRotation constants inside the component:

const friction = 1 / 32;  // Lower = more sensitive
const maxRotation = 10;   // Maximum degrees of rotation

Colors & Styling

All colors use Tailwind classes and can be easily modified:

  • Card Background: bg-[#FDFCF8] dark:bg-[#0d0d0d]
  • Border Color: border-stone-200 dark:border-stone-700
  • Text Colors: Uses stone color palette for consistency

Content

Replace the demo content with your own:

  • Profile image URL
  • Name and title
  • Location
  • Skills list
  • Contact information

Component API

FeatureDescription
3D TiltCard follows mouse movement with smooth perspective rotation
Flip AnimationClick anywhere on card to flip and reveal back side
Glowing BorderAnimated spinning gradient border appears on hover
Sheen EffectSubtle light sweep follows rotation on hover
Dark ModeAdapts colors based on system/app theme
DependenciesRequires lucide-react for icons

Dependencies

This component requires:

  • lucide-react - For icons (Mail, Globe, MapPin, etc.)
  • React 18+ - For hooks (useState, useRef)
  • Tailwind CSS - For styling

These will be automatically installed if you use the RareUI CLI.

Notes

  • The component is fully self-contained with inline CSS for animations
  • No global CSS modifications required
  • Works out of the box after CLI installation
  • All images use Unsplash URLs - replace with your own in production
Previous