Home

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

NameDescriptionExample
idThe id of the div you want to usemy-id-123
canvasSizeThe absolute width and height of the card, if not provided window.visualViewport.width and window.visualViewport.height are usedcanvasSize={{ width: '480', height: '270' }}
matrixTextThe text you want to animateANIMATE ME
backgroundColorThe background color of the canvas where text will animate"rgba(42, 40, 45, 0.2)"
textFontSizeThe font size of the text that will animate16
textMainColorThe main color of the text that will animate#A9A9A9"
textAlternateColorRatioThe ratio (should be <1) that alternate color is used0.1
textAlternateColorListThe color list to use while animating the list["#808080", "#989898", "#A9A9A9", "#C0C0C0"]
styleOverrideForContainerDivStyle override for container div. Refer to the container key in the MatrixCardDefaultStyles.js file to get the idea{ "min-height": "400vh", "color": "black",}
styleOverrideForCanvasStyle 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", }
styleOverrideForChildrenDivStyle 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