model output
LLaMA 4 Scout

Only CSS: Busy Box
A 0.42T 0.13
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>Animation</title>
7    <style>
8        .grid {
9            position: relative;
10            width: 300px;
11            height: 300px;
12            border: 1px solid black;
13            display: grid;
14            grid-template-columns: repeat(7, 1fr);
15            grid-template-rows: repeat(7, 1fr);
16            gap: 1px;
17        }
18
19        .box {
20            border: 1px solid black;
21        }
22
23        @keyframes fall {
24            0% {
25                transform: rotateX(0deg) translateZ(0);
26            }
27            100% {
28                transform: rotateX(90deg) translateZ(-100px);
29            }
30        }
31
32        .fall {
33            animation: fall 1s;
34        }
35    </style>
36</head>
37<body>
38    <div class="grid" id="grid"></div>
39
40    <script>
41        let grid = document.getElementById('grid');
42        for (let i = 0; i < 49; i++) {
43            let box = document.createElement('div');
44            box.classList.add('box');
45            grid.appendChild(box);
46        }
47
48        let boxes = grid.children;
49        let delay = 0;
50        for (let i = 0; i < boxes.length; i++) {
51            boxes[i].style.animationDelay = delay + 's';
52            delay += 0.05;
53            if (i % 7 === 0 && i !== 0) {
54                delay += 0.2;
55            }
56        }
57
58        grid.style.perspective = '1000px';
59        grid.style.perspectiveOrigin = 'center';
60    </script>
61</body>
62</html>