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.80T 0.10
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        .circle {
18            position: relative;
19        }
20        .orbit {
21            position: absolute;
22            top: 50%;
23            left: 50%;
24            transform: translate(-50%, -50%);
25            width: 100px;
26            height: 100px;
27            border-radius: 50%;
28            border: 1px solid #fff;
29        }
30        .dot {
31            position: absolute;
32            top: 50%;
33            left: 50%;
34            transform: translate(-50%, -50%);
35            width: 10px;
36            height: 10px;
37            border-radius: 50%;
38            background-color: #fff;
39        }
40    </style>
41</head>
42<body>
43    <div class="circle">
44        <div class="orbit"></div>
45        <div class="dot"></div>
46    </div>
47
48    <script>
49        const dot = document.querySelector('.dot');
50        const orbit = document.querySelector('.orbit');
51        let angle = 0;
52
53        function animate() {
54            angle += 1;
55            if (angle > 360) angle = 0;
56            const x = 50 + Math.cos(angle * Math.PI / 180) * 45;
57            const y = 50 + Math.sin(angle * Math.PI / 180) * 45;
58            dot.style.top = `${y}%`;
59            dot.style.left = `${x}%`;
60        }
61
62        setInterval(animate, 16); // 60fps
63    </script>
64</body>
65</html>