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.67T 0.18
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>Neon Pulse 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 0%, #000 100%);
15    overflow: hidden;
16  }
17
18  .pulse-container {
19    width: 120px;
20    height: 30px;
21    position: relative;
22    animation: pulse 2s ease-in-out infinite alternate;
23  }
24
25  .pulse-bar {
26    position: absolute;
27    top: 0;
28    left: 0;
29    width: 100%;
30    height: 100%;
31    background: linear-gradient(to right, #ff00ff, #00ffff);
32    border-radius: 15px;
33    opacity: 0.7;
34    animation: move 2s ease-in-out infinite alternate;
35  }
36
37  @keyframes pulse {
38    0% {
39      transform: scale(0.8);
40    }
41    100% {
42      transform: scale(1.2);
43    }
44  }
45
46  @keyframes move {
47    0% {
48      background: linear-gradient(to right, #ff00ff, #00ffff);
49      transform: translateX(-10px);
50    }
51    50% {
52      background: linear-gradient(to right, #00ffff, #ff00ff);
53      transform: translateX(10px);
54    }
55    100% {
56      background: linear-gradient(to right, #ff00ff, #00ffff);
57      transform: translateX(-10px);
58    }
59  }
60</style>
61</head>
62<body>
63  <div class="pulse-container">
64    <div class="pulse-bar"></div>
65  </div>
66</body>
67</html>