model output
Claude Sonnet 4.6

Neon Loaders
A 0.89T 0.29
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>Color Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    width: 100vw;
12    height: 100vh;
13    background: radial-gradient(ellipse at center, #1a2a28 0%, #0a0f0e 60%, #050808 100%);
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    overflow: hidden;
18  }
19
20  .container {
21    display: flex;
22    gap: 2px;
23    position: relative;
24  }
25
26  .block {
27    width: 75px;
28    height: 45px;
29  }
30
31  #b1 {
32    animation: colorB1 4s ease-in-out infinite;
33  }
34
35  #b2 {
36    animation: colorB2 4s ease-in-out infinite;
37  }
38
39  #b3 {
40    animation: colorB3 4s ease-in-out infinite;
41  }
42
43  .glow {
44    position: absolute;
45    inset: -20px;
46    border-radius: 50%;
47    animation: glowAnim 4s ease-in-out infinite;
48    pointer-events: none;
49    filter: blur(20px);
50    opacity: 0;
51  }
52
53  @keyframes colorB1 {
54    0%   { background: #3d3d3d; }
55    15%  { background: #7a2060; }
56    30%  { background: #ff00cc; box-shadow: 0 0 20px 5px #ff00cc88; }
57    50%  { background: #ff00cc; box-shadow: 0 0 20px 5px #ff00cc88; }
58    65%  { background: #7a2060; }
59    75%  { background: #cc1199; box-shadow: 0 0 20px 5px #cc119988; }
60    85%  { background: #ff00cc; box-shadow: 0 0 20px 5px #ff00cc88; }
61    100% { background: #3d3d3d; }
62  }
63
64  @keyframes colorB2 {
65    0%   { background: #3d3d3d; }
66    15%  { background: #4a3a5a; }
67    30%  { background: #6644aa; }
68    50%  { background: #7755cc; }
69    65%  { background: #5a4a7a; }
70    75%  { background: #6644aa; }
71    85%  { background: #7755cc; }
72    100% { background: #3d3d3d; }
73  }
74
75  @keyframes colorB3 {
76    0%   { background: #3d3d3d; }
77    15%  { background: #3d3d3d; }
78    30%  { background: #4a5a6a; }
79    50%  { background: #1199dd; box-shadow: 0 0 20px 5px #1199dd88; }
80    65%  { background: #1199dd; box-shadow: 0 0 20px 5px #1199dd88; }
81    75%  { background: #4a5a6a; }
82    85%  { background: #4a6a8a; }
83    100% { background: #3d3d3d; }
84  }
85
86  @keyframes glowAnim {
87    0%   { opacity: 0; background: radial-gradient(ellipse, transparent 0%, transparent 100%); }
88    30%  { opacity: 1; background: radial-gradient(ellipse, #ff00cc33 0%, transparent 70%); }
89    50%  { opacity: 1; background: radial-gradient(ellipse, #8833ff33 0%, transparent 70%); }
90    65%  { opacity: 1; background: radial-gradient(ellipse, #1199dd33 0%, transparent 70%); }
91    85%  { opacity: 1; background: radial-gradient(ellipse, #ff00cc33 0%, transparent 70%); }
92    100% { opacity: 0; }
93  }
94</style>
95</head>
96<body>
97  <div class="container">
98    <div class="glow"></div>
99    <div class="block" id="b1"></div>
100    <div class="block" id="b2"></div>
101    <div class="block" id="b3"></div>
102  </div>
103</body>
104</html>