animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Nice spinny stuff

model output

LLaMA 4 Scout

Nice spinny stuff

A 0.48T 0.13
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>Animation</title>
7    <style>
8        .dot-container {
9            position: relative;
10            width: 100vw;
11            height: 100vh;
12            background-color: #fff;
13        }
14        .dot {
15            position: absolute;
16            border-radius: 50%;
17            background-color: #FFC5C5; /* Light pink color */
18        }
19        /* Define animations */
20        @keyframes fadeIn {
21            0% {
22                opacity: 0;
23                transform: scale(0.5);
24            }
25            100% {
26                opacity: 1;
27                transform: scale(1);
28            }
29        }
30        @keyframes moveOut {
31            0% {
32                transform: translate(0, 0);
33            }
34            100% {
35                transform: translate(50px, 0);
36            }
37        }
38    </style>
39</head>
40<body>
41    <div class="dot-container">
42        <!-- JavaScript will generate dots here -->
43    </div>
44
45    <script>
46        // Create dots
47        const container = document.querySelector('.dot-container');
48        for (let i = 0; i < 10; i++) {
49            const dot = document.createElement('div');
50            dot.classList.add('dot');
51            dot.style.top = `${Math.random() * 100}%`;
52            dot.style.left = `${Math.random() * 100}%`;
53            dot.style.width = `${Math.random() * 10 + 5}px`;
54            dot.style.height = dot.style.width;
55            dot.style.animation = 'fadeIn 2s';
56            container.appendChild(dot);
57
58            // Animate dots
59            setTimeout(() => {
60                dot.style.animation = 'moveOut 2s';
61                setTimeout(() => {
62                    dot.remove();
63                }, 2000);
64            }, i * 200);
65        }
66    </script>
67</body>
68</html>