Holo Card
An interactive 3D holographic profile card with tilt effects, sparkle animations, and flip functionality.
An interactive 3D holographic profile card with tilt effects, sparkle animations, and flip functionality.
The Holo Card supports customizable overlay colors and different background images for unique visual styles.
Pure eye candy for the landing page. Adds that premium, futuristic feel.
npx shadcn@latest add https://bungas.treonstudio.com/r/holo-card.jsonimport { HoloCard } from "@/components/ui/holo-card";
const profileData = {
name: "John Doe",
subtitle: "The Innovator",
description: "Building the future one line of code at a time.",
primaryId: "00042",
secondaryInfo: "December 2024",
badge: "Premium",
backgroundImage: "https://example.com/background.jpg",
overlayColor: "#4f46e5",
overlayOpacity: 30,
};
export default function Example() {
return <HoloCard data={profileData} />;
}| Prop | Type | Default | Description |
|---|---|---|---|
| data | HoloCardDisplayData | - | Card display data (required) |
| width | number | 320 | Card width in pixels |
| height | number | 446 | Card height in pixels |
| showSparkles | boolean | true | Show sparkle animation effect |
| forceSide | "front" | "back" | undefined | Force card to show specific side (disables flip) |
| branding | HoloCardBranding | undefined | Custom branding (logos, icons) |
| className | string | undefined | Additional CSS classes |
| onFlip | (isFlipped: boolean) => void | undefined | Callback when card is flipped |
interface HoloCardDisplayData {
/** Primary name displayed on the card */
name: string;
/** Secondary text (e.g., personality phrase, tagline) */
subtitle?: string;
/** Extended description shown on the back of the card */
description?: string;
/** Primary identifier (e.g., user number, ID) */
primaryId?: string | number;
/** Secondary info (e.g., member since date) */
secondaryInfo?: string;
/** Background image URL */
backgroundImage?: string;
/** Badge/tag text (e.g., house name, role) */
badge?: string;
/** Overlay color for the card */
overlayColor?: string;
/** Overlay opacity (0-100) */
overlayOpacity?: number;
}interface HoloCardBranding {
/** Primary logo image URL */
logo?: string;
/** Logo alt text */
logoAlt?: string;
/** Icon shown in various places */
icon?: string;
/** Icon alt text */
iconAlt?: string;
}Display a card without flip functionality:
<HoloCard data={profileData} forceSide="front" />Add your own logo and icon:
<HoloCard
data={profileData}
branding={{
logo: "/my-logo.svg",
logoAlt: "My Brand",
icon: "/my-icon.svg",
iconAlt: "Brand Icon",
}}
/>Disable the sparkle animation for a cleaner look:
<HoloCard data={profileData} showSparkles={false} />Create smaller or larger cards:
<HoloCard data={profileData} width={240} height={336} />