API Reference

<PrismoCard />

Prop	Type	Default	Description
rarity	Rarity \| string	'common'	The holographic effect to apply. Built-in values: 'common', 'rare holo', 'rare holo galaxy', 'rare holo v', 'rare holo vmax', 'rare holo vstar', 'rare rainbow', 'rare rainbow alt', 'rare secret', 'rare ultra', 'radiant', 'custom'.
supertype	string	'pokémon'	Card supertype. Affects clip-path regions for some rarity effects.
subtype	string	'basic'	Card subtype. Affects clip-path for stage/supporter variants.
gallery	boolean	false	When true, disables clip-path so the foil effect covers the entire card surface.
image	string	undefined	URL of a custom foil overlay image. Only used when rarity is 'custom'.
className	string	undefined	Additional CSS class applied to the root .card element.
children	ReactNode	undefined	The card content — typically an image or custom markup.

Rarity type

type Rarity =
  | 'common'
  | 'rare holo'
  | 'rare holo galaxy'
  | 'rare holo v'
  | 'rare holo vmax'
  | 'rare holo vstar'
  | 'rare rainbow'
  | 'rare rainbow alt'
  | 'rare secret'
  | 'rare ultra'
  | 'radiant'
  | 'custom';

The rarity prop also accepts arbitrary strings for forward compatibility with future CSS effects.

CSS Custom Properties

The component sets these CSS variables on the card rotator element in real-time during pointer interaction:

Prop	Type	Default	Description
--mx, --my	percentage	50%	Pointer X/Y position relative to card (0–100%).
--rx, --ry	deg	0deg	3D rotation angles derived from pointer offset.
--pos	background-position	50% 50%	Combined position for shine gradients.
--posx, --posy	percentage	50%	Individual axis positions for gradient offsets.
--hyp	0–1	0	Distance from center (hypotenuse), normalized. Controls brightness.
--o	0 \| 1	0	Interaction active flag. 1 during hover, 0 on leave.
--s	number	1	Scale factor (reserved for future use).
--customimage	url()	none	Set on hover when rarity is 'custom'. Uses the image prop value.

CSS Class Structure

.card                    → Root container (data-rarity, data-supertype, data-subtypes, data-gallery)
  .card__translater      → Perspective container
    .card__rotator       → 3D transform target (receives CSS vars)
      .card__front       → Face container
        [children]       → Your content
        .card__shine     → Holographic gradient overlay
        .card__glare     → Specular glare overlay