templates: snow effet on loading screen

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

@@ -184,5 +184,91 @@
         check()
       }
     </script>
+    <script>
+      // Create canvas
+      const $canvas = document.createElement('canvas')
+      $canvas.classList.add('fixed', 'inset-0', '-z-10', 'pointer-events-none', 'opacity-0', 'transition-opacity', 'duration-[2s]', 'ease-in', 'blur-[4px]')
+      document.body.appendChild($canvas)
+      $canvas.classList.remove('opacity-0')
+
+      // 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>