animated_wallpaper/index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanta Clouds2</title>
    <style>
        html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
        #vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
        #moon {
            position: fixed;
            top: 80px;
            right: 80px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #e6dfd1, #999187);
            box-shadow: 0 0 30px rgba(229, 224, 209, 0.4);
            opacity: 0;
            transition: opacity 0.5s;
            z-index: 5;
            pointer-events: none;
        }
        #sun {
            position: fixed;
            top: 80px;
            right: 80px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #f3ede1, #e0914f);
            box-shadow: 0 0 60px rgba(224, 145, 79, 0.6);
            opacity: 0;
            transition: opacity 0.5s;
            z-index: 5;
            pointer-events: none;
        }
        #clock {
            position: fixed;
            top: 20px;
            right: 20px;
            color: #e6dfd1;
            font-family: monospace;
            font-size: 18px;
            background: rgba(28, 27, 31, 0.7);
            padding: 8px 14px;
            border-radius: 6px;
            z-index: 9999;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
    <div id="vanta"></div>
    <div id="moon"></div>
    <div id="sun"></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://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script>
    <script>
        var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
            el: "#vanta",
            mouseControls: false,
            touchControls: false,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 4,
            speed: 0.4,
            backgroundColor: 0x0,
            backgroundAlpha: 0,
            skyColor: 0x3a4458,
            cloudColor: 0x6d6a63,
            lightColor: 0xb0a89a,
            texturePath: "./noise.png"
        }) || { setOptions: function() {} };

        function hexToRgb(h) {
            return [(h >> 16) & 255, (h >> 8) & 255, h & 255];
        }
        function rgbToHex(r, g, b) {
            return (Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b);
        }
        function lerp(a, b, t) {
            return a + (b - a) * t;
        }
        function lerpColor(c1, c2, t) {
            var a = hexToRgb(c1), b = hexToRgb(c2);
            return rgbToHex(lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t));
        }
        function smooth(t) {
            return t * t * (3 - 2 * t);
        }

        var CYCLE = 20000;

        var palette = [
            { t: 0.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x999187, bg: 0x0a0a14, moon: 1, sun: 0 },
            { t: 0.08, sky: 0x141428, cloud: 0x2a2822, light: 0x999187, bg: 0x1a1428, moon: 1, sun: 0 },
            { t: 0.18, sky: 0x3a2a28, cloud: 0x4a2e1c, light: 0xa85f1d, bg: 0x4a2820, moon: 0.3, sun: 0.3 },
            { t: 0.28, sky: 0x6a4030, cloud: 0x5a3a28, light: 0xd6824a, bg: 0x7a4530, moon: 0, sun: 0.8 },
            { t: 0.42, sky: 0x4a5060, cloud: 0x6d6a63, light: 0xe0d4be, bg: 0x506080, moon: 0, sun: 1 },
            { t: 0.66, sky: 0x3a4458, cloud: 0x6d6a63, light: 0xe6dfd1, bg: 0x445878, moon: 0, sun: 1 },
            { t: 0.68, sky: 0x5a4030, cloud: 0x4a3a28, light: 0xe0914f, bg: 0x6a4530, moon: 0, sun: 0.7 },
            { t: 0.78, sky: 0x3a2030, cloud: 0x3a2a2a, light: 0xa85f1d, bg: 0x4a2030, moon: 0.3, sun: 0.2 },
            { t: 0.92, sky: 0x1a1428, cloud: 0x2a2822, light: 0x999187, bg: 0x1a1428, moon: 0.9, sun: 0 },
            { t: 1.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x999187, bg: 0x0a0a14, moon: 1, sun: 0 }
        ];

        function getColor(t) {
            t = t % 1;
            for (var i = 0; i < palette.length - 1; i++) {
                if (t >= palette[i].t && t <= palette[i + 1].t) {
                    var span = palette[i + 1].t - palette[i].t;
                    var localT = span === 0 ? 0 : (t - palette[i].t) / span;
                    var s = smooth(localT);
                    return {
                        sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
                        cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
                        light: lerpColor(palette[i].light, palette[i + 1].light, s),
                        bg: lerpColor(palette[i].bg, palette[i + 1].bg, s),
                        moon: palette[i].moon + (palette[i + 1].moon - palette[i].moon) * s,
                        sun: palette[i].sun + (palette[i + 1].sun - palette[i].sun) * s
                    };
                }
            }
            return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light, bg: palette[0].bg, moon: 1, sun: 0 };
        }

        var startTime = Date.now();
        var clockEl = document.getElementById('clock');
        var moonEl = document.getElementById('moon');
        var sunEl = document.getElementById('sun');

        function formatTime(totalMinutes) {
            var hours = Math.floor(totalMinutes / 60) % 24;
            var minutes = Math.floor(totalMinutes % 60);
            var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
            return pad(hours) + ':' + pad(minutes);
        }

        function animate() {
            var elapsed = (Date.now() - startTime) % CYCLE;
            var t = elapsed / CYCLE;
            var c = getColor(t);
            effect.setOptions({
                skyColor: c.sky,
                cloudColor: c.cloud,
                lightColor: c.light,
                backgroundColor: c.bg
            });
            document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
            moonEl.style.opacity = c.moon;
            sunEl.style.opacity = c.sun;
            clockEl.textContent = formatTime(t * 1440);
            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>