Card Loot Opening

React Package to enchance your looting cards with stunning holographic effects !

Table of contents

• Getting started
• Dependencies
• Live Demo
• Documentation

Getting Started

Adding Package

Install Card Loot Opening from NPM:

npm i card-loot-opening

Importing Components

Import required LootCard component within your files:

import { LootCard } from 'card-loot-opening';

Now you are ready to use the imported LootCard component ! 🔥

---

Dependencies

Required Peer Dependencies

Only React is needed to run Card Loot Opening:

• React

---

Customizable effects

Many customizable effects:

• Shine color
• Holographic color
• Shadow color
• Animation on mouse out
• Two preset effects
• Size

---

Live Demo

Live demo: https://card-loot-opening.netlify.app/

---

Documentation

Basic usage

<LootCard
  img="https://assets.pokemon.com/assets/cms2/img/cards/web/SM3/SM3_EN_20.png"
  rarityPreset="legendary"
/>

You can use two preset effect: legendary or holographic.

Custom usage

<LootCard
  img={"https://assets.pokemon.com/assets/cms2/img/cards/web/SV3PT5/SV3PT5_EN_200.png"}
  shineOptions={{
    color1: "#6dd5ed",
    color2: "#2193b0"
  }}
  holographicOptions={{
    glow: true,
    color1: "#0077be",
    color2: "#0087b3",
    color3: "#0097a8",
    color4: "#00a799",
    color5: "#00b78e"
  }}
  shadowOptions={{
    default: { color1: "#6dd5ed", color2: "#2193b0" },
    hover: { color1: "#6dd5ed", color2: "#2193b0" }
  }}
  size={{ height: 410, width: 300 }}
/>

Here you can define several customizable props.

Props

Prop	Type	Usage	Purpose
img	string	Url	Card's image url
shineOptions	Object	{ color1, color2 }	Create a gradient from those two colors when holographic colors are not set
holographicOptions	Object	{ glow, color1, color2, color3, color4, color5 }	Create a gradient and a better effect, set glow to true if you want to make it glow when hovering the card
shadowOptions	Object	{ default: { color1, color2 }, hover: { color1, color2 } }	Set the default shadow and the shadow when hovering the card
size	Object	{ height, width }	Set the card's size
rarityPreset	string	"legendary" or "holographic"	Use preset effect