model output
Claude Sonnet 4.6

CSS animated waves
A 0.78T 0.36
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Wave Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    width: 100vw;
12    height: 100vh;
13    overflow: hidden;
14    background: #add8f0;
15  }
16
17  .scene {
18    width: 100%;
19    height: 100%;
20    position: relative;
21    background: #add8f0;
22  }
23
24  canvas {
25    position: absolute;
26    top: 0;
27    left: 0;
28    width: 100%;
29    height: 100%;
30  }
31</style>
32</head>
33<body>
34<div class="scene">
35  <canvas id="waveCanvas"></canvas>
36</div>
37
38<script>
39  const canvas = document.getElementById('waveCanvas');
40  const ctx = canvas.getContext('2d');
41
42  function resize() {
43    canvas.width = window.innerWidth;
44    canvas.height = window.innerHeight;
45  }
46  resize();
47  window.addEventListener('resize', resize);
48
49  // Wave parameters
50  // The animation shows a single large wave moving left-to-right (or right-to-left)
51  // The wave is a smooth sinusoidal curve dividing sky (light blue) from water (deep blue gradient)
52  // Period appears to be about 3-4 seconds for one full cycle
53
54  let t = 0;
55  const duration = 3500; // ms for one full cycle
56  let startTime = null;
57
58  function drawFrame(timestamp) {
59    if (!startTime) startTime = timestamp;
60    t = ((timestamp - startTime) % duration) / duration; // 0 to 1
61
62    const W = canvas.width;
63    const H = canvas.height;
64
65    // Clear
66    ctx.clearRect(0, 0, W, H);
67
68    // Sky background
69    ctx.fillStyle = '#add8f0';
70    ctx.fillRect(0, 0, W, H);
71
72    // Wave shape
73    // The wave appears as a large sinusoidal bump traveling across the screen
74    // At t=0: flat line at ~60% height
75    // The wave crest moves from left to right
76    // Amplitude ~100px, base level ~55% of height
77
78    const baseY = H * 0.58;
79    const amplitude = H * 0.13;
80    // Phase shifts so the crest moves across the screen over time
81    // At t=0 the wave is flat (just starting), then a crest appears from left
82    // Looking at frames: starts flat, crest comes from left side, moves right, then flattens again
83    
84    ctx.beginPath();
85    ctx.moveTo(0, H);
86
87    // Draw wave top edge
88    const phase = t * Math.PI * 2;
89    
90    // Use a single sine wave that travels across
91    // The wave shape: y = baseY - amplitude * sin(x/W * PI - phase)
92    // This creates one half-wave across the width
93    
94    const steps = 200;
95    for (let i = 0; i <= steps; i++) {
96      const x = (i / steps) * W;
97      const xNorm = x / W; // 0 to 1
98      
99      // Single wave: one full sine period across 2x width, shifted by time
100      // Creates a traveling wave effect
101      const waveY = baseY - amplitude * Math.sin(xNorm * Math.PI * 2 - phase);
102      
103      if (i === 0) {
104        ctx.lineTo(x, waveY);
105      } else {
106        ctx.lineTo(x, waveY);
107      }
108    }
109
110    ctx.lineTo(W, H);
111    ctx.lineTo(0, H);
112    ctx.closePath();
113
114    // Water gradient
115    const grad = ctx.createLinearGradient(0, baseY - amplitude, 0, H);
116    grad.addColorStop(0, '#0080e0');
117    grad.addColorStop(0.4, '#0050c8');
118    grad.addColorStop(1, '#002090');
119
120    ctx.fillStyle = grad;
121    ctx.fill();
122
123    requestAnimationFrame(drawFrame);
124  }
125
126  requestAnimationFrame(drawFrame);
127</script>
128</body>
129</html>