← back to Snow (Pure CSS)compare with ground truth →
model output
LLaMA 4 Scout
Snow (Pure CSS)
A 0.53T 0.35
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Starfield Animation</title>
7 <style>
8 body {
9 background-color: #03055B;
10 overflow: hidden;
11 margin: 0;
12 padding: 0;
13 }
14 .star {
15 position: absolute;
16 background-color: #fff;
17 border-radius: 50%;
18 }
19 </style>
20</head>
21<body>
22 <script>
23 const starCount = 200;
24 const stars = [];
25
26 for (let i = 0; i < starCount; i++) {
27 const star = document.createElement('div');
28 star.className = 'star';
29 star.style.left = `${Math.random() * 100}%`;
30 star.style.top = `${Math.random() * 100}%`;
31 star.style.width = `${Math.random() * 2 + 1}px`;
32 star.style.height = star.style.width;
33 document.body.appendChild(star);
34 stars.push(star);
35 }
36
37 function animate() {
38 stars.forEach((star, index) => {
39 const size = parseFloat(star.style.width);
40 const left = parseFloat(star.style.left);
41 const top = parseFloat(star.style.top);
42
43 // Simple animation: move the star slightly over time
44 star.style.top = `${top + 0.1}px`;
45 if (top > 100) {
46 star.style.top = '0px';
47 star.style.left = `${Math.random() * 100}%`;
48 }
49 });
50 requestAnimationFrame(animate);
51 }
52 animate();
53 </script>
54</body>
55</html>