scroll driven day to night animation

by artclick

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day to Night — Scroll Scene</title>
    
</head>
<body>
    <div class="scroll-spacer">
        <div class="scene">
            <div class="sky"></div>

            <div class="stars">
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
                <div class="star"></div>
            </div>

            <div class="sun"></div>
            <div class="moon"></div>

            <div class="clouds">
                <div class="cloud cloud1"></div>
                <div class="cloud cloud2"></div>
                <div class="cloud cloud3"></div>
            </div>

            <div class="mountains-back"></div>
            <div class="mountains-front"></div>

            <div class="tree tree1">
                <div class="tree-leaves"></div>
                <div class="tree-trunk"></div>
            </div>
            <div class="tree tree2">
                <div class="tree-leaves"></div>
                <div class="tree-trunk"></div>
            </div>
            <div class="tree tree3">
                <div class="tree-leaves"></div>
                <div class="tree-trunk"></div>
            </div>
            <div class="tree tree4">
                <div class="tree-leaves"></div>
                <div class="tree-trunk"></div>
            </div>

            <div class="ground"></div>

            <div class="scene-title">
                <h1>Day to...

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: #0f0f0f;
            color: white;
        }

        .scroll-spacer {
            height: 400vh;
            position: relative;
        }

        .scene {
            position: sticky;
            top: 0;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        /* Sky */
        .sky {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
            animation: skyChange linear;
            animation-timeline: scroll(root);
        }

        @keyframes skyChange {
            0% { background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%); }
            30% { background: linear-gradient(180deg, #fa709a 0%, #fee140 100%); }
            50% { background: linear-gradient(180deg, #ff6b6b 0%, #ffa502 50%, #2c3e50 100%); }
            70% { background: linear-gradient(180deg, #2c3e50 0%, #4a148c 60%, #0f0f23 100%); }
            100% { background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3e 50%, #0f0f23 100%); }
        }

        /* Sun */
        .sun {
            position: absolute;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, #ffd700 30%, #ffa500 70%, transparent 100%);
            border-radius: 50%;
            z-index: 2;
            left: 50%;
            top: 20%;
            transform: translateX(-50%);
            box-shadow: 0 0 60px rgba(255, 215, 0, 0.6), 0 0 120px rgba(255, 165, 0, 0.3);
            animation: sunMove linear;
            animation-timeline: scroll(root);
        }

        @keyframes sunMove {
            0% { top:...