model output
Gemini 3 Flash Preview

the deep blue (waves)
A 0.78T 0.49
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 - Animation</title>
7  <style>
8    /* 
9      Analysis:
10      - Background color: Deep charcoal/navy (#1c2b36).
11      - Text: "The deep blue", light weight (100), sans-serif, centered.
12      - Waves: Two distinct layers of rolling waves.
13      - Front Wave: Darker blue (#2d56aa), faster movement.
14      - Back Wave: Lighter blue (#3b78e7), slower movement.
15      - Timing: Smooth linear/ease-in-out horizontal scrolling.
16    */
17
18    body, html {
19      margin: 0;
20      padding: 0;
21      width: 100%;
22      height: 100%;
23      background-color: #1c2b36;
24      overflow: hidden;
25      display: flex;
26      flex-direction: column;
27      justify-content: flex-end; /* Align waves to bottom */
28      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
29    }
30
31    .container {
32      position: relative;
33      width: 100%;
34      height: 100vh;
35      display: flex;
36      flex-direction: column;
37      justify-content: flex-end;
38    }
39
40    .text {
41      position: absolute;
42      top: 32%; /* Positioned slightly above center as in video */
43      width: 100%;
44      text-align: center;
45      color: rgba(255, 255, 255, 0.45); /* Thin, ethereal text */
46      font-weight: 100;
47      font-size: clamp(2rem, 8vw, 4.8rem);
48      letter-spacing: 2px;
49      z-index: 1; /* Behind waves */
50      pointer-events: none;
51      user-select: none;
52    }
53
54    /* Wave Styling */
55    .waves-svg {
56      position: relative;
57      width: 100%;
58      height: 75vh; /* Tall waves covering most of the screen */
59      min-height: 150px;
60      max-height: 800px;
61      z-index: 2;
62    }
63
64    /* Wave Animation Logic */
65    .parallax > use {
66      /* Cubic-bezier used to mimic the organic flow of water */
67      animation: move-forever 20s cubic-bezier(.55, .5, .45, .5) infinite;
68    }
69
70    /* Back Wave (Lighter Blue) */
71    .parallax > use:nth-child(1) {
72      animation-delay: -2s;
73      animation-duration: 15s;
74      fill: #3b78e7;
75    }
76
77    /* Front Wave (Darker Blue) */
78    .parallax > use:nth-child(2) {
79      animation-delay: -4s;
80      animation-duration: 10s;
81      fill: #2d56aa;
82    }
83
84    /* 
85      Translate the wave path horizontally. 
86      The pattern repeats every 150 units in the SVG viewBox, 
87      so shifting by a similar amount creates a seamless loop.
88    */
89    @keyframes move-forever {
90      0% {
91        transform: translate3d(-90px, 0, 0);
92      }
93      100% {
94        transform: translate3d(85px, 0, 0);
95      }
96    }
97
98    /* Responsive scaling for mobile devices */
99    @media (max-width: 768px) {
100      .waves-svg {
101        height: 50vh;
102      }
103      .text {
104        top: 25%;
105      }
106    }
107  </style>
108</head>
109<body>
110
111  <div class="container">
112    <!-- Text layer is placed behind the SVG waves -->
113    <div class="text">The deep blue</div>
114
115    <!-- 
116      The SVG uses preserveAspectRatio="none" to allow CSS to control height/width 
117      This creates the "tall wave" effect seen in the video.
118    -->
119    <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
120      viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
121      <defs>
122        <!-- A smooth, gentle wave path -->
123        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
124      </defs>
125      <g class="parallax">
126        <!-- Layer 1 (Back) -->
127        <use xlink:href="#gentle-wave" x="48" y="0" />
128        <!-- Layer 2 (Front) -->
129        <use xlink:href="#gentle-wave" x="48" y="6" />
130      </g>
131    </svg>
132  </div>
133
134</body>
135</html>