animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Wave Text Animation(Real PURE CSS)

model output

Qwen3-VL-8B-Instruct

Wave Text Animation(Real PURE CSS)

A 0.77T 0.18
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>LAOLA_W33LL3_IN_3_2_1_!</title>
7    <style>
8        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16            font-family: monospace;
17            color: white;
18        }
19        .text {
20            font-size: 24px;
21            letter-spacing: 2px;
22            animation: type 3s steps(1) 0s 1 normal forwards, pulse 1s ease-in-out 0s 1 normal forwards;
23        }
24        @keyframes type {
25            0% { width: 0; }
26            100% { width: 100%; }
27        }
28        @keyframes pulse {
29            0%, 100% { transform: scale(1); }
30            50% { transform: scale(1.1); }
31        }
32    </style>
33</head>
34<body>
35    <div class="text" id="text">LAOLA_W33LL3_IN_3_2_1_!</div>
36
37    <script>
38        const text = document.getElementById('text');
39        const textContent = text.textContent;
40        let i = 0;
41
42        function typeWriter() {
43            if (i < textContent.length) {
44                text.textContent = textContent.substring(0, i + 1);
45                i++;
46                setTimeout(typeWriter, 100);
47            }
48        }
49
50        setTimeout(typeWriter, 1000);
51    </script>
52</body>
53</html>