model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.76T 0.23
1Looking at the animation frames, I can see:
2
31. A series of vertical bars/lines arranged in a pattern that cycles through different shapes
42. The pattern goes: flat/diagonal dashes → staircase ascending left → equal height bars → staircase descending right → repeat
53. The bars are dark gray on a light gray background
64. Located in the upper-center area of the screen
75. The animation loops continuously
8
9The bars form a "play button" / triangle shape that oscillates - going from flat dashes, to ascending stairs, to equal bars, to descending stairs (triangle pointing right), and back.
10
11<!DOCTYPE html>
12<html lang="en">
13<head>
14<meta charset="UTF-8">
15<meta name="viewport" content="width=device-width, initial-scale=1.0">
16<title>Bar Animation</title>
17<style>
18  * { margin: 0; padding: 0; box-sizing: border-box; }
19  
20  body {
21    background-color: #ebebeb;
22    width: 100vw;
23    height: 100vh;
24    display: flex;
25    align-items: flex-start;
26    justify-content: center;
27  }
28
29  .container {
30    position: relative;
31    display: flex;
32    align-items: flex-end;
33    gap: 2px;
34    margin-top: 65px;
35  }
36
37  .bar {
38    width: 4px;
39    background-color: #666;
40    border-radius: 1px;
41    animation: barAnim 1.2s ease-in-out infinite;
42  }
43</style>
44</head>
45<body>
46<div class="container" id="bars"></div>
47
48<script>
49  const container = document.getElementById('bars');
50  const numBars = 12;
51  const maxHeight = 40;
52  const minHeight = 3;
53
54  // Create bars
55  for (let i = 0; i < numBars; i++) {
56    const bar = document.createElement('div');
57    bar.className = 'bar';
58    bar.style.height = minHeight + 'px';
59    container.appendChild(bar);
60  }
61
62  const bars = document.querySelectorAll('.bar');
63
64  // Animation phases:
65  // Phase 0 (0.0s): all flat/tiny (dashes) - slight diagonal
66  // Phase 1 (0.3s): ascending staircase (left tall, right short)
67  // Phase 2 (0.6s): all equal height
68  // Phase 3 (0.9s): descending staircase (left short, right tall) = triangle pointing right
69  // Phase 4 (1.2s): back to flat
70
71  function getHeights(phase) {
72    const heights = [];
73    for (let i = 0; i < numBars; i++) {
74      let h;
75      const t = i / (numBars - 1); // 0 to 1
76      
77      if (phase === 0) {
78        // flat dashes with slight diagonal
79        h = minHeight + t * 4;
80      } else if (phase === 1) {
81        // ascending from left: left bars are tall, right bars short
82        // staircase going up left to right
83        h = minHeight + (1 - t) * (maxHeight - minHeight) * 0.5 + t * (maxHeight - minHeight) * 0.1;
84        // Actually frame 2 shows ascending left bars taller
85        h = minHeight + (t) * (maxHeight * 0.6 - minHeight);
86      } else if (phase === 2) {
87        // all equal
88        h = maxHeight * 0.7;
89      } else if (phase === 3) {
90        // triangle: left short, right tall (pointing right)
91        h = minHeight + t * (maxHeight - minHeight);
92      } else if (phase === 4) {
93        h = minHeight + t * 4;
94      }
95      heights.push(h);
96    }
97    return heights;
98  }
99
100  function lerp(a, b, t) {
101    return a + (b - a) * t;
102  }
103
104  function easeInOut(t) {
105    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
106  }
107
108  const phases = [0, 1, 2, 3, 0];
109  const phaseDuration = 300; // ms per phase
110  const totalDuration = phaseDuration * (phases.length - 1);
111
112  let startTime = null;
113
114  function animate(timestamp) {
115    if (!startTime) startTime = timestamp;
116    
117    const elapsed = (timestamp - startTime) % totalDuration;
118    const phaseIndex = Math.floor(elapsed / phaseDuration);
119    const phaseT = easeInOut((elapsed % phaseDuration) / phaseDuration);
120    
121    const fromPhase = phases[phaseIndex];
122    const toPhase = phases[Math.min(phaseIndex + 1, phases.length - 1)];
123    
124    const fromHeights = getHeights(fromPhase);
125    const toHeights = getHeights(toPhase);
126    
127    bars.forEach((bar, i) => {
128      const h = lerp(fromHeights[i], toHeights[i], phaseT);
129      bar.style.height = h + 'px';
130      
131      // Color: darker for taller bars
132      const normalizedH = (h - minHeight) / (maxHeight - minHeight);
133      const gray = Math.round(150 - normalizedH * 80);
134      bar.style.backgroundColor = `rgb(${gray},${gray},${gray})`;
135    });
136    
137    requestAnimationFrame(animate);
138  }
139
140  requestAnimationFrame(animate);
141</script>
142</body>
143</html>