animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Nice spinny stuff

model output

GPT-5.4

Nice spinny stuff

A 0.91T 0.33
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" />
6<title>Pink Dot Spinner</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #fff;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #fff;
21  }
22
23  /* Positioned to match the upper-left placement in the frames */
24  .spinner {
25    position: absolute;
26    left: 110px;
27    top: 110px;
28    width: 110px;
29    height: 110px;
30    transform-origin: 50% 50%;
31    animation: spin 1.15s linear infinite;
32  }
33
34  .dot {
35    position: absolute;
36    left: 50%;
37    top: 50%;
38    border-radius: 50%;
39    background: #ffc0cb;
40    transform-origin: 0 0;
41    opacity: 0.9;
42    filter: blur(0.15px);
43  }
44
45  @keyframes spin {
46    from { transform: rotate(0deg); }
47    to   { transform: rotate(360deg); }
48  }
49</style>
50</head>
51<body>
52<div class="stage">
53  <div class="spinner" id="spinner"></div>
54</div>
55
56<script>
57  const spinner = document.getElementById('spinner');
58
59  // 8 dots arranged on a partial ring, with varying sizes to mimic the frames.
60  const count = 8;
61  const radius = 28;
62  const startDeg = -150;
63  const stepDeg = 34;
64
65  // Sizes chosen to resemble the alternating larger/smaller pink circles.
66  const sizes = [8, 10, 13, 18, 15, 11, 8, 6];
67
68  for (let i = 0; i < count; i++) {
69    const dot = document.createElement('div');
70    dot.className = 'dot';
71
72    const angle = (startDeg + i * stepDeg) * Math.PI / 180;
73    const x = Math.cos(angle) * radius;
74    const y = Math.sin(angle) * radius;
75    const s = sizes[i];
76
77    dot.style.width = s + 'px';
78    dot.style.height = s + 'px';
79    dot.style.transform = `translate(${x}px, ${y}px) translate(${-s/2}px, ${-s/2}px)`;
80    spinner.appendChild(dot);
81  }
82</script>
83</body>
84</html>