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.59T 0.29
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: #964B00;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .square {
18            width: 50px;
19            height: 50px;
20            background-color: #C6F4D6;
21            position: relative;
22        }
23        @keyframes scale {
24            0% {
25                transform: scale(1);
26            }
27            50% {
28                transform: scale(1.2);
29            }
30            100% {
31                transform: scale(1);
32            }
33        }
34        .animate {
35            animation: scale 2s infinite;
36        }
37    </style>
38</head>
39<body>
40    <div class="square animate"></div>
41</body>
42</html>