model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.78T 0.21
1Looking at the animation frames, I can see:
2
31. A dashed line that starts horizontal at the top center of the screen
42. It then animates - rotating/curving, with the line appearing to oscillate between a curved arc shape and a more horizontal position
53. The dashes are small, dark colored on a light gray background
64. The motion appears to be a pendulum-like swinging of the dashed line
7
8Let me analyze more carefully:
9- Frame 1: Horizontal dashed line at ~(480-540, 50)
10- Frame 2: Line curves upward on right side, like an arc
11- Frame 3: Line is more diagonal/flat going right
12- Frame 4: Back to arc shape
13- Frame 5: Flat/diagonal again
14- Frame 6: Arc shape again
15
16This looks like a dashed line rotating/oscillating around its left endpoint, swinging between horizontal and an upward arc position.
17
18<!DOCTYPE html>
19<html>
20<head>
21<style>
22  body {
23    margin: 0;
24    background: #ebebeb;
25    overflow: hidden;
26  }
27  canvas {
28    display: block;
29  }
30</style>
31</head>
32<body>
33<canvas id="c"></canvas>
34<script>
35const canvas = document.getElementById('c');
36const ctx = canvas.getContext('2d');
37canvas.width = window.innerWidth;
38canvas.height = window.innerHeight;
39
40const cx = canvas.width / 2;
41const cy = 52;
42const lineLen = 60;
43const numDashes = 11;
44
45let startTime = null;
46const period = 1200; // ms for full oscillation
47
48function easeInOut(t) {
49  return 0.5 - 0.5 * Math.cos(Math.PI * t);
50}
51
52function drawDashedArc(angle) {
53  // Draw dashes along an arc
54  // The line pivots around its left end
55  // angle=0: horizontal, angle=-30deg: curves up on right
56  
57  ctx.clearRect(0, 0, canvas.width, canvas.height);
58  
59  const pivotX = cx - lineLen / 2;
60  const pivotY = cy;
61  
62  // Draw dashes
63  const dashLen = 4;
64  const gap = 2;
65  const step = dashLen + gap;
66  
67  ctx.strokeStyle = '#333';
68  ctx.lineWidth = 1.5;
69  ctx.lineCap = 'round';
70  
71  // Use a curved path - the line bends with a slight arc
72  // angle controls the rotation of the whole line
73  // Also add a curve: the midpoint dips/rises
74  
75  const totalLen = lineLen;
76  const bendAngle = angle; // radians, rotation of line
77  
78  // Draw as rotated dashed line from pivot
79  ctx.save();
80  ctx.translate(pivotX, pivotY);
81  ctx.rotate(bendAngle);
82  
83  let x = 0;
84  while (x < totalLen) {
85    const endX = Math.min(x + dashLen, totalLen);
86    ctx.beginPath();
87    ctx.moveTo(x, 0);
88    ctx.lineTo(endX, 0);
89    ctx.stroke();
90    x += step;
91  }
92  
93  ctx.restore();
94}
95
96function animate(ts) {
97  if (!startTime) startTime = ts;
98  const elapsed = (ts - startTime) % period;
99  const t = elapsed / period;
100  
101  // Oscillate: 0 -> horizontal, 0.5 -> angled up
102  const phase = Math.sin(2 * Math.PI * t);
103  // angle: 0 = horizontal, negative = tilted up on right
104  const maxAngle = -Math.PI / 6; // 30 degrees up
105  const angle = maxAngle * phase;
106  
107  drawDashedArc(angle);
108  requestAnimationFrame(animate);
109}
110
111requestAnimationFrame(animate);
112
113window.addEventListener('resize', () => {
114  canvas.width = window.innerWidth;
115  canvas.height = window.innerHeight;
116});
117</script>
118</body>
119</html>