https://github.com/cheng500/react-animated-cubes
3D Cube Edges background animation
https://github.com/cheng500/react-animated-cubes
animated background cubes react threejs
Last synced: 24 days ago
JSON representation
3D Cube Edges background animation
- Host: GitHub
- URL: https://github.com/cheng500/react-animated-cubes
- Owner: cheng500
- Created: 2020-07-24T13:34:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:27:58.000Z (almost 3 years ago)
- Last Synced: 2025-02-01T10:51:07.681Z (10 months ago)
- Topics: animated, background, cubes, react, threejs
- Language: JavaScript
- Homepage: https://nckdev.agency/lab/react-animated-cubes/en
- Size: 1.73 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# react-animated-cubes
Simple Three JS Cube Edges Falling Animation
**[DEMO](https://nckdev.agency/lab/react-animated-cubes/en)**
### Installation
`npm install --save react-animated-cubes`
Use `npm start` to preview
### Simple Usage
```javascript
```
### Props
| name | required | type | default | description |
| ---------------- | -------- | ------ | --------- | --------------------------------------------- |
| backgroundColor | false | string | "#262626" | Background color of the \ |
| edgeColor | false | string | "#59c0bb" | Edge color of the cubes |
| maxEdgeLength | false | number | 500 | Maximum edge length |
| minEdgeLength | false | number | 100 | Minimum edge length |
| maxFallingSpeed | false | number | 10 | Maximum falling speed per frame |
| minFallingSpeed | false | number | 5 | Minimum falling speed per frame |
| maxRotationSpeed | false | number | 0.03 | Maximum rotation speed per frame (1 = 360°) |
| minRotationSpeed | false | number | 0.01 | Minimum rotation speed per frame (1 = 360°) |
| numberOfCubes | false | number | 5 | Maximum number of cubes to be falling at once |
| style | false | Object | | Style of container div |
### Support
If you like this plugin, please consider donating to a small time developer (me)!
**[Donate](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2CQSKFWR9LREL&source=url)**