model output
GPT-5.4

the deep blue (waves)
A 0.84T 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" />
6<title>The deep blue</title>
7<style>
8  :root{
9    --bg:#24384b;
10    --wave1:#4f7bdd;
11    --wave2:#436bc8;
12    --wave3:#3b5fb5;
13    --sea:#3a5fb1;
14    --text:rgba(255,255,255,.72);
15  }
16
17  html,body{
18    margin:0;
19    height:100%;
20    overflow:hidden;
21    background:var(--bg);
22    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
23  }
24
25  .scene{
26    position:relative;
27    width:100vw;
28    height:100vh;
29    background:var(--bg);
30    overflow:hidden;
31  }
32
33  .title{
34    position:absolute;
35    left:50%;
36    top:34%;
37    transform:translate(-50%,-50%);
38    z-index:10;
39    color:var(--text);
40    font-weight:200;
41    font-size:clamp(34px, 6vw, 82px);
42    letter-spacing:.01em;
43    white-space:nowrap;
44    pointer-events:none;
45    text-rendering:geometricPrecision;
46  }
47
48  .wave{
49    position:absolute;
50    left:-18vw;
51    width:136vw;
52    height:26vh;
53    border-radius:50% / 100%;
54    transform-origin:center center;
55    will-change:transform;
56  }
57
58  .w1{
59    top:7vh;
60    background:linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--wave1);
61    opacity:.98;
62    animation: drift1 13s ease-in-out infinite alternate;
63  }
64
65  .w2{
66    top:12vh;
67    background:linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--wave2);
68    opacity:.72;
69    animation: drift2 16s ease-in-out infinite alternate;
70  }
71
72  .w3{
73    top:16vh;
74    background:linear-gradient(to bottom, rgba(255,255,255,.015), rgba(255,255,255,0)) , var(--wave3);
75    opacity:.62;
76    animation: drift3 19s ease-in-out infinite alternate;
77  }
78
79  .sea{
80    position:absolute;
81    left:0;
82    right:0;
83    top:31vh;
84    bottom:0;
85    background:var(--sea);
86  }
87
88  @keyframes drift1{
89    0%   { transform:translateX(-10vw) translateY(0vh) rotate(-2.2deg) scaleX(1.02) scaleY(1); }
90    25%  { transform:translateX(-2vw)  translateY(1vh) rotate(-0.8deg) scaleX(1.00) scaleY(1.02); }
91    50%  { transform:translateX(7vw)   translateY(0vh) rotate(1.2deg)  scaleX(1.03) scaleY(.98); }
92    75%  { transform:translateX(14vw)  translateY(1.2vh) rotate(2.4deg) scaleX(1.01) scaleY(1.01); }
93    100% { transform:translateX(22vw)  translateY(0vh) rotate(4deg)    scaleX(1.04) scaleY(1); }
94  }
95
96  @keyframes drift2{
97    0%   { transform:translateX(18vw)  translateY(0vh) rotate(4deg)    scaleX(1.03) scaleY(1); }
98    25%  { transform:translateX(8vw)   translateY(.8vh) rotate(2deg)   scaleX(1.01) scaleY(1.02); }
99    50%  { transform:translateX(-2vw)  translateY(0vh) rotate(0deg)    scaleX(1.04) scaleY(.99); }
100    75%  { transform:translateX(-12vw) translateY(1vh) rotate(-2.2deg) scaleX(1.02) scaleY(1.01); }
101    100% { transform:translateX(-22vw) translateY(0vh) rotate(-4.2deg) scaleX(1.03) scaleY(1); }
102  }
103
104  @keyframes drift3{
105    0%   { transform:translateX(-16vw) translateY(0vh) rotate(-5deg)   scaleX(1.05) scaleY(1); }
106    25%  { transform:translateX(-7vw)  translateY(.8vh) rotate(-2.5deg) scaleX(1.02) scaleY(1.02); }
107    50%  { transform:translateX(3vw)   translateY(0vh) rotate(0deg)    scaleX(1.03) scaleY(.99); }
108    75%  { transform:translateX(13vw)  translateY(1vh) rotate(2.8deg)  scaleX(1.01) scaleY(1.01); }
109    100% { transform:translateX(24vw)  translateY(0vh) rotate(5deg)    scaleX(1.05) scaleY(1); }
110  }
111</style>
112</head>
113<body>
114  <div class="scene">
115    <div class="title">The deep blue</div>
116    <div class="wave w1"></div>
117    <div class="wave w2"></div>
118    <div class="wave w3"></div>
119    <div class="sea"></div>
120  </div>
121</body>
122</html>