React-cardflee-anim NPM

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')
);

}