animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Codevember #6 Money Storm

model output

LLaMA 4 Scout

Only CSS: Codevember #6 Money Storm

A 0.52T 0.21
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>Money Falling</title>
7    <style>
8        body {
9            background-color: black;
10            margin: 0;
11            padding: 0;
12            overflow: hidden;
13        }
14        .money {
15            position: absolute;
16            width: 50px;
17            height: 20px;
18            background-color: #ccc;
19            color: green;
20            font-size: 14px;
21            text-align: center;
22            line-height: 20px;
23            border-radius: 5px;
24        }
25    </style>
26</head>
27<body>
28    <script>
29        const moneyCount = 100;
30        const moneyElements = [];
31
32        for (let i = 0; i < moneyCount; i++) {
33            const moneyElement = document.createElement('div');
34            moneyElement.classList.add('money');
35            moneyElement.textContent = '¥10,000';
36            moneyElement.style.left = `${Math.random() * 100}%`;
37            moneyElement.style.top = `${Math.random() * 100}%`;
38            document.body.appendChild(moneyElement);
39            moneyElements.push(moneyElement);
40        }
41
42        function update() {
43            moneyElements.forEach((moneyElement, index) => {
44                const randomX = Math.random() * 2 - 1;
45                const randomY = Math.random() * 2 - 1;
46                moneyElement.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`;
47            });
48            requestAnimationFrame(update);
49        }
50
51        update();
52    </script>
53</body>
54</html>