MehmetKaplan / matrix-card

React library to generate matrix style simple cards.

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