Skip to content

An npm package rendering a card that flee away from mouse.

Notifications You must be signed in to change notification settings

Ashuto7h/react-cardflee-animation

Repository files navigation

React CardFlee Animation

A smoothly animated 3d card component whose edges flee away from mouse pointer.

Written in typescript.

Demo

cardflee-demo.mp4

Usage

import CardFlee from 'react-cardflee-anim'

<CardFlee image='/images/myimg.jpg' />

Props

Prop Description Default Example
height Height of card 300 height = "300"
width Width of card 200 width = "200"
id Unique id for each card undefined id = "1" or id={1}
image Image src undefined image = "/image.jpg"
sensitivity (int) a factor for sensitiveness of animation 20 sensitivity = {23}
bgcolor A Background color css value to provide instead/behind of image. black bgcolor = "#43ffbb"
head A JSX element undefined head = <myHead />
content A JSX element undefined content = <myContent />

NOTE : You must provide the id attribute if there are multiple cards on the same page.

Detailed Example

import React from "react";
import CardFlee from "./CardFlee";
import ReactDOM from "react-dom";

const content1 = <React.Fragment><p>watch the movie now
    <br />Grab your Tickets <br /></p></React.Fragment>;

const content2 = <React.Fragment>
    <p>
        New Season Out Now
    </p>
</React.Fragment>


ReactDOM.render(
    <React.StrictMode>
            <CardFlee id='1' image='/joker.jpg' head={<h1>Joker</h1>} content={content1} sensitivity={23} />
            <CardFlee id='2' image='/flash.jpg' head={<h1>The Flash</h1>} content={content2} />
    </React.StrictMode>,
    document.getElementById('root')
);

}