forked from jackyzha0/sunlit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (74 loc) · 2.53 KB
/
index.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="dappled-light">
<div id="glow"></div>
<div id="glow-bounce"></div>
<div class="perspective">
<div id="leaves">
<svg style="width: 0; height: 0; position: absolute;">
<defs>
<filter id="wind" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" numOctaves="2" seed="1">
<animate attributeName="baseFrequency" dur="16s" keyTimes="0;0.33;0.66;1"
values="0.005 0.003;0.01 0.009;0.008 0.004;0.005 0.003" repeatCount="indefinite" />
</feTurbulence>
<feDisplacementMap in="SourceGraphic">
<animate attributeName="scale" dur="20s" keyTimes="0;0.25;0.5;0.75;1" values="45;55;75;55;45"
repeatCount="indefinite" />
</feDisplacementMap>
</filter>
</defs>
</svg>
</div>
<div id="blinds">
<div class="shutters">
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
<div class="shutter"></div>
</div>
<div class="vertical">
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
<div id="progressive-blur">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<article>
<h1>sunlit</h1>
<p>inspired by <a href="https://daylightcomputer.com/">daylight computer</a> and <a href="https://www.chloeyan.me/">chloe yan's</a> <a href="https://www.sunlit.place/">sunlit place</a></p>
<pre>[press <code>space</code> to toggle the sun]</pre>
</article>
</body>
<script src="./index.js"></script>
</html>