model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.88T 0.24
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5  * { margin: 0; padding: 0; box-sizing: border-box; }
6  body { background: #ebebeb; display: flex; justify-content: center; align-items: center; height: 100vh; }
7  
8  .bars {
9    display: flex;
10    align-items: flex-end;
11    gap: 2px;
12    height: 40px;
13  }
14  
15  .bar {
16    width: 5px;
17    background: #666;
18    border-radius: 1px;
19    animation: barAnim 1.2s ease-in-out infinite;
20  }
21</style>
22</head>
23<body>
24<div class="bars" id="bars"></div>
25
26<script>
27  const container = document.getElementById('bars');
28  const numBars = 10;
29  const maxH = 36;
30  
31  // Pattern A: ascending (left=short, right=tall)
32  // Pattern B: valley (tall-short-tall)
33  // Pattern C: descending (left=tall, right=short)
34  
35  // Heights for each pattern (10 bars)
36  const patternA = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40]; // ascending
37  const patternB = [36, 28, 16, 8,  4,  4,  8,  16, 28, 36]; // valley
38  const patternC = [40, 36, 32, 28, 24, 20, 16, 12, 8,  4];  // descending
39
40  const bars = [];
41  for (let i = 0; i < numBars; i++) {
42    const bar = document.createElement('div');
43    bar.className = 'bar';
44    bar.style.height = patternA[i] + 'px';
45    container.appendChild(bar);
46    bars.push(bar);
47  }
48
49  const patterns = [patternA, patternB, patternC, patternA];
50  let step = 0;
51
52  function animateTo(targetPattern, duration) {
53    const startHeights = bars.map(b => parseFloat(b.style.height));
54    const startTime = performance.now();
55
56    function easeInOut(t) {
57      return t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
58    }
59
60    function frame(now) {
61      const elapsed = now - startTime;
62      const t = Math.min(elapsed / duration, 1);
63      const e = easeInOut(t);
64
65      bars.forEach((bar, i) => {
66        const h = startHeights[i] + (targetPattern[i] - startHeights[i]) * e;
67        bar.style.height = h + 'px';
68      });
69
70      if (t < 1) {
71        requestAnimationFrame(frame);
72      } else {
73        step = (step + 1) % patterns.length;
74        setTimeout(() => animateTo(patterns[step], 400), 100);
75      }
76    }
77    requestAnimationFrame(frame);
78  }
79
80  // Start cycling
81  step = 1;
82  setTimeout(() => animateTo(patterns[step], 400), 600);
83</script>
84</body>
85</html>