← back to Nice spinny stuffcompare with ground truth →
model output
Claude Sonnet 4.6
Nice spinny stuff
A 0.94T 0.27
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>