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.94T 0.27
compare with ground truth →
1Looking at the animation, I can see a series of pink dots arranged in an arc/wave pattern. The dots appear to move in a wave-like bouncing motion - the "peak" of the arc shifts from right to left and back, creating a rolling wave effect. The dots vary in size (larger at the peak, smaller at the ends), and the whole pattern loops continuously.
2
3The dots are positioned in the upper-left area of the screen, forming a semicircular arc shape that oscillates.
4
5<!DOCTYPE html>
6<html lang="en">
7<head>
8<meta charset="UTF-8">
9<meta name="viewport" content="width=device-width, initial-scale=1.0">
10<title>Pink Dots Wave</title>
11<style>
12  * { margin: 0; padding: 0; box-sizing: border-box; }
13  body { background: white; width: 100vw; height: 100vh; overflow: hidden; }
14  canvas { display: block; }
15</style>
16</head>
17<body>
18<canvas id="c"></canvas>
19<script>
20const canvas = document.getElementById('c');
21const ctx = canvas.getContext('2d');
22canvas.width = window.innerWidth;
23canvas.height = window.innerHeight;
24
25const NUM_DOTS = 11;
26const COLOR = 'rgba(255, 182, 193, 0.85)';
27
28// The dots form an arc. The "peak" (highest point) oscillates left-right.
29// Center of the arc group is around x=150, y=160 (upper left area)
30
31const arcCenterX = 150;
32const arcBaseY = 175;
33const arcWidth = 160;  // total width of the arc
34const arcHeight = 45;  // height of the arc peak above baseline
35
36// Dot sizes: larger at peak, smaller at ends
37// The peak position oscillates
38
39let startTime = null;
40const PERIOD = 1200; // ms for one full cycle
41
42function getPositions(t) {
43  // phase goes 0 -> 2PI over PERIOD
44  const phase = (t % PERIOD) / PERIOD * Math.PI * 2;
45  
46  // The peak shifts: peakOffset oscillates between -0.5 and 0.5 (normalized position along arc)
47  // From frames: peak moves right then left, cycling
48  const peakNorm = Math.sin(phase) * 0.5 + 0.5; // 0 to 1, peak position along arc
49  
50  const dots = [];
51  for (let i = 0; i < NUM_DOTS; i++) {
52    const norm = i / (NUM_DOTS - 1); // 0 to 1
53    
54    // x position along arc
55    const x = arcCenterX - arcWidth/2 + norm * arcWidth;
56    
57    // y: parabolic arc, peak at peakNorm position
58    const distFromPeak = norm - peakNorm;
59    const arcY = arcBaseY - arcHeight * Math.exp(-distFromPeak * distFromPeak * 8);
60    
61    // Size: larger near peak
62    const distFromPeakAbs = Math.abs(distFromPeak);
63    const size = 2 + 5 * Math.exp(-distFromPeakAbs * distFromPeakAbs * 12);
64    
65    dots.push({ x, y: arcY, r: size });
66  }
67  return dots;
68}
69
70function draw(timestamp) {
71  if (!startTime) startTime = timestamp;
72  const t = timestamp - startTime;
73  
74  ctx.clearRect(0, 0, canvas.width, canvas.height);
75  
76  const dots = getPositions(t);
77  
78  dots.forEach(dot => {
79    ctx.beginPath();
80    ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
81    ctx.fillStyle = COLOR;
82    ctx.fill();
83  });
84  
85  requestAnimationFrame(draw);
86}
87
88requestAnimationFrame(draw);
89</script>
90</body>
91</html>