model output
Claude Sonnet 4.6

Only CSS: Milk
A 0.84T 0.33
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  body { background: white; overflow: hidden; width: 100vw; height: 100vh; }
10  canvas { display: block; }
11</style>
12</head>
13<body>
14<canvas id="c"></canvas>
15<script>
16const canvas = document.getElementById('c');
17const ctx = canvas.getContext('2d');
18
19canvas.width = window.innerWidth;
20canvas.height = window.innerHeight;
21
22const W = canvas.width;
23const H = canvas.height;
24
25// Wave parameters - the wave sits around 40% from top
26// Multiple sine waves combined for organic look
27let t = 0;
28
29function getY(x, time) {
30  const baseY = H * 0.42;
31  // Multiple wave components
32  const w1 = Math.sin(x / W * Math.PI * 2 - time * 0.8) * 35;
33  const w2 = Math.sin(x / W * Math.PI * 3.5 - time * 1.1) * 20;
34  const w3 = Math.sin(x / W * Math.PI * 1.2 - time * 0.5) * 25;
35  const w4 = Math.sin(x / W * Math.PI * 5 - time * 1.4) * 8;
36  return baseY + w1 + w2 + w3 + w4;
37}
38
39function draw() {
40  ctx.clearRect(0, 0, W, H);
41
42  // White background
43  ctx.fillStyle = 'white';
44  ctx.fillRect(0, 0, W, H);
45
46  // Draw black region (top) with wave boundary
47  ctx.beginPath();
48  ctx.moveTo(0, 0);
49  ctx.lineTo(W, 0);
50  ctx.lineTo(W, getY(W, t));
51
52  // Draw wave from right to left
53  for (let x = W; x >= 0; x -= 2) {
54    ctx.lineTo(x, getY(x, t));
55  }
56
57  ctx.lineTo(0, getY(0, t));
58  ctx.closePath();
59  ctx.fillStyle = 'black';
60  ctx.fill();
61
62  // Add soft glow/blur effect at the edges (left and right)
63  // Left glow
64  const glowLeft = ctx.createRadialGradient(0, getY(0, t), 0, 0, getY(0, t), 80);
65  glowLeft.addColorStop(0, 'rgba(255,255,255,0.6)');
66  glowLeft.addColorStop(1, 'rgba(255,255,255,0)');
67  ctx.fillStyle = glowLeft;
68  ctx.fillRect(0, getY(0, t) - 80, 160, 160);
69
70  // Right glow
71  const rightY = getY(W, t);
72  const glowRight = ctx.createRadialGradient(W, rightY, 0, W, rightY, 80);
73  glowRight.addColorStop(0, 'rgba(255,255,255,0.6)');
74  glowRight.addColorStop(1, 'rgba(255,255,255,0)');
75  ctx.fillStyle = glowRight;
76  ctx.fillRect(W - 160, rightY - 80, 160, 160);
77
78  t += 0.02;
79  requestAnimationFrame(draw);
80}
81
82draw();
83
84window.addEventListener('resize', () => {
85  canvas.width = window.innerWidth;
86  canvas.height = window.innerHeight;
87});
88</script>
89</body>
90</html>