animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Screw 2

model output

Qwen3-VL-8B-Instruct

Only CSS: Screw 2

A 0.63T 0.28
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>Screw Animation</title>
7    <style>
8        body {
9            display: flex;
10            justify-content: center;
11            align-items: center;
12            height: 100vh;
13            background-color: #1a1a2e;
14            overflow: hidden;
15        }
16        .screw-text {
17            font-family: 'Courier New', monospace;
18            font-size: 120px;
19            font-weight: bold;
20            color: white;
21            text-transform: uppercase;
22            letter-spacing: 10px;
23            position: relative;
24            animation: spin 1.5s ease-in-out forwards;
25        }
26        @keyframes spin {
27            0% {
28                transform: rotate(0deg);
29            }
30            50% {
31                transform: rotate(180deg);
32            }
33            100% {
34                transform: rotate(360deg);
35            }
36        }
37        .screw-text::before {
38            content: "SCREW";
39            position: absolute;
40            top: 0;
41            left: 0;
42            width: 100%;
43            height: 100%;
44            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
45            animation: pulse 1.5s ease-in-out infinite alternate;
46        }
47        @keyframes pulse {
48            0% {
49                transform: scale(1);
50            }
51            100% {
52                transform: scale(1.1);
53            }
54        }
55    </style>
56</head>
57<body>
58    <div class="screw-text">SCREW</div>
59</body>
60</html>