model output
Claude Sonnet 4.6

the deep blue (waves)
A 0.85T 0.27
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>The Deep Blue</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-color: #1e2d3d;
15  }
16
17  .scene {
18    position: relative;
19    width: 100%;
20    height: 100%;
21  }
22
23  canvas {
24    position: absolute;
25    top: 0;
26    left: 0;
27    width: 100%;
28    height: 100%;
29  }
30
31  .title {
32    position: absolute;
33    top: 50%;
34    left: 50%;
35    transform: translate(-20%, -80%);
36    color: rgba(220, 230, 255, 0.85);
37    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
38    font-size: 3.2vw;
39    font-weight: 100;
40    letter-spacing: 0.05em;
41    pointer-events: none;
42    z-index: 10;
43  }
44</style>
45</head>
46<body>
47<div class="scene">
48  <canvas id="waveCanvas"></canvas>
49  <div class="title">The deep blue</div>
50</div>
51
52<script>
53const canvas = document.getElementById('waveCanvas');
54const ctx = canvas.getContext('2d');
55
56function resize() {
57  canvas.width = window.innerWidth;
58  canvas.height = window.innerHeight;
59}
60resize();
61window.addEventListener('resize', resize);
62
63// Wave layers configuration
64// Each layer: { color, amplitude, frequency, speed, yOffset, phase }
65const layers = [
66  // Back layer (darkest blue, behind)
67  {
68    color: '#2a4080',
69    amplitude: 45,
70    frequency: 0.0018,
71    speed: 0.4,
72    yBase: 0.28,
73    phase: 0,
74    phaseOffset: 1.2
75  },
76  // Middle layer
77  {
78    color: '#3355bb',
79    amplitude: 40,
80    frequency: 0.0022,
81    speed: 0.55,
82    yBase: 0.30,
83    phase: 0,
84    phaseOffset: 2.5
85  },
86  // Front layer (brightest, main wave)
87  {
88    color: '#2d4db5',
89    amplitude: 50,
90    frequency: 0.0016,
91    speed: 0.7,
92    yBase: 0.32,
93    phase: 0,
94    phaseOffset: 0
95  },
96  // Thin highlight layer
97  {
98    color: '#4466cc',
99    amplitude: 30,
100    frequency: 0.002,
101    speed: 0.9,
102    yBase: 0.295,
103    phase: 0,
104    phaseOffset: 3.8
105  }
106];
107
108function drawWave(layer, time) {
109  const w = canvas.width;
110  const h = canvas.height;
111  const yBase = h * layer.yBase;
112
113  ctx.beginPath();
114  ctx.moveTo(0, h);
115
116  for (let x = 0; x <= w; x += 2) {
117    const y = yBase +
118      Math.sin(x * layer.frequency + time * layer.speed + layer.phaseOffset) * layer.amplitude +
119      Math.sin(x * layer.frequency * 1.7 + time * layer.speed * 0.8 + layer.phaseOffset + 1) * (layer.amplitude * 0.4);
120    ctx.lineTo(x, y);
121  }
122
123  ctx.lineTo(w, h);
124  ctx.lineTo(0, h);
125  ctx.closePath();
126  ctx.fillStyle = layer.color;
127  ctx.fill();
128}
129
130let startTime = null;
131
132function animate(timestamp) {
133  if (!startTime) startTime = timestamp;
134  const elapsed = (timestamp - startTime) / 1000;
135
136  const w = canvas.width;
137  const h = canvas.height;
138
139  // Background
140  ctx.fillStyle = '#1e2d3d';
141  ctx.fillRect(0, 0, w, h);
142
143  // Draw layers back to front
144  // Layer order: back dark, mid, highlight thin, front main
145  drawWave(layers[0], elapsed);
146  drawWave(layers[3], elapsed);
147  drawWave(layers[1], elapsed);
148  drawWave(layers[2], elapsed);
149
150  requestAnimationFrame(animate);
151}
152
153requestAnimationFrame(animate);
154</script>
155</body>
156</html>