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.

Used Modules

• react license here
• create-react-hook here
• react-scripts license here
• matrix-rain-animation license here