← back to Neon Loaderscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Neon Loaders
A 0.68T 0.35
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 body {
9 margin: 0;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 background: radial-gradient(circle, #121212, #000000);
15 overflow: hidden;
16 }
17 .container {
18 display: flex;
19 align-items: center;
20 gap: 2px;
21 width: 100px;
22 height: 30px;
23 position: relative;
24 }
25 .box {
26 width: 30px;
27 height: 30px;
28 background: #555;
29 border-radius: 3px;
30 transition: background 0.5s ease;
31 position: relative;
32 }
33 .box:nth-child(1) {
34 background: #ff0080;
35 }
36 .box:nth-child(2) {
37 background: #8000ff;
38 }
39 .box:nth-child(3) {
40 background: #00bfff;
41 }
42 .box:nth-child(1) {
43 animation: pulse 1s ease-in-out 0.3s forwards;
44 }
45 .box:nth-child(2) {
46 animation: pulse 1s ease-in-out 0.8s forwards;
47 }
48 .box:nth-child(3) {
49 animation: pulse 1s ease-in-out 1.3s forwards;
50 }
51 @keyframes pulse {
52 0% {
53 background: #555;
54 box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
55 }
56 50% {
57 background: #ff0080;
58 box-shadow: 0 0 20px rgba(255, 0, 128, 0.8);
59 }
60 100% {
61 background: #ff0080;
62 box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
63 }
64 }
65</style>
66</head>
67<body>
68 <div class="container">
69 <div class="box"></div>
70 <div class="box"></div>
71 <div class="box"></div>
72 </div>
73</body>
74</html>