@otto201613/holo-card

宝可梦 TCG 卡牌全息/闪卡视觉特效 React 组件。给一张卡牌的元数据(或者直接把 pokemontcg.io 返回的原始 JSON 传进来),就能渲染出跟随鼠标/触摸的 3D 全息、彩虹、Shiny Vault 等特效卡面。桌面端和移动端触控都做了单独的交互适配,卡片默认按父容器宽度自适应(带一个可覆盖的默认上限)。

移植自 simeydotme/pokemon-cards-css(GPL-3.0),见 LICENSE。

安装

npm install @otto201613/holo-card
# 或 pnpm add / yarn add

react、react-dom、@react-spring/web 是 peerDependencies,需要你的项目里已经安装(版本 ^19 / ^10)。

用法

import { AudenCard } from "@otto201613/holo-card";
import "@otto201613/holo-card/style.css";

function Example() {
  return (
    <AudenCard
      id="swsh12-049"
      name="Galarian Articuno"
      set="swsh12"
      number="049"
      rarity="Rare Holo"
      supertype="Pokémon"
      subtypes={["Basic"]}
      types={["Psychic"]}
      img="https://images.pokemontcg.io/swsh12/49_hires.png"
      cdnBase="https://poke-holo.b-cdn.net"
    />
  );
}

直接传 pokemontcg.io 卡牌 JSON

不想手动拆字段的话,把 API 返回的卡牌对象整个传给 card:

<AudenCard
  card={{
    id: "swsh12-049",
    name: "Galarian Articuno",
    supertype: "Pokémon",
    subtypes: ["Basic"],
    types: ["Psychic"],
    rarity: "Rare Holo",
    number: "049",
    set: { id: "swsh12" },
    images: { large: "https://images.pokemontcg.io/swsh12/49_hires.png" },
  }}
  cdnBase="https://poke-holo.b-cdn.net"
/>

单独传的字段(id/rarity/img 等)优先级高于 card 里的同名字段,可用来覆盖个别值。

尺寸自适应

<AudenCard> 默认宽度撑满父容器、按卡牌固定比例自动算高度,没有外层容器约束时会封顶在一个合理的默认宽度。想要自定义尺寸,直接控制父容器宽度,或者覆盖 CSS 变量:

.my-card-slot {
  --auden-card-max-width: 240px;
}

更多用法示例

克隆仓库后运行 pnpm dev,examples/App.tsx 里有完整的用法演示(自动拼资源 / 自定义 mask+foil / 无 holo 普通卡 / 展示动画 / card 对象等)。

License

GPL-3.0-only — 因为上游 simeydotme/pokemon-cards-css 使用 GPL-3.0,本项目作为其衍生作品继续沿用同一协议。