React library to generate matrix style simple cards

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.innerWidth and window.innerHeight 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