model output
Gemini 3 Flash Preview

background wave animation
A 0.87T 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>Fluid Wave Animation</title>
7    <style>
8        /* 
9           Analysis:
10           - Background Color: A deep blue (#0f6bc8).
11           - Two primary moving layers:
12             1. A medium blue layer (#1c7ace) positioned behind.
13             2. A light blue layer (#44a9e2) positioned in front.
14           - Movement: Slow, organic oscillation mimicking liquid or cloth.
15           - Technique: Large elliptical shapes with changing border-radius and subtle rotation.
16        */
17
18        :root {
19            --bg-color: #0f6bc8;
20            --mid-blue: #1c7ace;
21            --light-blue: #44a9e2;
22        }
23
24        body, html {
25            margin: 0;
26            padding: 0;
27            width: 100%;
28            height: 100%;
29            overflow: hidden;
30            background-color: var(--bg-color);
31        }
32
33        .container {
34            position: relative;
35            width: 100vw;
36            height: 100vh;
37        }
38
39        /* Base styles for the animated blobs */
40        .blob {
41            position: absolute;
42            top: 50%;
43            left: 0;
44            transform-origin: left center;
45            will-change: transform, border-radius;
46        }
47
48        /* The middle layer (Medium Blue) */
49        .blob-medium {
50            width: 180vh;
51            height: 200vh;
52            background-color: var(--mid-blue);
53            z-index: 1;
54            /* Anchored off-screen left, centered vertically */
55            left: -90vh; 
56            top: -50vh;
57            animation: drift-medium 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
58        }
59
60        /* The top layer (Light Blue) */
61        .blob-light {
62            width: 150vh;
63            height: 170vh;
64            background-color: var(--light-blue);
65            z-index: 2;
66            /* Anchored slightly further back to let mid-blue show through occasionally */
67            left: -95vh;
68            top: -35vh;
69            animation: drift-light 10s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
70        }
71
72        /* Keyframes for the medium blue blob movement */
73        @keyframes drift-medium {
74            0% {
75                transform: translateY(-5%) rotate(-5deg) scale(1);
76                border-radius: 40% 60% 60% 40% / 40% 50% 50% 60%;
77            }
78            50% {
79                transform: translateY(0%) rotate(0deg) scale(1.05);
80                border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
81            }
82            100% {
83                transform: translateY(5%) rotate(5deg) scale(1);
84                border-radius: 60% 40% 40% 60% / 60% 50% 50% 40%;
85            }
86        }
87
88        /* Keyframes for the light blue blob movement */
89        @keyframes drift-light {
90            0% {
91                transform: translateY(8%) rotate(2deg);
92                border-radius: 45% 55% 55% 45% / 55% 45% 45% 55%;
93            }
94            50% {
95                transform: translateY(0%) rotate(-3deg) scale(1.1);
96                border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
97            }
98            100% {
99                transform: translateY(-8%) rotate(-8deg);
100                border-radius: 55% 45% 45% 55% / 45% 55% 55% 45%;
101            }
102        }
103
104        /* Visual refinement: subtle blur to match the soft edges in the video */
105        .blob {
106            filter: blur(1px);
107        }
108    </style>
109</head>
110<body>
111
112    <div class="container">
113        <!-- The layers stack from back to front -->
114        <div class="blob blob-medium"></div>
115        <div class="blob blob-light"></div>
116    </div>
117
118</body>
119</html>