animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Exploring Bourbon

model output

LLaMA 4 Scout

Exploring Bourbon

A 0.46T 0.20
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>Loading Animation</title>
7    <style>
8        body {
9            background-color: #f0f0f0;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            position: relative;
18        }
19        .dot {
20            position: absolute;
21            width: 10px;
22            height: 10px;
23            border-radius: 50%;
24            background-color: white;
25            opacity: 0.5;
26        }
27        .dot:nth-child(1) {
28            animation: move 2s infinite;
29        }
30        .dot:nth-child(2) {
31            animation: move 2s 0.67s infinite;
32        }
33        .dot:nth-child(3) {
34            animation: move 2s 1.33s infinite;
35        }
36        @keyframes move {
37            0% {
38                transform: translateX(0);
39            }
40            50% {
41                transform: translateX(20px);
42            }
43            100% {
44                transform: translateX(0);
45            }
46        }
47    </style>
48</head>
49<body>
50    <div class="loader">
51        <div class="dot"></div>
52        <div class="dot"></div>
53        <div class="dot"></div>
54    </div>
55</body>
56</html>