Special Card

⚡ Elegant React components for displaying cards with dynamic and interactive visual effects. ⚡

Description

The special-card library offers a unique visual touch to your React.js projects. With its HoloCard and PopCard components, create stylized interactive cards that are sure to engage your users.

Installation

To install the latest version:

npm install special-card

Usage

Import and use the components in your project:

import { HoloCard, PopCard } from 'special-card';

function App() {
  return (
    <div style={{ display: 'flex' }}>
      <PopCard 
        height={300}
        titleImage="/path/to/title.png"
        hoverImage="/path/to/hover.png"
        backgroundImage="/path/to/background.png"
        link="https://your-link.com"
      />
      <HoloCard
        height={300}
        width={300}
        radius={30}
        imageSrc="/path/to/image.png"
        imageShineSrc="/path/to/shine-image.png"
      />
    </div>
  );
}

export default App;

Documentation

HoloCard

Prop	Type	Description	Default
imageSrc	string	Path to the card image	Required
imageShineSrc	string	Path to the shine effect image	Required
width	number	Width of the card	Required
height	number	Height of the card	Required
hyp	number	Intensity of the holographic effect	0.8
o	number	Opacity of the shine effect	0.4
radius	number	Radius of the card corners	16

PopCard

Prop	Type	Description	Default
backgroundImage	string	Path to the background image	/bg.png
titleImage	string	Path to the title image	/title.png
hoverImage	string	Path to the hover image	/hover.png
link	string	URL link on card click	https://brev.al
height	number	Height of the card	300
width	number	Width of the card	height / 1.5

Complete Example

Below is an example of how to integrate the library:

// index.js
import React from 'react';
import { render } from "react-dom";
import { HoloCard, PopCard } from "special-card";

const App = () => (
  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
    <PopCard 
      height={300} 
      titleImage="/path/to/title.png"
      hoverImage="/path/to/hover.png"
      backgroundImage="/path/to/background.png"
      link="https://your-link.com"
    />
    <HoloCard
      height={300}
      width={300}
      radius={30}
      imageSrc="/path/to/image.png"
      imageShineSrc="/path/to/shine-image.png"
    />
  </div>
);

render(<App />, document.getElementById("root"));

Contributing

Contributions are always welcome. Please clone the repository and submit your pull requests here:

git clone https://github.com/LightInn/special-card.git

License

Distributed under the MIT License. See LICENSE for more information.

---