animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Neon Loaders

model output

Qwen3-VL-8B-Instruct

Neon Loaders

A 0.68T 0.35
compare with ground truth →
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>