animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loaders (WIP)

model output

Claude Sonnet 4.6

Loaders (WIP)

A 0.89T 0.24
compare with ground truth →
1Looking at the frames, I can see:
2
31. A red/coral background (#e8473f or similar)
42. A white square that transitions from semi-transparent/pink to fully white and back
53. A small white dot that orbits around the square
64. The dot appears to rotate around the square in a circular path
7
8The square stays roughly centered around (510, 97) area, and the dot orbits around it. The square's opacity cycles (starts semi-transparent, becomes fully white, then back). The dot orbits clockwise around the square.
9
10<!DOCTYPE html>
11<html>
12<head>
13<style>
14  * { margin: 0; padding: 0; box-sizing: border-box; }
15  body {
16    background: #e8473f;
17    width: 100vw;
18    height: 100vh;
19    overflow: hidden;
20  }
21  .scene {
22    position: absolute;
23    top: 50%;
24    left: 50%;
25    transform: translate(-50%, -50%) translateY(-150px);
26  }
27  .square {
28    width: 32px;
29    height: 32px;
30    background: white;
31    position: absolute;
32    top: 0;
33    left: 8px;
34    animation: squareOpacity 2s linear infinite;
35  }
36  .dot-orbit {
37    position: absolute;
38    top: 16px;
39    left: 24px;
40    width: 0;
41    height: 0;
42    animation: orbit 2s linear infinite;
43  }
44  .dot {
45    width: 7px;
46    height: 7px;
47    background: white;
48    border-radius: 50%;
49    position: absolute;
50    transform: translate(-50%, -50%) translateX(28px);
51  }
52
53  @keyframes orbit {
54    0%   { transform: rotate(-90deg); }
55    100% { transform: rotate(270deg); }
56  }
57
58  @keyframes squareOpacity {
59    0%   { opacity: 0.45; }
60    25%  { opacity: 0.55; }
61    50%  { opacity: 1; }
62    75%  { opacity: 0.55; }
63    100% { opacity: 0.45; }
64  }
65</style>
66</head>
67<body>
68  <div class="scene">
69    <div class="square"></div>
70    <div class="dot-orbit">
71      <div class="dot"></div>
72    </div>
73  </div>
74</body>
75</html>