⚡ Elegant React components for displaying cards with dynamic and interactive visual effects. ⚡
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.
To install the latest version:
npm install special-card
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;
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 |
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 |
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"));
Contributions are always welcome. Please clone the repository and submit your pull requests here:
git clone https://github.com/LightInn/special-card.git
Distributed under the MIT License. See LICENSE
for more information.