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.63T 0.23
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            padding: 0;
12            overflow: hidden;
13        }
14        .target {
15            position: absolute;
16            top: 50%;
17            left: 50%;
18            transform: translate(-50%, -50%);
19            width: 100px;
20            height: 100px;
21        }
22        .circle {
23            position: absolute;
24            top: 50%;
25            left: 50%;
26            transform: translate(-50%, -50%);
27            width: 100px;
28            height: 100px;
29            border-radius: 50%;
30            border: 2px solid #fff;
31        }
32        .dot {
33            position: absolute;
34            top: 50%;
35            left: 50%;
36            transform: translate(-50%, -50%);
37            width: 10px;
38            height: 10px;
39            background-color: #ccc;
40            border-radius: 50%;
41        }
42        .orbit {
43            position: absolute;
44            top: 50%;
45            left: 50%;
46            transform: translate(-50%, -50%);
47            width: 50px;
48            height: 50px;
49            border-radius: 50%;
50            border: 2px solid #fff;
51            animation: orbit 8s linear infinite;
52        }
53        @keyframes orbit {
54            0% {
55                transform: translate(-50%, -50%) rotate(0deg);
56            }
57            100% {
58                transform: translate(-50%, -50%) rotate(360deg);
59            }
60        }
61        .fade-in {
62            animation: fade-in 1s ease-out;
63        }
64        @keyframes fade-in {
65            0% {
66                opacity: 0;
67            }
68            100% {
69                opacity: 1;
70            }
71        }
72    </style>
73</head>
74<body>
75    <div class="target">
76        <div class="circle"></div>
77        <div class="dot" style="top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);"></div>
78        <div class="dot" style="top: 50%; left: 60%; transform: translate(-50%, -50%) rotate(90deg);"></div>
79        <div class="dot" style="top: 60%; left: 50%; transform: translate(-50%, -50%) rotate(180deg);"></div>
80        <div class="dot" style="top: 50%; left: 40%; transform: translate(-50%, -50%) rotate(270deg);"></div>
81        <div class="orbit" style="animation-delay: 0s;"></div>
82        <div class="orbit" style="animation-delay: 2s;"></div>
83        <div class="orbit" style="animation-delay: 4s;"></div>
84        <div class="orbit" style="animation-delay: 6s;"></div>
85    </div>
86    <script>
87        // JavaScript code here
88    </script>
89</body>
90</html>