## Installation ``` yarn add matrix-card ``` ## Usage In the below example 2 ```MatrixCard```s are stacked. ```javascript import React from 'react' import MatrixCard from 'matrix-card' const App = () => { return (

This is a test div

This is a test div 2

) } export default App ``` ## Demo The above code can be examined from here: https://mehmetkaplan.github.io/matrix-card ## API | Name | Description | Example | |------|-------------|---------| | id | The id of the div you want to use | my-id-123 | | canvasSize | The absolute width and height of the card, if not provided window.visualViewport.width and window.visualViewport.height are used | canvasSize={{ width: '480', height: '270' }} | | matrixText | The text you want to animate | ANIMATE ME | | backgroundColor | The background color of the canvas where text will animate | "rgba(42, 40, 45, 0.2)" | | textFontSize | The font size of the text that will animate | 16 | | textMainColor | The main color of the text that will animate | #A9A9A9" | | textAlternateColorRatio | The ratio (should be <1) that alternate color is used | 0.1 | | textAlternateColorList | The color list to use while animating the list | ["#808080", "#989898", "#A9A9A9", "#C0C0C0"] | | styleOverrideForContainerDiv | Style override for container div. Refer to the `container` key in the `MatrixCardDefaultStyles.js` file to get the idea | { "min-height": "400vh", "color": "black",} | | styleOverrideForCanvas | Style override for the canvas where matrix animation plays. Refer to the `canvas` key in the `MatrixCardDefaultStyles.js` file to get the idea | { "background-color": "#123456", } | | styleOverrideForChildrenDiv | Style override for children area. Refer to the `children` key in the `MatrixCardDefaultStyles.js` file to get the idea | { "width": "80%", "top": "40px", } | ## License The license is MIT and full text [here](LICENSE). ### Used Modules * react license [here](./OtherLicenses/react.txt) * create-react-hook [here](./OtherLicenses/create-react-hook.txt) * react-scripts license [here](./OtherLicenses/react-scripts.txt) * matrix-rain-animation license [here](./OtherLicenses/matrix-rain-animation.txt)

matrix-card

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past