animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Retro Sine Wave 〰

model output

Qwen3-VL-8B-Instruct

Retro Sine Wave 〰

A 0.70T 0.32
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>Animated Lines</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background: linear-gradient(135deg, #2c2c3c, #3a3a4a);
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            overflow: hidden;
17        }
18        .container {
19            position: relative;
20            width: 200px;
21            height: 200px;
22        }
23        .line {
24            position: absolute;
25            background: linear-gradient(90deg, #ff6b6b, #ff8e53);
26            height: 2px;
27            border-radius: 1px;
28            transform-origin: center;
29            animation: pulse 2s ease-in-out infinite alternate;
30        }
31        @keyframes pulse {
32            0% {
33                transform: scale(1) rotate(0deg) translateX(0);
34                opacity: 0.5;
35            }
36            100% {
37                transform: scale(1.2) rotate(180deg) translateX(10px);
38                opacity: 1;
39            }
40        }
41        .line:nth-child(1) { width: 100px; top: 0; left: 50px; animation-delay: 0s; }
42        .line:nth-child(2) { width: 80px; top: 20px; left: 60px; animation-delay: 0.1s; }
43        .line:nth-child(3) { width: 60px; top: 40px; left: 70px; animation-delay: 0.2s; }
44        .line:nth-child(4) { width: 40px; top: 60px; left: 80px; animation-delay: 0.3s; }
45        .line:nth-child(5) { width: 20px; top: 80px; left: 90px; animation-delay: 0.4s; }
46        .line:nth-child(6) { width: 100px; top: 100px; left: 50px; animation-delay: 0.5s; }
47        .line:nth-child(7) { width: 80px; top: 120px; left: 60px; animation-delay: 0.6s; }
48        .line:nth-child(8) { width: 60px; top: 140px; left: 70px; animation-delay: 0.7s; }
49        .line:nth-child(9) { width: 40px; top: 160px; left: 80px; animation-delay: 0.8s; }
50        .line:nth-child(10) { width: 20px; top: 180px; left: 90px; animation-delay: 0.9s; }
51    </style>
52</head>
53<body>
54    <div class="container">
55        <div class="line"></div>
56        <div class="line"></div>
57        <div class="line"></div>
58        <div class="line"></div>
59        <div class="line"></div>
60        <div class="line"></div>
61        <div class="line"></div>
62        <div class="line"></div>
63        <div class="line"></div>
64        <div class="line"></div>
65    </div>
66</body>
67</html>