model output
GPT-5.4

CSS animated waves
A 0.92T 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 Divider Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #9fd4ee;
14  }
15
16  .scene {
17    position: fixed;
18    inset: 0;
19    background: #9fd4ee;
20  }
21
22  /* Water body */
23  .water {
24    position: absolute;
25    inset: 0;
26    background: linear-gradient(
27      to bottom,
28      #1f93e6 0%,
29      #1d84db 28%,
30      #176bc7 62%,
31      #1249a9 100%
32    );
33    clip-path: path("M 0 462 C 170 462, 340 462, 512 462 C 682 462, 852 462, 1024 462 L 1024 768 L 0 768 Z");
34    animation: wave 3.2s ease-in-out infinite;
35    will-change: clip-path;
36  }
37
38  /* Soft highlight band near the crest */
39  .water::before {
40    content: "";
41    position: absolute;
42    inset: 0;
43    background:
44      radial-gradient(120% 22% at 50% 0%,
45        rgba(255,255,255,0.12) 0%,
46        rgba(255,255,255,0.07) 28%,
47        rgba(255,255,255,0.00) 62%);
48    mix-blend-mode: screen;
49    opacity: 0.9;
50    pointer-events: none;
51  }
52
53  @keyframes wave {
54    0%, 100% {
55      clip-path: path("M 0 462 C 170 462, 340 462, 512 462 C 682 462, 852 462, 1024 462 L 1024 768 L 0 768 Z");
56    }
57    12.5% {
58      clip-path: path("M 0 378 C 130 396, 260 448, 410 458 C 610 472, 820 458, 1024 461 L 1024 768 L 0 768 Z");
59    }
60    25% {
61      clip-path: path("M 0 321 C 210 327, 430 349, 640 404 C 790 444, 905 462, 1024 461 L 1024 768 L 0 768 Z");
62    }
63    37.5% {
64      clip-path: path("M 0 307 C 250 307, 520 314, 760 338 C 870 349, 950 364, 1024 381 L 1024 768 L 0 768 Z");
65    }
66    50% {
67      clip-path: path("M 0 389 C 170 362, 330 309, 520 307 C 700 306, 860 314, 1024 320 L 1024 768 L 0 768 Z");
68    }
69    62.5% {
70      clip-path: path("M 0 447 C 180 438, 360 423, 560 385 C 740 351, 875 313, 1024 307 L 1024 768 L 0 768 Z");
71    }
72    75% {
73      clip-path: path("M 0 461 C 250 461, 520 456, 760 434 C 870 424, 950 410, 1024 390 L 1024 768 L 0 768 Z");
74    }
75    87.5% {
76      clip-path: path("M 0 378 C 130 396, 260 448, 410 458 C 610 472, 820 458, 1024 446 L 1024 768 L 0 768 Z");
77    }
78  }
79</style>
80</head>
81<body>
82  <div class="scene">
83    <div class="water"></div>
84  </div>
85</body>
86</html>