React-pokemon-card-effect NPM

React Pokémon Card Effect

A React & TypeScript library for creating holographic Pokémon card effects.

Pokémon Card Effect Demo

Installation

npm install react-pokemon-card-effect

Usage

import { HoloCard, HoloEffectType } from 'react-pokemon-card-effect';
// Import the styles
import 'react-pokemon-card-effect/dist/assets/output-CMGRxOEV.css';

function MyComponent() {
  return (
    <HoloCard
      cardImage="https://assets.pokemon.com/assets/cms2/img/cards/web/SM12/SM12_EN_3.png"
      effectType={HoloEffectType.COSMOS}
      width={300}
      height={420}
      enableGyroscope={false}
    />
  );
}

Available Effects

The library provides several holographic effect types:

COSMOS - Colorful holographic effect with small stars
GALAXY - Deep space-like holographic effect
REVERSE - Silver/white reverse holographic effect
VINTAGE - Warm-toned vintage holographic effect
LEGENDARY - Gold-toned legendary holographic effect
RADIANT - Radiant holographic effect with a center glow
PRISM - Rainbow prism holographic effect
RAINBOW - Vibrant rainbow holographic effect
STANDARD - Standard holographic effect

Components

HoloCard

The main component for rendering a holographic Pokémon card.

Props

Prop	Type	Default	Description
`cardImage`	`string`	(required)	URL of the card image
`effectType`	`HoloEffectType`	(required)	Type of holographic effect to apply
`width`	`string \\| number`	`300`	Width of the card
`height`	`string \\| number`	`420`	Height of the card
`enableGyroscope`	`boolean`	`false`	Enable gyroscope support for mobile devices
`className`	`string`	`''`	Additional CSS class name
`style`	`React.CSSProperties`	`{}`	Additional inline styles
`children`	`ReactNode`	`undefined`	Children elements to render inside the card
`onClick`	`() => void`	`undefined`	Callback when the card is clicked

HoloEffect

A component for rendering just the holographic effect layer. This is used internally by HoloCard but can also be used independently.

Props

Prop	Type	Default	Description
`effectType`	`HoloEffectType`	(required)	Type of holographic effect to apply
`rotateX`	`number`	(required)	Rotation angle in degrees for the X axis
`rotateY`	`number`	(required)	Rotation angle in degrees for the Y axis
`className`	`string`	`''`	Additional CSS class name

Hooks

useHoloEffect

A hook for handling the holographic effect interactions.

import { useHoloEffect } from 'react-pokemon-card-effect';

function MyComponent() {
  const { ref, rotateX, rotateY, isHovering } = useHoloEffect({
    maxRotation: 10,
    enableGyroscope: true,
    gyroscopeSensitivity: 5,
  });

  return (
    <div ref={ref} style={{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }}>
      {/* Your content here */}
    </div>
  );
}

Options

Option	Type	Default	Description
`maxRotation`	`number`	`10`	Maximum rotation angle in degrees
`enableGyroscope`	`boolean`	`false`	Enable gyroscope support for mobile devices
`gyroscopeSensitivity`	`number`	`5`	Sensitivity of the gyroscope effect (1-10)

License

MIT

Author

Created by JeFaisLeCafé

Support My Work

If you find this library useful, consider supporting my work:

Buy Me a Coffee
Crypto: 0x2bBc7D67BCFAE6a5ab1400853fE40721CB5D5B00

Credits

Inspired by poke-holo.simey.me

react pokemon holographic card effect css

0.1.0

5 months ago