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

model output

LLaMA 4 Scout

Motion Table - Orbit

A 0.60T 0.12
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            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .target {
18            position: relative;
19            width: 100px;
20            height: 100px;
21        }
22        .target::before {
23            content: "";
24            position: absolute;
25            top: 50%;
26            left: 50%;
27            transform: translate(-50%, -50%);
28            width: 20px;
29            height: 20px;
30            background-color: #fff;
31            border-radius: 50%;
32        }
33        .target .circle {
34            position: absolute;
35            top: 50%;
36            left: 50%;
37            transform: translate(-50%, -50%);
38            width: 80px;
39            height: 80px;
40            border: 1px solid #fff;
41            border-radius: 50%;
42        }
43        .target .dot {
44            position: absolute;
45            top: 50%;
46            left: 50%;
47            transform: translate(-50%, -50%);
48            width: 10px;
49            height: 10px;
50            background-color: red;
51            border-radius: 50%;
52        }
53        .target .dot:nth-child(1) {
54            transform: translate(-50%, -50%) rotate(0deg) translateX(40px);
55        }
56        .target .dot:nth-child(2) {
57            transform: translate(-50%, -50%) rotate(90deg) translateX(40px);
58        }
59        .target .dot:nth-child(3) {
60            transform: translate(-50%, -50%) rotate(180deg) translateX(40px);
61        }
62        .target .dot:nth-child(4) {
63            transform: translate(-50%, -50%) rotate(270deg) translateX(40px);
64        }
65    </style>
66</head>
67<body>
68    <div class="target">
69        <div class="circle"></div>
70        <div class="dot"></div>
71        <div class="dot"></div>
72        <div class="dot"></div>
73        <div class="dot"></div>
74    </div>
75    <script>
76        // Animation logic can be added here if needed
77    </script>
78</body>
79</html>