model output
Gemini 3 Flash Preview

Neon Loaders
A 0.84T 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>Square Pulse Loader</title>
7    <style>
8        /* 
9           Background: Dark atmosphere with a subtle radial gradient 
10           Matching the video's dark, slightly vignetted look.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            height: 100vh;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            background: radial-gradient(circle, #202225 0%, #0d0e10 100%);
20            overflow: hidden;
21        }
22
23        /* Container for the three blocks */
24        .loader {
25            display: flex;
26            gap: 4px; /* Tight spacing between squares */
27        }
28
29        /* 
30           Square properties 
31           Width: 42px, Height: 32px based on visual aspect ratio 
32        */
33        .square {
34            width: 42px;
35            height: 32px;
36            background-color: #3e4145; /* Initial dark gray color */
37            border-radius: 1px;
38            animation: pulse-glow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
39        }
40
41        /* Specific colors and delays for each square */
42        .square:nth-child(1) {
43            --active-clr: #ff007e; /* Pink / Magenta */
44            animation-delay: 0s;
45        }
46
47        .square:nth-child(2) {
48            --active-clr: #8f00ff; /* Purple */
49            animation-delay: 0.5s;
50        }
51
52        .square:nth-child(3) {
53            --active-clr: #00b0ff; /* Cyan / Bright Blue */
54            animation-delay: 1.0s;
55        }
56
57        /* 
58           Animation Keyframes 
59           The sequence lasts 3 seconds. 
60           Each block lights up for about 1/3 of the cycle and then fades back.
61        */
62        @keyframes pulse-glow {
63            0% {
64                background-color: #3e4145;
65                box-shadow: none;
66            }
67            15% {
68                /* Peaking at 15% of the 3s cycle (~0.45s into its phase) */
69                background-color: var(--active-clr);
70                box-shadow: 0 0 25px var(--active-clr), 0 0 5px var(--active-clr);
71            }
72            45% {
73                /* Fading back to base color */
74                background-color: #3e4145;
75                box-shadow: none;
76            }
77            100% {
78                background-color: #3e4145;
79                box-shadow: none;
80            }
81        }
82    </style>
83</head>
84<body>
85
86    <div class="loader">
87        <div class="square"></div>
88        <div class="square"></div>
89        <div class="square"></div>
90    </div>
91
92</body>
93</html>