Holographic card preview

Holographic card

A trading-card surface with a rainbow foil that shifts as it tilts toward the pointer.

  • Group
    Cards
  • Origin
    Inspired · Original (this library)
  • License
    MIT
  • Added
    Oct 18
npx shadcn@latest add @deank/holographic-card

The registry stays private. Install from the repo with a GitHub token — see the README.

Usage

import { HolographicCard } from "@/registry/components/holographic-card/holographic-card";

<HolographicCard>Label</HolographicCard>

Props

PropTypeDefaultDescription
children?ReactNode
tilt?number14Maximum tilt in degrees.
intensity?number0.7Foil intensity, 0 to 1.
className?string
width?number260
height?number360

When to use

Collectible or premium-feel cards (badges, memberships, profile cards).

When not to use

Content-heavy cards or text that must stay legible.

Related

Tilt card · Spotlight card · Liquid glass card