model output
Gemini 3 Flash Preview

Only CSS: Sunset Beach
A 0.87T 0.28
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>Melting Sun Animation</title>
7    <style>
8        /* Base styles to match the video's atmosphere */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #000000;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container for the sun and its reflection */
21        .sun-container {
22            display: flex;
23            flex-direction: column;
24            align-items: center;
25            width: 240px;
26        }
27
28        /* The top static semi-circle of the sun */
29        .sun-top {
30            width: 190px;
31            height: 95px;
32            background-color: #ff0000;
33            border-radius: 95px 95px 0 0;
34            margin-bottom: 6px;
35        }
36
37        /* Common properties for the reflection bars */
38        .reflection-bar {
39            background-color: #ff0000;
40            border-radius: 10px;
41            margin-bottom: 5px;
42            transition: transform 0.1s ease;
43        }
44
45        /* Segment 1: Widest reflection bar just below the sun */
46        .bar-1 {
47            width: 160px;
48            height: 14px;
49            animation: shift-1 1.8s ease-in-out infinite;
50        }
51
52        /* Segment 2: Middle reflection bar */
53        .bar-2 {
54            width: 90px;
55            height: 10px;
56            animation: shift-2 1.8s ease-in-out infinite;
57        }
58
59        /* Segment 3: Smallest bottom reflection bar */
60        .bar-3 {
61            width: 45px;
62            height: 7px;
63            animation: shift-3 1.8s ease-in-out infinite;
64        }
65
66        /**
67         * Keyframes to recreate the "zigzag" wavy movement.
68         * The phases and directions are varied to simulate 
69         * the fluid horizontal oscillation seen in the video.
70         */
71
72        @keyframes shift-1 {
73            0%, 100% {
74                transform: translateX(-12px);
75            }
76            50% {
77                transform: translateX(12px);
78            }
79        }
80
81        @keyframes shift-2 {
82            0%, 100% {
83                transform: translateX(18px);
84            }
85            50% {
86                transform: translateX(-18px);
87            }
88        }
89
90        @keyframes shift-3 {
91            0%, 100% {
92                transform: translateX(-8px);
93            }
94            50% {
95                transform: translateX(18px);
96            }
97        }
98
99        /* Subtle scaling to give a more "liquid" feel to the reflection */
100        .reflection-bar {
101            animation-direction: alternate;
102            animation-duration: 0.9s; /* Half cycle for simplified logic if needed, but 1.8s full loop is more precise */
103        }
104
105        /* Resetting to sync with specific timing from video */
106        .bar-1 { animation: shift-1 1.6s ease-in-out infinite; }
107        .bar-2 { animation: shift-2 1.6s ease-in-out infinite; }
108        .bar-3 { animation: shift-3 1.6s ease-in-out infinite; }
109
110    </style>
111</head>
112<body>
113
114    <div class="sun-container">
115        <!-- Static top part -->
116        <div class="sun-top"></div>
117        
118        <!-- Animated reflection segments -->
119        <div class="reflection-bar bar-1"></div>
120        <div class="reflection-bar bar-2"></div>
121        <div class="reflection-bar bar-3"></div>
122    </div>
123
124</body>
125</html>