animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

Qwen3-VL-8B-Instruct

Animated Concepts #3

A 0.81T 0.19
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    background-color: #121212;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .container {
17    position: relative;
18    width: 100px;
19    height: 100px;
20  }
21  .ball {
22    width: 20px;
23    height: 20px;
24    background-color: #e67e80;
25    border-radius: 50%;
26    position: absolute;
27    top: 50%;
28    left: 50%;
29    transform: translate(-50%, -50%);
30    animation: bounce 1s ease-in-out infinite alternate;
31  }
32  .base {
33    width: 40px;
34    height: 4px;
35    background-color: #e67e80;
36    position: absolute;
37    bottom: -2px;
38    left: 50%;
39    transform: translateX(-50%);
40    animation: pulse 1s ease-in-out infinite alternate;
41  }
42  @keyframes bounce {
43    0% {
44      transform: translate(-50%, -50%) scale(1);
45    }
46    100% {
47      transform: translate(-50%, -50%) scale(1.1);
48    }
49  }
50  @keyframes pulse {
51    0% {
52      transform: translateX(-50%) scaleX(1);
53    }
54    100% {
55      transform: translateX(-50%) scaleX(1.1);
56    }
57  }
58</style>
59</head>
60<body>
61<div class="container">
62  <div class="ball"></div>
63  <div class="base"></div>
64</div>
65</body>
66</html>