Holo Card

A collectible profile card with real 3D tilt, holographic foil and parallax depth.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

The card tilts toward your cursor, a rainbow foil shifts with the viewing angle (masked to fine diagonal lines like real holo stock), a glare follows the light, and the avatar and name float above the surface at different depths.

Installation

$ npx shadcn@latest add https://guetix.com/r/holo-card.json

Uses the shadcn CLI. It creates components/guetix/holo-card.tsx and installs nothing else.

Usage

example.tsx

"use client";

import HoloCard from "@/components/guetix/holo-card";

export default function HoloCardDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <HoloCard animated={variant !== "regular"}
      name="Hamza Guetioui"
      role="Full-stack developer"
      handle="@guetix"
      serial="No. 001"
      accent="#4ade80"
      stats={[
        { label: "Projects", value: "40+" },
        { label: "Stack", value: "27" },
        { label: "Coffee", value: "∞" },
      ]}
    />
  );
}

Portfolio heroTeam pageGamified profileConference badge

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Foil = rainbow gradient × line mask × radial mask composited with `mask-composite`.
02Pointer math writes CSS variables directly, so there are no React re-renders while you move the cursor.
03Depth uses `preserve-3d` + per-layer `translateZ`; it springs back with a different easing than it tracks.

Props

Prop	Type	Default	Description
name	string	—	Display name.
role	string	—	Role / title under the name.
avatar	string	—	Image URL. Falls back to initials.
handle	string	—	Small handle at the bottom.
stats	{ label: string; value: string }[]	[]	Up to three stats.
serial	string	"No. 001"	Serial printed on the card.
accent	string	"#4ade80"	Accent color (any CSS color).
maxTilt	number	14	Max tilt in degrees.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Focusable card with a full accessible label; focus applies a gentle tilt.
Reduced motion disables the tilt.

Holo Card

A collectible profile card with real 3D tilt, holographic foil and parallax depth.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Open in v0

Animated · Full motion: idle animation, physics and effects. animated (default)

Installation

$ npx shadcn@latest add https://guetix.com/r/holo-card.json

Uses the shadcn CLI. It creates components/guetix/holo-card.tsx and installs nothing else.

Usage

example.tsx

"use client";

import HoloCard from "@/components/guetix/holo-card";

export default function HoloCardDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <HoloCard animated={variant !== "regular"}
      name="Hamza Guetioui"
      role="Full-stack developer"
      handle="@guetix"
      serial="No. 001"
      accent="#4ade80"
      stats={[
        { label: "Projects", value: "40+" },
        { label: "Stack", value: "27" },
        { label: "Coffee", value: "∞" },
      ]}
    />
  );
}

Portfolio heroTeam pageGamified profileConference badge

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Foil = rainbow gradient × line mask × radial mask composited with `mask-composite`.
02Pointer math writes CSS variables directly, so there are no React re-renders while you move the cursor.
03Depth uses `preserve-3d` + per-layer `translateZ`; it springs back with a different easing than it tracks.

Props

Prop	Type	Default	Description
name	string	—	Display name.
role	string	—	Role / title under the name.
avatar	string	—	Image URL. Falls back to initials.
handle	string	—	Small handle at the bottom.
stats	{ label: string; value: string }[]	[]	Up to three stats.
serial	string	"No. 001"	Serial printed on the card.
accent	string	"#4ade80"	Accent color (any CSS color).
maxTilt	number	14	Max tilt in degrees.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Focusable card with a full accessible label; focus applies a gentle tilt.
Reduced motion disables the tilt.

Holo Card

Preview

Holo Card

Preview