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

}