← back to Neon Loaderscompare with ground truth →
model output
Claude Sonnet 4.6
Neon Loaders
A 0.51T 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>Glowing Dots Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 width: 100vw;
12 height: 100vh;
13 background: #0a1010;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 }
19
20 .bg-vignette {
21 position: fixed;
22 inset: 0;
23 background: radial-gradient(ellipse at 40% 50%, #1a2a28 0%, #0d1a18 35%, #050a09 60%, #020605 100%);
24 pointer-events: none;
25 }
26
27 .dots-container {
28 position: relative;
29 display: flex;
30 align-items: center;
31 gap: 10px;
32 }
33
34 .dot {
35 width: 28px;
36 height: 28px;
37 border-radius: 50%;
38 filter: blur(2px);
39 opacity: 0;
40 }
41
42 .dot-pink {
43 background: radial-gradient(circle, #ff40c0 0%, #e020a0 50%, #800050 100%);
44 box-shadow: 0 0 15px 5px rgba(255, 40, 180, 0.6), 0 0 30px 10px rgba(200, 20, 140, 0.3);
45 animation: fadeInPink 0.5s ease-out 1.5s forwards, pulsePink 2s ease-in-out 2s infinite;
46 }
47
48 .dot-purple {
49 background: radial-gradient(circle, #9060e0 0%, #7040c0 50%, #402080 100%);
50 box-shadow: 0 0 15px 5px rgba(130, 60, 220, 0.5), 0 0 30px 10px rgba(100, 40, 180, 0.25);
51 animation: fadeInPurple 0.5s ease-out 2s forwards, pulsePurple 2s ease-in-out 2.5s infinite;
52 }
53
54 .dot-blue {
55 background: radial-gradient(circle, #20c0f0 0%, #10a0d0 50%, #005080 100%);
56 box-shadow: 0 0 15px 5px rgba(20, 180, 240, 0.6), 0 0 30px 10px rgba(10, 140, 200, 0.3);
57 animation: fadeInBlue 0.5s ease-out 2.5s forwards, pulseBlue 2s ease-in-out 3s infinite;
58 }
59
60 @keyframes fadeInPink {
61 0% { opacity: 0; transform: scale(0.3); }
62 100% { opacity: 1; transform: scale(1); }
63 }
64
65 @keyframes fadeInPurple {
66 0% { opacity: 0; transform: scale(0.3); }
67 100% { opacity: 0.85; transform: scale(1); }
68 }
69
70 @keyframes fadeInBlue {
71 0% { opacity: 0; transform: scale(0.3); }
72 100% { opacity: 1; transform: scale(1); }
73 }
74
75 @keyframes pulsePink {
76 0%, 100% { opacity: 1; box-shadow: 0 0 15px 5px rgba(255, 40, 180, 0.6), 0 0 30px 10px rgba(200, 20, 140, 0.3); }
77 50% { opacity: 0.6; box-shadow: 0 0 8px 3px rgba(255, 40, 180, 0.3), 0 0 15px 5px rgba(200, 20, 140, 0.15); }
78 }
79
80 @keyframes pulsePurple {
81 0%, 100% { opacity: 0.85; box-shadow: 0 0 15px 5px rgba(130, 60, 220, 0.5), 0 0 30px 10px rgba(100, 40, 180, 0.25); }
82 50% { opacity: 0.5; box-shadow: 0 0 8px 3px rgba(130, 60, 220, 0.25), 0 0 15px 5px rgba(100, 40, 180, 0.12); }
83 }
84
85 @keyframes pulseBlue {
86 0%, 100% { opacity: 1; box-shadow: 0 0 15px 5px rgba(20, 180, 240, 0.6), 0 0 30px 10px rgba(10, 140, 200, 0.3); }
87 50% { opacity: 0.6; box-shadow: 0 0 8px 3px rgba(20, 180, 240, 0.3), 0 0 15px 5px rgba(10, 140, 200, 0.15); }
88 }
89
90 /* Cycling animation - dots fade in/out in sequence */
91 .dot-pink {
92 animation: fadeInPink 0.5s ease-out 1.5s forwards, cyclePink 4s ease-in-out 2s infinite;
93 }
94 .dot-purple {
95 animation: fadeInPurple 0.5s ease-out 2s forwards, cyclePurple 4s ease-in-out 2.5s infinite;
96 }
97 .dot-blue {
98 animation: fadeInBlue 0.5s ease-out 2.5s forwards, cycleBlue 4s ease-in-out 3s infinite;
99 }
100
101 @keyframes cyclePink {
102 0% { opacity: 1; }
103 30% { opacity: 1; }
104 50% { opacity: 0.5; }
105 70% { opacity: 0.3; }
106 85% { opacity: 0.7; }
107 100% { opacity: 1; }
108 }
109
110 @keyframes cyclePurple {
111 0% { opacity: 0.85; }
112 30% { opacity: 0.85; }
113 50% { opacity: 0.4; }
114 70% { opacity: 0.6; }
115 85% { opacity: 0.85; }
116 100% { opacity: 0.85; }
117 }
118
119 @keyframes cycleBlue {
120 0% { opacity: 1; }
121 20% { opacity: 1; }
122 40% { opacity: 0.4; }
123 60% { opacity: 0.2; }
124 80% { opacity: 0.7; }
125 100% { opacity: 1; }
126 }
127</style>
128</head>
129<body>
130 <div class="bg-vignette"></div>
131 <div class="dots-container">
132 <div class="dot dot-pink"></div>
133 <div class="dot dot-purple"></div>
134 <div class="dot dot-blue"></div>
135 </div>
136</body>
137</html>