model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.71T 0.23
1Looking at the animation frames, I can see:
2
31. A series of vertical bars arranged in a row
42. The bars animate through different height patterns - starting flat/small, growing taller on the left side (descending staircase), then arching up in the middle (dome shape), then descending on the right side, cycling continuously
53. The bars are gray colored on a light gray background
64. The animation creates a wave/oscillation effect through the bar heights
7
8<!DOCTYPE html>
9<html lang="en">
10<head>
11<meta charset="UTF-8">
12<meta name="viewport" content="width=device-width, initial-scale=1.0">
13<title>Bar Wave Animation</title>
14<style>
15  * { margin: 0; padding: 0; box-sizing: border-box; }
16  
17  body {
18    background-color: #ebebeb;
19    display: flex;
20    justify-content: center;
21    align-items: flex-start;
22    height: 100vh;
23    overflow: hidden;
24  }
25
26  .container {
27    position: relative;
28    display: flex;
29    align-items: flex-end;
30    gap: 2px;
31    margin-top: 80px;
32  }
33
34  .bar {
35    width: 7px;
36    background-color: #888;
37    border-radius: 1px 1px 0 0;
38  }
39</style>
40</head>
41<body>
42<div class="container" id="bars-container"></div>
43
44<script>
45  const container = document.getElementById('bars-container');
46  const numBars = 12;
47  const maxHeight = 30;
48  const minHeight = 1;
49  const bars = [];
50
51  for (let i = 0; i < numBars; i++) {
52    const bar = document.createElement('div');
53    bar.className = 'bar';
54    bar.style.height = minHeight + 'px';
55    container.appendChild(bar);
56    bars.push(bar);
57  }
58
59  // Animation: wave pattern cycling through bars
60  // Phase goes from 0 to 2*PI continuously
61  // At each phase, bar heights form a sine-based wave
62  // The wave appears to travel: left-high descending, then arch, then right-high ascending
63
64  let startTime = null;
65  const cycleDuration = 1200; // ms per full cycle
66
67  function getBarHeight(barIndex, phase) {
68    // Create a traveling wave effect
69    // The "peak" position moves from left to right and back
70    // Using a sine wave where the peak travels across bars
71    
72    const n = numBars;
73    // Normalized position 0..1
74    const pos = barIndex / (n - 1);
75    
76    // Wave: height based on sin of (position - phase)
77    // This creates a traveling wave
78    const waveVal = Math.sin(pos * Math.PI - phase);
79    
80    // Map waveVal (-1 to 1) to height
81    const height = minHeight + (maxHeight - minHeight) * Math.max(0, waveVal);
82    return height;
83  }
84
85  function animate(timestamp) {
86    if (!startTime) startTime = timestamp;
87    const elapsed = (timestamp - startTime) % cycleDuration;
88    // phase goes 0 to 2*PI over one cycle
89    const phase = (elapsed / cycleDuration) * 2 * Math.PI;
90
91    bars.forEach((bar, i) => {
92      const h = getBarHeight(i, phase);
93      bar.style.height = h + 'px';
94    });
95
96    requestAnimationFrame(animate);
97  }
98
99  requestAnimationFrame(animate);
100</script>
101</body>
102</html>