animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Such Spinners, Much Loading

model output

LLaMA 4 Scout

Such Spinners, Much Loading

A 0.76T 0.17
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>Dot Animation</title>
7    <style>
8        body {
9            margin: 0;
10            background-color: #fff;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .dot {
18            position: absolute;
19            width: 10px;
20            height: 10px;
21            border-radius: 50%;
22            background-color: #808080;
23            transform: scale(0);
24            animation: appear 1s ease-out;
25        }
26        @keyframes appear {
27            0% {
28                transform: scale(0);
29            }
30            100% {
31                transform: scale(1);
32            }
33        }
34        .animate {
35            animation: pulse 2s infinite ease-in-out;
36        }
37        @keyframes pulse {
38            0%, 100% {
39                transform: scale(1);
40            }
41            50% {
42                transform: scale(1.2);
43            }
44        }
45    </style>
46</head>
47<body>
48    <div class="dot" id="dot"></div>
49    <script>
50        const dot = document.getElementById('dot');
51        dot.classList.add('animate');
52    </script>
53</body>
54</html>