Skip to content

Commit 86403e3

Browse files
cheng500cheng500
committed
first commit
0 parents  commit 86403e3

16 files changed

+7897
-0
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
3+
}

‎.flowconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
[ignore]
2+
3+
[include]
4+
5+
[libs]
6+
7+
[lints]
8+
9+
[options]
10+
module.file_ext=.js
11+
module.file_ext=.json
12+
module.file_ext=.jsx
13+
module.file_ext=.css
14+
module.file_ext=.scss
15+
[strict]

‎.github/FUNDING.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# These are supported funding model platforms
2+
3+
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4+
patreon: # Replace with a single Patreon username
5+
open_collective: # Replace with a single Open Collective username
6+
ko_fi: # Replace with a single Ko-fi username
7+
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8+
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9+
liberapay: # Replace with a single Liberapay username
10+
issuehunt: # Replace with a single IssueHunt username
11+
otechie: # Replace with a single Otechie username
12+
custom: ["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QX3XJ942LDLMQ&source=url"]

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
dist/

‎README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# react-typing-animation
2+
Simple Three JS Cube Edges Falling Animation
3+
4+
**[DEMO](https://website-ee18e.firebaseapp.com/lab/react-cubes-animated)**
5+
6+
Use `npm start` to preview
7+
8+
### Simple Usage
9+
```javascript
10+
<AnimatedCubes />
11+
```
12+
13+
### Props
14+
name|required|type|default|description
15+
----|--------|----|-------|-----------
16+
backgroundColor|false|string|"#262626"|Background color of the \<canvas\>
17+
edgeColor|false|string|"#59c0bb"|Edge color of the cubes
18+
maxEdgeLength|false|number|500|Maximum edge length
19+
minEdgeLength|false|number|100|Minimum edge length
20+
maxFallingSpeed|false|number|10|Maximum falling speed per frame
21+
minFallingSpeed|false|number|5|Minimum falling speed per frame
22+
maxRotationSpeed|false|number|0.03|Maximum rotation speed per frame (1 = 360°)
23+
minRotationSpeed|false|number|0.01|Minimum rotation speed per frame (1 = 360°)
24+
numberOfCubes|false|number|5|Maximum number of cubes to be falling at once
25+
style|false|Object||Style of container div
26+
27+
28+
### Support
29+
If you like this plugin, please consider donating to a small time developer (me)!
30+
31+
**[Donate](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QX3XJ942LDLMQ&source=url)**

‎demo/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>react-cubes-animated</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="main"></div>
16+
</body>
17+
</html>

‎demo/js/index.js

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/**
2+
* @flow
3+
*/
4+
'use strict'
5+
6+
import React from 'react'
7+
import ReactDOM from 'react-dom'
8+
import AnimatedCubes from '../../dist'
9+
10+
const App = () => {
11+
const [numberOfCubes, setNumberOfCubes] = React.useState(5)
12+
const [maxEdgeLength, setMaxEdgeLength] = React.useState(500)
13+
const [minEdgeLength, setMinEdgeLength] = React.useState(100)
14+
const [maxFallingSpeed, setMaxFallingSpeed] = React.useState(10)
15+
const [minFallingSpeed, setMinFallingSpeed] = React.useState(5)
16+
const [maxRotationSpeed, setMaxRotatonSpeed] = React.useState(0.03)
17+
const [minRotationSpeed, setMinRotationSpeed] = React.useState(0.01)
18+
19+
const handleChangeCubes = (event) => {
20+
setNumberOfCubes(Number(event.target.value))
21+
}
22+
const handleChangeMaxEdgeLength = (event) => {
23+
setMaxEdgeLength(Number(event.target.value))
24+
}
25+
const handleChangeMinEdgeLength = (event) => {
26+
setMinEdgeLength(Number(event.target.value))
27+
}
28+
const handleChangeMaxFallingSpeed = (event) => {
29+
setMaxFallingSpeed(Number(event.target.value))
30+
}
31+
const handleChangeMinFallingSpeed = (event) => {
32+
setMinFallingSpeed(Number(event.target.value))
33+
}
34+
const handleChangeMaxRotationSpeed = (event) => {
35+
setMaxRotatonSpeed(Number(event.target.value))
36+
}
37+
const handleChangeMinRotationSpeed = (event) => {
38+
setMinRotationSpeed(Number(event.target.value))
39+
}
40+
return (
41+
<div style={{ width: '100vw', height: '100vh', color: 'white' }}>
42+
<AnimatedCubes
43+
maxEdgeLength={maxEdgeLength}
44+
minEdgeLength={minEdgeLength}
45+
maxFallingSpeed={maxFallingSpeed}
46+
minFallingSpeed={minFallingSpeed}
47+
maxRotationSpeed={maxRotationSpeed}
48+
minRotationSpeed={minRotationSpeed}
49+
numberOfCubes={numberOfCubes}
50+
>
51+
<div style={{
52+
display: 'flex',
53+
position: 'absolute',
54+
width: '100%',
55+
bottom: 20,
56+
alignItems: 'center',
57+
justifyContent: 'space-around'
58+
}}>
59+
<div>
60+
<div>Number of Cubes: { numberOfCubes }</div>
61+
<input
62+
type="range"
63+
min="1"
64+
max="10"
65+
value={numberOfCubes}
66+
onChange={handleChangeCubes}
67+
/>
68+
</div>
69+
<div>
70+
<div>
71+
<div>Minimum Edge Length: {minEdgeLength}</div>
72+
<input
73+
type="range"
74+
min={100}
75+
max={500}
76+
step={50}
77+
value={minEdgeLength}
78+
onChange={handleChangeMinEdgeLength}
79+
/>
80+
</div>
81+
<div>
82+
<div>Maximum Edge Length: {maxEdgeLength}</div>
83+
<input
84+
type="range"
85+
min={100}
86+
max={1000}
87+
step={50}
88+
value={maxEdgeLength}
89+
onChange={handleChangeMaxEdgeLength}
90+
/>
91+
</div>
92+
</div>
93+
<div>
94+
<div>
95+
<div>Minimum Falling Speed: {minFallingSpeed}</div>
96+
<input
97+
type="range"
98+
min={5}
99+
max={50}
100+
step={5}
101+
value={minFallingSpeed}
102+
onChange={handleChangeMinFallingSpeed}
103+
/>
104+
</div>
105+
<div>
106+
<div>Maximum Falling Speed: {maxFallingSpeed}</div>
107+
<input
108+
type="range"
109+
min={5}
110+
max={100}
111+
step={5}
112+
value={maxFallingSpeed}
113+
onChange={handleChangeMaxFallingSpeed}
114+
/>
115+
</div>
116+
</div>
117+
<div>
118+
<div>
119+
<div>Minimum Rotation Speed: {minRotationSpeed}</div>
120+
<input
121+
type="range"
122+
min={0.01}
123+
max={0.1}
124+
step={0.01}
125+
value={minRotationSpeed}
126+
onChange={handleChangeMinRotationSpeed}
127+
/>
128+
</div>
129+
<div>
130+
<div>Maximum Rotation Speed: {maxRotationSpeed}</div>
131+
<input
132+
type="range"
133+
min={0.03}
134+
max={0.2}
135+
step={0.01}
136+
value={maxRotationSpeed}
137+
onChange={handleChangeMaxRotationSpeed}
138+
/>
139+
</div>
140+
</div>
141+
</div>
142+
</AnimatedCubes>
143+
</div>
144+
)
145+
}
146+
147+
const wrapper = document.getElementById("main")
148+
wrapper && ReactDOM.render(<App />, wrapper)

‎dev/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>react-cubes-animated</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="main"></div>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)