← back to Only CSS: Lanthanumcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Lanthanum
A 0.60T 0.20
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>Flickering Lantern Animation</title>
7 <style>
8 :root {
9 --bg-color: #232f3e;
10 --lantern-dark: #323945;
11 --lantern-light: #4a5464;
12 --glass-color: rgba(255, 255, 255, 0.15);
13 --flame-color: #ff4d4d;
14 --glow-color: rgba(255, 200, 150, 0.3);
15 }
16
17 body, html {
18 margin: 0;
19 padding: 0;
20 width: 100%;
21 height: 100%;
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 background-color: var(--bg-color);
26 overflow: hidden;
27 }
28
29 /* Container for the whole lantern to handle bobbing */
30 .lantern-wrapper {
31 position: relative;
32 display: flex;
33 flex-direction: column;
34 align-items: center;
35 animation: bob 4s ease-in-out infinite;
36 }
37
38 /* Handle at the top */
39 .handle {
40 width: 80px;
41 height: 60px;
42 border: 4px solid var(--lantern-dark);
43 border-bottom: none;
44 border-radius: 40px 40px 0 0;
45 margin-bottom: -10px;
46 position: relative;
47 z-index: 1;
48 }
49
50 /* Top Cap of the lantern */
51 .cap {
52 width: 90px;
53 height: 25px;
54 background: linear-gradient(to bottom, var(--lantern-light), var(--lantern-dark));
55 border-radius: 12px 12px 4px 4px;
56 z-index: 2;
57 box-shadow: 0 4px 6px rgba(0,0,0,0.3);
58 }
59
60 /* The glass middle section */
61 .glass-body {
62 width: 70px;
63 height: 100px;
64 background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.1) 100%);
65 border-left: 1px solid rgba(255,255,255,0.1);
66 border-right: 1px solid rgba(255,255,255,0.1);
67 position: relative;
68 display: flex;
69 justify-content: center;
70 align-items: center;
71 overflow: hidden;
72 margin: -2px 0; /* Slight overlap for seamless look */
73 }
74
75 /* The glowing aura behind the flame */
76 .glow {
77 position: absolute;
78 width: 120px;
79 height: 120px;
80 background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
81 filter: blur(15px);
82 animation: pulse-glow 2s infinite ease-in-out;
83 pointer-events: none;
84 }
85
86 /* The actual flame */
87 .flame {
88 width: 24px;
89 height: 45px;
90 background: var(--flame-color);
91 border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
92 box-shadow: 0 0 20px var(--flame-color), 0 0 40px var(--flame-color);
93 position: relative;
94 animation: flicker 0.15s infinite alternate ease-in-out;
95 }
96
97 /* Bottom base */
98 .base {
99 width: 95px;
100 height: 35px;
101 background: linear-gradient(to bottom, var(--lantern-light), var(--lantern-dark));
102 border-radius: 4px 4px 15px 15px;
103 z-index: 2;
104 box-shadow: 0 10px 20px rgba(0,0,0,0.4);
105 }
106
107 /* Highlight on the glass */
108 .glass-body::after {
109 content: '';
110 position: absolute;
111 top: 0;
112 left: 15%;
113 width: 15%;
114 height: 100%;
115 background: rgba(255, 255, 255, 0.08);
116 }
117
118 /* Keyframe Animations */
119 @keyframes bob {
120 0%, 100% { transform: translateY(0); }
121 50% { transform: translateY(-15px); }
122 }
123
124 @keyframes flicker {
125 0% {
126 transform: scale(0.95, 1.05) rotate(-1deg);
127 opacity: 0.9;
128 }
129 100% {
130 transform: scale(1.05, 0.95) rotate(1deg);
131 opacity: 1;
132 }
133 }
134
135 @keyframes pulse-glow {
136 0%, 100% {
137 transform: scale(1);
138 opacity: 0.4;
139 }
140 50% {
141 transform: scale(1.2);
142 opacity: 0.7;
143 }
144 }
145
146 /* Subtle shadow on the ground */
147 .shadow {
148 position: absolute;
149 bottom: -50px;
150 width: 100px;
151 height: 20px;
152 background: rgba(0, 0, 0, 0.3);
153 border-radius: 50%;
154 filter: blur(10px);
155 animation: shadow-scale 4s ease-in-out infinite;
156 }
157
158 @keyframes shadow-scale {
159 0%, 100% { transform: scale(1); opacity: 0.5; }
160 50% { transform: scale(0.8); opacity: 0.2; }
161 }
162 </style>
163</head>
164<body>
165
166 <div class="lantern-wrapper">
167 <div class="handle"></div>
168 <div class="cap"></div>
169 <div class="glass-body">
170 <div class="glow"></div>
171 <div class="flame"></div>
172 </div>
173 <div class="base"></div>
174 <div class="shadow"></div>
175 </div>
176
177 <script>
178 // Optional: Adding slight randomization to the flicker timing via JS
179 // to make it look more organic over time
180 const flame = document.querySelector('.flame');
181 const glow = document.querySelector('.glow');
182
183 function randomizeFlicker() {
184 const duration = (Math.random() * 0.1 + 0.1).toFixed(2);
185 flame.style.animationDuration = `${duration}s`;
186
187 // Occasionally shift the flame slightly
188 const shift = (Math.random() * 2 - 1).toFixed(2);
189 flame.style.left = `${shift}px`;
190
191 setTimeout(randomizeFlicker, Math.random() * 500 + 200);
192 }
193
194 randomizeFlicker();
195 </script>
196</body>
197</html>