Popularity
0.9
Growing
Activity
3.5
Declining
17
1
1
Programming language: JavaScript
License: MIT License
matrix-card alternatives and similar libraries
Based on the "Component Collections" category.
Alternatively, view matrix-card alternatives based on common mentions on social networks and blogs.
-
react-admin
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design -
dataminr-react-components
Collection of reusable React Components and utility functions.
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
Promo
appwrite.io
Do you think we are missing an alternative of matrix-card or a related project?
README
Installation
yarn add matrix-card
Usage
In the below example 2 MatrixCard
s 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 id of the div you want to use | 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](LICENSE).
Used Modules
- react license [here](./OtherLicenses/react.txt)
- create-react-hook [here](./OtherLicenses/create-react-hook.txt)
- react-scripts license [here](./OtherLicenses/react-scripts.txt)
- matrix-rain-animation license [here](./OtherLicenses/matrix-rain-animation.txt)
*Note that all licence references and agreements mentioned in the matrix-card README section above
are relevant to that project's source code only.