animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

LLaMA 4 Scout

Animated Concepts #3

A 0.69T 0.25
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: #000;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .line {
18            position: absolute;
19            width: 20px;
20            height: 2px;
21            background-color: #ff0000;
22            transform-origin: center;
23        }
24    </style>
25</head>
26<body>
27    <div class="line" id="line"></div>
28    <script>
29        let line = document.getElementById('line');
30        let angle = 0;
31        function animate() {
32            line.style.transform = `translate(0, 0) rotate(${angle}deg)`;
33            angle += 1;
34            if (angle < 360) {
35                requestAnimationFrame(animate);
36            }
37        }
38        animate();
39    </script>
40</body>
41</html>