animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Spiral Tower

model output

Qwen3-VL-8B-Instruct

Spiral Tower

A 0.50T 0.22
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>3D Cube Animation</title>
6    <style>
7        body {
8            display: flex;
9            justify-content: center;
10            align-items: center;
11            height: 100vh;
12            background: #f9f9f9;
13            margin: 0;
14        }
15        .cube {
16            width: 100px;
17            height: 100px;
18            position: relative;
19            transform-style: preserve-3d;
20            animation: rotate 4s infinite linear;
21        }
22        .face {
23            position: absolute;
24            width: 100px;
25            height: 100px;
26            background: #8a9a9a;
27            transform-origin: center;
28            backface-visibility: visible;
29        }
30        .front {
31            transform: translateZ(50px);
32        }
33        .back {
34            transform: rotateY(180deg) translateZ(50px);
35        }
36        .right {
37            transform: rotateY(90deg) translateZ(50px);
38        }
39        .left {
40            transform: rotateY(-90deg) translateZ(50px);
41        }
42        .top {
43            transform: rotateX(90deg) translateZ(50px);
44        }
45        .bottom {
46            transform: rotateX(-90deg) translateZ(50px);
47        }
48        .stripes {
49            position: absolute;
50            top: 0;
51            left: 0;
52            width: 100%;
53            height: 100%;
54            background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 100%);
55            transform: rotate(0deg);
56            animation: stripeRotate 4s infinite linear;
57        }
58        @keyframes rotate {
59            0% { transform: rotateX(0deg) rotateY(0deg); }
60            25% { transform: rotateX(0deg) rotateY(90deg); }
61            50% { transform: rotateX(0deg) rotateY(180deg); }
62            75% { transform: rotateX(0deg) rotateY(270deg); }
63            100% { transform: rotateX(0deg) rotateY(360deg); }
64        }
65        @keyframes stripeRotate {
66            0% { transform: rotate(0deg); }
67            25% { transform: rotate(90deg); }
68            50% { transform: rotate(180deg); }
69            75% { transform: rotate(270deg); }
70            100% { transform: rotate(360deg); }
71        }
72    </style>
73</head>
74<body>
75    <div class="cube">
76        <div class="face front"></div>
77        <div class="face back"></div>
78        <div class="face right"></div>
79        <div class="face left"></div>
80        <div class="face top"></div>
81        <div class="face bottom"></div>
82        <div class="stripes"></div>
83    </div>
84</body>
85</html>