model output
Qwen3-VL-8B-Instruct

Neon Loaders
A 0.59T 0.39
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>Three Color Circles Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background: radial-gradient(circle, #000 0%, #1a1a1a 100%);
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18
19  .container {
20    position: relative;
21    width: 200px;
22    height: 200px;
23  }
24
25  .circle {
26    position: absolute;
27    width: 30px;
28    height: 30px;
29    border-radius: 50%;
30    transition: transform 0.5s ease-in-out;
31    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
32  }
33
34  .circle:nth-child(1) {
35    left: 50px;
36    background: #ff0080;
37  }
38
39  .circle:nth-child(2) {
40    left: 80px;
41    background: #8000ff;
42  }
43
44  .circle:nth-child(3) {
45    left: 110px;
46    background: #00ffff;
47  }
48
49  .circle:nth-child(1) {
50    animation: pulse 1.5s ease-in-out infinite alternate;
51  }
52
53  .circle:nth-child(2) {
54    animation: pulse 1.5s ease-in-out infinite alternate 0.2s;
55  }
56
57  .circle:nth-child(3) {
58    animation: pulse 1.5s ease-in-out infinite alternate 0.4s;
59  }
60
61  @keyframes pulse {
62    0% {
63      transform: scale(1);
64    }
65    100% {
66      transform: scale(1.2);
67    }
68  }
69</style>
70</head>
71<body>
72  <div class="container">
73    <div class="circle"></div>
74    <div class="circle"></div>
75    <div class="circle"></div>
76  </div>
77
78  <script>
79    // Add glow effect on hover
80    const circles = document.querySelectorAll('.circle');
81    circles.forEach(circle => {
82      circle.addEventListener('mouseenter', () => {
83        circle.style.boxShadow = '0 0 20px rgba(255, 255, 255, 0.8)';
84      });
85      circle.addEventListener('mouseleave', () => {
86        circle.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.3)';
87      });
88    });
89  </script>
90</body>
91</html>