feat(schema): add snow effect on loading screen in winter (#29871)

packages/ui-templates/templates/loading/index.html

@@ -184,5 +184,110 @@
         check()
       }
     </script>
+    <script>
+      function whatHemisphere () {
+        let y = new Date()
+        if (y.getTimezoneOffset == undefined) return null
+        y = y.getFullYear()
+        let jan = -(new Date(y, 0, 1, 0, 0, 0, 0).getTimezoneOffset())
+        let jul = -(new Date(y, 6, 1, 0, 0, 0, 0).getTimezoneOffset())
+        let diff = jan - jul
+        if (diff < 0) return 'N'
+        if (diff > 0) return 'S'
+        return null
+      }
+      // Only run in November, December, and January (N hemisphere) or May, June, and July (S hemisphere)
+      const months = {
+        N: [10, 11, 0],
+        S: [4, 5, 6]
+      }
+      const hemisphere = whatHemisphere()
+      if (hemisphere && months[hemisphere].includes(new Date().getMonth())) {
+        // Create canvas
+        const $canvas = document.createElement('canvas')
+        $canvas.style = 'position: fixed; inset: 0; z-index: -10; pointer-events: none; opacity: 0; transition: opacity 2s ease-in; filter: blur(4px);'
+        document.body.appendChild($canvas)
+        $canvas.style.opacity = 1
+
+        // Animation options
+        const density = 0.00025
+        const wind = { current: 0, maxCurrent: 4, force: 0.1, target: 0.1, min: 0.1, max: 0.4, easing: 0.01 }
+        const gravity = 1.25
+
+        // Auto resize canvas
+        let recreateParticles = false
+        function resize() {
+          $canvas.width = window.innerWidth
+          $canvas.height = window.innerHeight
+          recreateParticles = true
+        }
+        window.addEventListener('resize', resize)
+        resize()
+
+        function mod(a, b) {
+          return ((a % b) + b) % b
+        }
+
+        // Draw animation
+        let particles = []
+        let lastCall = Date.now()
+        const ctx = $canvas.getContext('2d')
+        function draw() {
+          ctx.clearRect(0, 0, $canvas.width, $canvas.height)
+
+          if (!enableAnimation) {
+            // Stop animation when disabled
+            return requestAnimationFrame(draw)
+          }
+
+          // Recreate particles on resize
+          if (recreateParticles) {
+            particles = Array.from({ length: Math.floor($canvas.width * $canvas.height * density) }, () => {
+              return {
+                x: Math.random() * $canvas.width,
+                y: Math.random() * $canvas.height,
+                vx: 1 + Math.random(),
+                vy: 1 + Math.random(),
+                vsin: Math.random() * 10,
+                rangle: Math.random() * 2 * Math.PI,
+                rsin: Math.random() * 10,
+                color: `rgba(255, 255, 255, ${0.1 + Math.random() * 0.15})`,
+                size: 5 * Math.random() * 4 * ($canvas.height / 1000 )
+              }
+            })
+            recreateParticles = false
+          }
+
+          const now = Date.now()
+          const delta = now - lastCall
+          lastCall = now
+
+          // Update wind
+          wind.force += ( wind.target - wind.force ) * wind.easing
+          wind.current += wind.force * (delta * 0.05)
+          wind.current = Math.max(-wind.maxCurrent, Math.min(wind.current, wind.maxCurrent))
+          if ( Math.random() > 0.995 ) {
+            wind.target = ( wind.min + Math.random() * ( wind.max - wind.min ) ) * ( Math.random() > 0.5 ? -1 : 1 )
+          }
+
+          // Update particles
+          const uTime = delta * 0.2
+          particles.forEach(p => {
+            p.x = mod(p.x + uTime + wind.current * p.vx, $canvas.width)
+            p.y = mod(p.y + uTime * p.vy * gravity, $canvas.height)
+            p.x += Math.sin(uTime * p.vsin) * p.rsin * 0.5
+            p.rangle += uTime * 0.01
+
+            ctx.fillStyle = p.color
+            ctx.beginPath()
+            ctx.ellipse(p.x, p.y, p.size, p.size * 0.66, p.rangle, 0, Math.PI * 2)
+            ctx.fill()
+          })
+          requestAnimationFrame(draw)
+        }
+
+        draw()
+      }
+    </script>
   </body>
 </html>