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.66T 0.26
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: #FFC080;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .square {
18            position: relative;
19            width: 20px;
20            height: 20px;
21        }
22    </style>
23</head>
24<body>
25    <div class="square" id="square"></div>
26
27    <script>
28        let square = document.getElementById('square');
29        square.style.background = '#800080';
30
31        setTimeout(() => {
32            square.style.background = '#FFFFFF';
33            square.style.transform = 'scale(0.5)';
34        }, 1000);
35
36        setTimeout(() => {
37            square.style.background = '#800080';
38            square.style.transform = 'scale(1)';
39            square.style.width = '20px';
40            square.style.height = '20px';
41        }, 1500);
42
43        setTimeout(() => {
44            square.style.background = '#FFFFFF';
45            square.style.transform = 'scale(0.5)';
46        }, 2000);
47
48        setTimeout(() => {
49            square.style.background = '#FFC080';
50        }, 2500);
51    </script>
52</body>
53</html>