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

model output

Qwen3-VL-8B-Instruct

Loaders (WIP)

A 0.80T 0.27
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>Rotating Clock Animation</title>
7<style>
8  body {
9    background-color: #e64a19;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .clock {
17    width: 60px;
18    height: 60px;
19    border: 2px solid white;
20    border-radius: 50%;
21    position: relative;
22    animation: rotateClock 6s linear infinite;
23  }
24  .hand {
25    position: absolute;
26    top: 50%;
27    left: 50%;
28    transform-origin: 50% 50%;
29    width: 0;
30    height: 0;
31    border-left: 10px solid transparent;
32    border-right: 10px solid transparent;
33    border-top: 20px solid white;
34    z-index: 2;
35  }
36  .hour-hand {
37    transform: rotate(0deg);
38    animation: rotateHour 6s linear infinite;
39    border-top-color: #fff;
40    border-top-width: 15px;
41    border-left-width: 5px;
42    border-right-width: 5px;
43  }
44  .minute-hand {
45    transform: rotate(0deg);
46    animation: rotateMinute 6s linear infinite;
47    border-top-color: #fff;
48    border-top-width: 10px;
49    border-left-width: 3px;
50    border-right-width: 3px;
51  }
52  @keyframes rotateClock {
53    0% { transform: rotate(0deg); }
54    100% { transform: rotate(360deg); }
55  }
56  @keyframes rotateHour {
57    0% { transform: rotate(0deg); }
58    100% { transform: rotate(30deg); }
59  }
60  @keyframes rotateMinute {
61    0% { transform: rotate(0deg); }
62    100% { transform: rotate(360deg); }
63  }
64</style>
65</head>
66<body>
67  <div class="clock">
68    <div class="hand hour-hand"></div>
69    <div class="hand minute-hand"></div>
70  </div>
71</body>
72</html>