Awesome
Installation
yarn add matrix-card
Usage
In the below example 2 MatrixCards are stacked.
import React from 'react'
import MatrixCard from 'matrix-card'
const App = () => {
return (
<div style={{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}>
<div>
<MatrixCard
id={"my-id-1"}
matrixText={"ANIMATE ME"}
delay={40}
backgroundColor={"rgba(42, 40, 45, 0.2)"}
textFontSize={"16"}
textMainColor={"#A9A9A9"}
textAlternateColorRatio={0.1}
textAlternateColorList={["#808080", "#989898", "#A9A9A9", "#C0C0C0"]}
styleOverrideForContainerDiv={{ backgroundColor: "rgba(42, 40, 45)", }}
>
<div>
This is a test div
</div>
</MatrixCard>
</div>
<div>
<MatrixCard
id={"my-id-2"}
matrixText={"ANIMATE ME 2"}
delay={100}
backgroundColor={"rgba(0, 40, 0, 0.1)"}
textFontSize={"16"}
textMainColor={"#00FF00"}
textAlternateColorRatio={0.1}
textAlternateColorList={["#00F000", "#00EA00", "#00E000", "#00D600"]}
styleOverrideForCanvas={{ backgroundColor: "#00FF00" }}
styleOverrideForContainerDiv={{ backgroundColor: "rgba(0, 40, 0)", }}
>
<div>
This is a test div 2
</div>
</MatrixCard>
</div>
</div>
)
}
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.