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

model output

Claude Sonnet 4.6

Nice spinny stuff

A 0.96T 0.35
compare with ground truth →
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5  * { margin: 0; padding: 0; box-sizing: border-box; }
6  body { background: white; width: 100vw; height: 100vh; }
7  
8  .container {
9    position: absolute;
10    left: 155px;
11    top: 155px;
12    width: 0;
13    height: 0;
14  }
15
16  .dot {
17    position: absolute;
18    border-radius: 50%;
19    background: #ffb3c1;
20    transform-origin: center center;
21  }
22
23  @keyframes orbit {
24    from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
25    to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
26  }
27
28  @keyframes pulse-large {
29    0%, 100% { width: 10px; height: 10px; margin: -5px; }
30    50%       { width: 4px;  height: 4px;  margin: -2px; }
31  }
32
33  @keyframes pulse-small {
34    0%, 100% { width: 4px;  height: 4px;  margin: -2px; }
35    50%       { width: 10px; height: 10px; margin: -5px; }
36  }
37</style>
38</head>
39<body>
40<div class="container" id="c"></div>
41
42<script>
43  const container = document.getElementById('c');
44  const count = 8;
45  const radius = 40;
46  const duration = 2000; // ms per full rotation
47  const pulseDuration = 1000;
48
49  for (let i = 0; i < count; i++) {
50    const dot = document.createElement('div');
51    dot.className = 'dot';
52    
53    const angle = (i / count) * 360;
54    const isLarge = i % 2 === 0;
55    const size = isLarge ? 10 : 4;
56    
57    dot.style.width = size + 'px';
58    dot.style.height = size + 'px';
59    dot.style.margin = (-size/2) + 'px';
60    
61    // Orbit animation
62    dot.style.animation = `
63      orbit ${duration}ms linear infinite,
64      ${isLarge ? 'pulse-large' : 'pulse-small'} ${pulseDuration}ms ease-in-out infinite
65    `;
66    dot.style.animationDelay = `${(i / count) * -duration}ms, ${(i / count) * -pulseDuration}ms`;
67    
68    container.appendChild(dot);
69  }
70</script>
71</body>
72</html>