← Docs

Advanced Usage

Custom Foil Overlay

Set rarity="custom" and pass an image URL to use your own foil texture. The image is applied as a CSS background via the --customimage custom property.

<PrismoCard rarity="custom" image="/my-foil-texture.png">
  <img src="/card.png" alt="card" />
</PrismoCard>

Best results with seamless tileable textures at 500x500px or above. PNG with transparency works for overlay blending.

Gallery Mode

By default, some rarity effects use clip-path to restrict the foil to specific regions (the holo strip on basic holos, for example). Set gallery to disable clipping and apply the effect to the full card surface.

<PrismoCard rarity="rare holo" gallery>
  <img src="/card.png" alt="card" />
</PrismoCard>

Subtypes & Clip Regions

The subtype prop changes the clip-path shape for certain rarities. For example, stage cards have a different holo region than basic cards, and supporter trainers have their own mask.

<PrismoCard rarity="rare holo" subtype="stage" supertype="pokémon">
  <img src="/stage2.png" alt="Stage 2" />
</PrismoCard>

Performance Tips

  • Mobile detection — On low-end devices, consider skipping the PrismoCard wrapper entirely and rendering the image directly. The pointer tracking is lightweight but the CSS effects can be GPU-intensive with many cards visible.
  • Virtualization — When rendering large grids (50+ cards), combine with a virtualization library like react-window to only mount visible cards.
  • Static fallback — For SSR/SSG, the card renders as a static element. The holographic effect only activates on pointer interaction (progressive enhancement).
  • Reduce motion — The CSS respects the user's prefers-reduced-motion setting when your stylesheet includes appropriate media queries wrapping the transition/transform rules.

Styling the Card Container

The root .card element uses CSS custom properties for transforms. You can override sizing, border-radius, and perspective via the className prop or by targeting the CSS classes directly.

.card {
  /* Override card dimensions */
  width: 300px;
  aspect-ratio: 2.5 / 3.5;
}

.card__rotator {
  /* Adjust perspective depth */
  perspective: 800px;
}