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

model output

Qwen3-VL-8B-Instruct

Rotating text

A 0.79T 0.31
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>Nachos Animation</title>
7    <style>
8        body {
9            display: flex;
10            justify-content: center;
11            align-items: center;
12            height: 100vh;
13            margin: 0;
14            background-color: white;
15            font-family: Arial, sans-serif;
16        }
17        .text {
18            font-size: 24px;
19            font-weight: bold;
20            color: black;
21            position: relative;
22            animation: changeText 3s ease-in-out;
23        }
24        @keyframes changeText {
25            0% {
26                content: "Nachos are tasty.";
27                color: black;
28            }
29            33% {
30                content: "Nachos are wonderful.";
31                color: blue;
32            }
33            66% {
34                content: "Nachos are fancy.";
35                color: red;
36            }
37            100% {
38                content: "Nachos are fancy.";
39                color: red;
40            }
41        }
42    </style>
43</head>
44<body>
45    <div class="text">Nachos are tasty.</div>
46
47    <script>
48        // This script is not needed for the animation as it's purely CSS-driven
49    </script>
50</body>
51</html>