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

model output

LLaMA 4 Scout

Loaders (WIP)

A 0.72T 0.19
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        body {
9            background-color: #ff0000;
10            margin: 0;
11            padding: 0;
12            overflow: hidden;
13        }
14        .square {
15            position: absolute;
16            top: 50%;
17            left: 50%;
18            transform: translate(-50%, -50%);
19            width: 20px;
20            height: 20px;
21            background-color: rgba(255, 255, 255, 0.5);
22            animation: move-square 5s infinite;
23        }
24        .dot {
25            position: absolute;
26            top: 50%;
27            left: 50%;
28            transform: translate(-50%, -50%);
29            width: 5px;
30            height: 5px;
31            background-color: #ffffff;
32            border-radius: 50%;
33            animation: move-dot 5s infinite;
34        }
35        @keyframes move-square {
36            0% {
37                transform: translate(-50%, -50%) translateX(0);
38            }
39            50% {
40                transform: translate(-50%, -50%) translateX(50px);
41            }
42            100% {
43                transform: translate(-50%, -50%) translateX(0);
44            }
45        }
46        @keyframes move-dot {
47            0% {
48                transform: translate(-50%, -50%) translateX(50px);
49            }
50            50% {
51                transform: translate(-50%, -50%) translateX(0);
52            }
53            100% {
54                transform: translate(-50%, -50%) translateX(50px);
55            }
56        }
57    </style>
58</head>
59<body>
60    <div class="square"></div>
61    <div class="dot"></div>
62</body>
63</html>