animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Snow (Pure CSS)

model output

LLaMA 4 Scout

Snow (Pure CSS)

A 0.53T 0.35
compare with ground truth →
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>