https://github.com/lightinn/special-card
special-card npm lib for react
https://github.com/lightinn/special-card
Last synced: 8 months ago
JSON representation
special-card npm lib for react
- Host: GitHub
- URL: https://github.com/lightinn/special-card
- Owner: LightInn
- License: isc
- Created: 2023-11-07T17:46:25.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-07-02T11:47:56.000Z (12 months ago)
- Last Synced: 2025-07-13T21:37:53.482Z (11 months ago)
- Language: CSS
- Size: 47.1 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Special Card
⚡ *Elegant React components for displaying cards with dynamic and interactive visual effects.* ⚡
[](https://travis-ci.org/LightInn/special-card)
[](https://www.npmjs.com/package/special-card)
[](https://www.npmjs.com/package/special-card)
[](https://github.com/LightInn/special-card/blob/master/LICENSE.md)
## 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:
```sh
npm install special-card
```
## Usage
Import and use the components in your project:
```jsx
import { HoloCard, PopCard } from 'special-card';
function App() {
return (
);
}
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:
```jsx
// index.js
import React from 'react';
import { render } from "react-dom";
import { HoloCard, PopCard } from "special-card";
const App = () => (
);
render(, document.getElementById("root"));
```
## Contributing
Contributions are always welcome. Please clone the repository and submit your pull requests here:
```sh
git clone https://github.com/LightInn/special-card.git
```
## License
Distributed under the MIT License. See `LICENSE` for more information.
---