← back to Wave Text Animation(Real PURE CSS)compare with ground truth →
model output
LLaMA 4 Scout
Wave Text Animation(Real PURE CSS)
A 0.61T 0.19
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</title>
7 <style>
8 body {
9 background-color: black;
10 font-family: monospace;
11 overflow: hidden;
12 }
13 #text {
14 position: absolute;
15 top: 50%;
16 left: 50%;
17 transform: translate(-50%, -50%);
18 color: white;
19 white-space: nowrap;
20 }
21 </style>
22</head>
23<body>
24 <div id="text">LAOLA_W33LL3_IN_3_2_1_!</div>
25
26 <script>
27 const text = document.getElementById('text');
28 let angle = 0;
29 let distance = 0;
30
31 function update() {
32 angle += 0.01;
33 distance += 0.5;
34 text.style.transform = `translate(-50%, -50%) rotate(${angle}rad) translateX(${distance}px)`;
35 if (distance > 300) {
36 distance = -300;
37 angle *= -1;
38 }
39 requestAnimationFrame(update);
40 }
41 update();
42 </script>
43</body>
44</html>