model output
Gemini 3 Flash Preview

CSS animated waves
A 0.79T 0.30
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 Recreations</title>
7    <style>
8        /* 
9           CSS Styles to recreate the animation precisely.
10           Colors:
11           - Sky: #a2e4ff
12           - Wave top: #0084ff
13           - Wave bottom: #003185
14           Timing: 3-second seamless loop.
15        */
16
17        body, html {
18            margin: 0;
19            padding: 0;
20            width: 100%;
21            height: 100%;
22            overflow: hidden;
23            background-color: #a2e4ff; /* Light blue sky color from the video */
24        }
25
26        .ocean-container {
27            position: absolute;
28            bottom: 0;
29            left: 0;
30            width: 100%;
31            height: 60%; /* The wave area occupies approximately 60% of the screen height */
32        }
33
34        /* 
35           The SVG is used to create the smooth wavy top edge.
36           We use 'preserveAspectRatio="none"' to allow the wave to stretch horizontally 
37           while maintaining its vertical shape.
38        */
39        .waves-svg {
40            display: block;
41            width: 100%;
42            height: 100%;
43        }
44
45        /* 
46           Animation logic:
47           We define a periodic wave path that is twice as long as the viewBox width.
48           By translating it horizontally by exactly half its length (-50%), 
49           we create a perfectly seamless loop.
50        */
51        .wave-path {
52            animation: move-wave 3s linear infinite;
53        }
54
55        @keyframes move-wave {
56            from {
57                transform: translateX(0);
58            }
59            to {
60                transform: translateX(-50%); /* Half of the 200-unit path length defined in SVG */
61            }
62        }
63
64        /* Responsive height adjustment if needed */
65        @media (max-height: 400px) {
66            .ocean-container {
67                height: 75%;
68            }
69        }
70    </style>
71</head>
72<body>
73
74    <div class="ocean-container">
75        <!-- 
76           ViewBox is 100 units wide. 
77           The path defined below consists of two identical cycles, totaling 200 units.
78        -->
79        <svg class="waves-svg" viewBox="0 0 100 20" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
80            <defs>
81                <!-- Linear gradient from top of wave to bottom of container -->
82                <linearGradient id="ocean-gradient" x1="0" y1="0" x2="0" y2="1">
83                    <stop offset="0%" stop-color="#0084ff" />
84                    <stop offset="100%" stop-color="#003185" />
85                </linearGradient>
86            </defs>
87            
88            <!-- 
89               Path construction:
90               M 0 10: Start mid-left.
91               C 20 10, 30 2, 50 2: First half of cycle (peak).
92               S 80 10, 100 10: Second half of cycle (trough).
93               (Repeated once more to 200 for seamless scroll)
94            -->
95            <path class="wave-path" 
96                  d="M 0 10 
97                     C 20 10, 30 2, 50 2 
98                     S 80 10, 100 10 
99                     C 120 10, 130 2, 150 2 
100                     S 180 10, 200 10
101                     V 20 H 0 Z" 
102                  fill="url(#ocean-gradient)" />
103        </svg>
104    </div>
105
106    <script>
107        /**
108         * The animation is purely CSS-driven for performance and accuracy.
109         * The 3-second linear loop matches the timing observed in the video snapshots.
110         * The translateX(-50%) ensures the start and end of the 3s loop are identical frames.
111         */
112    </script>
113</body>
114</html>