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

model output

LLaMA 4 Scout

Wave Text Animation(Real PURE CSS)

A 0.61T 0.19
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</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>