Premium Profile Card
A high-end, interactive profile card with 3D tilt, flip animation, and premium styling.
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
Installation
pnpm dlx rareui add premiumProfileCard
Usage
1
Import the component
import PremiumProfileCard from '@/components/rareui/premiumProfileCard';
2
Use in your application
export default function App() {
return (
<PremiumProfileCard />
);
}
Features
Smooth, mouse-tracking rotation creates a realistic depth effect.
Customization
Tilt Sensitivity
Adjust the friction and maxRotation constants inside the component:
const friction = 1 / 32; // Lower = more sensitive
const maxRotation = 10; // Maximum degrees of rotationColors & 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
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.
Props
This component currently doesn't accept props. To customize, modify the component code directly after installation.