model output
Gemini 3 Flash Preview

Neon Loaders
A 0.85T 0.38
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>Staggered Glow Dots Animation</title>
7    <style>
8        /* Reset and Base Styles */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            background-color: #0d0d11;
18            /* Subtle radial gradient to match the video's background depth */
19            background: radial-gradient(circle, #1a1a1f 0%, #050505 100%);
20            overflow: hidden;
21        }
22
23        /* Container for the dots */
24        .loader {
25            display: flex;
26            gap: 24px;
27        }
28
29        /* Individual Dot Styling */
30        .dot {
31            width: 22px;
32            height: 22px;
33            border-radius: 50%;
34            opacity: 0.1;
35            transform: scale(0.8);
36            /* Standard pulse animation */
37            animation: pulse-glow 2.5s ease-in-out infinite;
38        }
39
40        /* Specific colors and glow effects for each dot */
41        .dot-1 {
42            background-color: #ff007f;
43            box-shadow: 0 0 20px 2px rgba(255, 0, 127, 0.6);
44            animation-delay: 0.3s;
45        }
46
47        .dot-2 {
48            background-color: #9c27b0;
49            box-shadow: 0 0 20px 2px rgba(156, 39, 176, 0.6);
50            animation-delay: 0.8s;
51        }
52
53        .dot-3 {
54            background-color: #03a9f4;
55            box-shadow: 0 0 20px 2px rgba(3, 169, 244, 0.6);
56            animation-delay: 1.3s;
57        }
58
59        /* Pulse Keyframes 
60           The timing matches the video where dots fade in one after another,
61           reach a peak brightness, and then slowly dim back down.
62        */
63        @keyframes pulse-glow {
64            0%, 100% {
65                opacity: 0.1;
66                transform: scale(0.8);
67                filter: blur(1px);
68            }
69            30%, 60% {
70                opacity: 1;
71                transform: scale(1);
72                filter: blur(0px);
73            }
74        }
75
76        /* Responsive sizing */
77        @media (max-width: 600px) {
78            .dot {
79                width: 16px;
80                height: 16px;
81            }
82            .loader {
83                gap: 16px;
84            }
85        }
86    </style>
87</head>
88<body>
89
90    <div class="loader">
91        <div class="dot dot-1"></div>
92        <div class="dot dot-2"></div>
93        <div class="dot dot-3"></div>
94    </div>
95
96</body>
97</html>