← back to Wave Text Animation(Real PURE CSS)compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Wave Text Animation(Real PURE CSS)
A 0.77T 0.18
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>