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.61T 0.26
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>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%, #222 100%);
15    overflow: hidden;
16  }
17  .bar {
18    width: 200px;
19    height: 20px;
20    background: linear-gradient(to right, #ff00ff, #0000ff);
21    border-radius: 10px;
22    position: relative;
23    animation: fill 2s ease-in-out forwards, colorChange 4s ease-in-out infinite;
24  }
25  @keyframes fill {
26    0% { width: 0; }
27    50% { width: 100%; }
28    100% { width: 0; }
29  }
30  @keyframes colorChange {
31    0%, 100% { background: linear-gradient(to right, #ff00ff, #0000ff); }
32    50% { background: linear-gradient(to right, #0000ff, #00ffff); }
33  }
34</style>
35</head>
36<body>
37  <div class="bar"></div>
38</body>
39</html>