zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Darker cloud colors, time-based background color, remove overlay

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 07:18:38 +02:00
1 parent 6293d17fa1
commit bb8d892ab9
1 file changed
+17 -25
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+17 -25
View File
@@ -7,16 +7,6 @@
<style> <style>
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; } html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
#vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } #vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
pointer-events: none;
z-index: 1;
}
#clock { #clock {
position: fixed; position: fixed;
top: 20px; top: 20px;
@@ -34,7 +24,6 @@
</head> </head>
<body> <body>
<div id="vanta"></div> <div id="vanta"></div>
<div id="overlay"></div>
<div id="clock">00:00</div> <div id="clock">00:00</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script>
@@ -77,17 +66,17 @@
var CYCLE = 20000; var CYCLE = 20000;
var palette = [ var palette = [
{ t: 0.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d }, { t: 0.00, sky: 0x100f12, cloud: 0x3a383d, light: 0x3a383d, bg: 0x100f12 },
{ t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x4a4855 }, { t: 0.08, sky: 0x1c1b1f, cloud: 0x3a383d, light: 0x4a4855, bg: 0x141316 },
{ t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, light: 0xa85f1d }, { t: 0.18, sky: 0x2a2429, cloud: 0x4a3a30, light: 0xa85f1d, bg: 0x1f1814 },
{ t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, light: 0xc56a2b }, { t: 0.28, sky: 0x4a3528, cloud: 0x5a4a3a, light: 0xc56a2b, bg: 0x2a1f17 },
{ t: 0.40, sky: 0x4a3a30, cloud: 0x999187, light: 0xd6b46a }, { t: 0.40, sky: 0x4a3a30, cloud: 0x5a4a3a, light: 0xd6b46a, bg: 0x3a2e22 },
{ t: 0.50, sky: 0x54514f, cloud: 0x999187, light: 0xe6dfd1 }, { t: 0.50, sky: 0x54514f, cloud: 0x6d6a63, light: 0xe6dfd1, bg: 0x403d39 },
{ t: 0.60, sky: 0x4a4540, cloud: 0x999187, light: 0xc56a2b }, { t: 0.60, sky: 0x4a4540, cloud: 0x6d5a4f, light: 0xc56a2b, bg: 0x3a2e22 },
{ t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, light: 0xe0914f }, { t: 0.70, sky: 0x3a2a22, cloud: 0x5a4a3a, light: 0xe0914f, bg: 0x2a1f17 },
{ t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, light: 0xa85f1d }, { t: 0.82, sky: 0x2a1f1f, cloud: 0x4a3a30, light: 0xa85f1d, bg: 0x1f1814 },
{ t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x54514f }, { t: 0.92, sky: 0x1c1b1f, cloud: 0x3a383d, light: 0x54514f, bg: 0x141316 },
{ t: 1.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d } { t: 1.00, sky: 0x100f12, cloud: 0x3a383d, light: 0x3a383d, bg: 0x100f12 }
]; ];
function getColor(t) { function getColor(t) {
@@ -100,11 +89,12 @@
return { return {
sky: lerpColor(palette[i].sky, palette[i + 1].sky, s), sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s), cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
light: lerpColor(palette[i].light, palette[i + 1].light, s) light: lerpColor(palette[i].light, palette[i + 1].light, s),
bg: lerpColor(palette[i].bg, palette[i + 1].bg, s)
}; };
} }
} }
return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light }; return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light, bg: palette[0].bg };
} }
var startTime = Date.now(); var startTime = Date.now();
@@ -124,8 +114,10 @@
effect.setOptions({ effect.setOptions({
skyColor: c.sky, skyColor: c.sky,
cloudColor: c.cloud, cloudColor: c.cloud,
lightColor: c.light lightColor: c.light,
backgroundColor: c.bg
}); });
document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
clockEl.textContent = formatTime(t * 1440); clockEl.textContent = formatTime(t * 1440);
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }