react-cardflee-anim

React CardFlee Animation

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

Written in typescript.

Demo

https://user-images.githubusercontent.com/53266261/122939164-0571e100-d391-11eb-9d2b-b07f32dfee19.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')
);

}