animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Motion Table - Solid Rotation

model output

LLaMA 4 Scout

Motion Table - Solid Rotation

A 0.58T 0.24
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: #333;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .circle {
18            position: relative;
19            width: 200px;
20            height: 200px;
21            border-radius: 50%;
22            border: 1px solid white;
23        }
24        .lines {
25            position: absolute;
26            top: 50%;
27            left: 50%;
28            transform: translate(-50%, -50%);
29            width: 100%;
30            height: 100%;
31        }
32        .line {
33            position: absolute;
34            top: 50%;
35            left: 50%;
36            transform-origin: top center;
37            transform: rotate(0deg);
38            width: 2px;
39            height: 100%;
40            background-color: white;
41            animation: rotate 12s linear infinite;
42        }
43        @keyframes rotate {
44            0% {
45                transform: rotate(0deg);
46            }
47            100% {
48                transform: rotate(360deg);
49            }
50        }
51    </style>
52</head>
53<body>
54    <div class="circle">
55        <div class="lines">
56            <div class="line" style="transform: rotate(0deg);"></div>
57            <div class="line" style="transform: rotate(30deg);"></div>
58            <div class="line" style="transform: rotate(60deg);"></div>
59            <div class="line" style="transform: rotate(90deg);"></div>
60            <div class="line" style="transform: rotate(120deg);"></div>
61            <div class="line" style="transform: rotate(150deg);"></div>
62            <div class="line" style="transform: rotate(180deg);"></div>
63            <div class="line" style="transform: rotate(210deg);"></div>
64            <div class="line" style="transform: rotate(240deg);"></div>
65            <div class="line" style="transform: rotate(270deg);"></div>
66            <div class="line" style="transform: rotate(300deg);"></div>
67            <div class="line" style="transform: rotate(330deg);"></div>
68        </div>
69    </div>
70</body>
71</html>