Holo Card
NewPro
A trading card with 3D tilt, a rainbow foil and sparkle that shift with the angle, and a moving glare.
FrostlingHP 120
Ice · Spirit
Snow drift30Glacier wall60
No. 042 · Lantern Valley set
Tilt with your pointer. On a phone, tap once to use the gyroscope.
Customize
Rarity
0.65
14°
Installation
Holo Card is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy holo-card.tsx into components/ui and run npm install motion.
Usage
import { HoloCard } from "@/components/ui/holo-card";
<HoloCard rarity="holo" foil={0.7}>
<CardFace monster={monster} />
</HoloCard>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The card face: art, name, stats. |
| rarity | "common" | "rare" | "holo" | "holo" | common: glare only. rare: a gold sheen and frame. holo: rainbow foil and sparkle. |
| foil | number | 0.65 | Strength of the foil and sparkle, 0 to 1. |
| maxTilt | number | 14 | Largest tilt in degrees. Reduced motion keeps the card flat. |
| width | number | 260 | Card width in pixels. |
| aspectRatio | string | "5 / 7" | CSS aspect ratio of the card. |
| gyroscope | boolean | true | Tilts with the phone where allowed. iOS asks for permission on the first tap. |
| idleSway | boolean | true | Gentle sway while nobody touches the card. |
| label | string | — | Accessible name when the card is pure art. Hides the children from screen readers. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion