-
-
Notifications
You must be signed in to change notification settings - Fork 8
/
test.html
55 lines (46 loc) · 1.3 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<title>NEAT, beautiful 3D gradients for your website</title>
</head>
<body>
<canvas id="gradient"/>
<script type="module">
import * as NEAT from 'https://cdn.jsdelivr.net/npm/@firecms/[email protected]/+esm';
const { NeatGradient } = NEAT;
// import { NeatConfig, NeatGradient } from 'https://cdn.jsdelivr.net/npm/@firecms/[email protected]/+esm';
const config = {
colors: [
{ color: "#FF5373", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#6D3BFF", enabled: true },
{ color: "#f5e1e5", enabled: false }
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 5,
waveFrequencyX: 2,
waveFrequencyY: 3,
waveAmplitude: 5,
shadows: 0,
highlights: 2,
saturation: 7,
wireframe: false,
colorBlending: 6,
backgroundColor: "#003FFF",
backgroundAlpha: 1
};
document.addEventListener('DOMContentLoaded', () => {
const neat = new NeatGradient({
ref: document.getElementById("gradient"),
...config
});
// you can change the config at any time
neat.speed = 6;
});
</script>
<div>
Hey there
</div>
</body>
</html>