cards-css

Holographic cards

Framework-agnostic trading-card effects — tilt, shine and glare with holo, reverse, cosmos and glitter foils, all driven by procedurally generated textures.

Move your pointer across a card to tilt it · tap or click to enlarge.

Get started

npm install @kongyo2/cards-css

import { createHoloCard } from "@kongyo2/cards-css";
import "@kongyo2/cards-css/styles.css";

const card = createHoloCard({
  image: "/charizard.png",
  effect: "holo",
});
document.body.append(card.element);

Card artwork is original geometric art for this demo · source on GitHub