model output
Gemini 3 Flash Preview

Only CSS: Busy Box
A 0.70T 0.17
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>3D Grid Wave Animation</title>
7    <style>
8        :root {
9            --bg-color: #f88e8e;
10            --line-color: #2c4c4c;
11            --grid-size: 8;
12            --cell-size: 45px;
13            --anim-speed: 3s;
14        }
15
16        * {
17            box-sizing: border-box;
18        }
19
20        body {
21            margin: 0;
22            padding: 0;
23            display: flex;
24            justify-content: center;
25            align-items: center;
26            min-height: 100vh;
27            background-color: var(--bg-color);
28            overflow: hidden;
29        }
30
31        /* The scene creates the perspective depth */
32        .scene {
33            perspective: 1000px;
34            width: calc(var(--grid-size) * var(--cell-size));
35            height: calc(var(--grid-size) * var(--cell-size));
36        }
37
38        /* The grid container is tilted to match the video's 3D perspective */
39        .grid {
40            display: grid;
41            grid-template-columns: repeat(var(--grid-size), 1fr);
42            grid-template-rows: repeat(var(--grid-size), 1fr);
43            width: 100%;
44            height: 100%;
45            transform-style: preserve-3d;
46            transform: rotateX(15deg) rotateY(-25deg);
47        }
48
49        /* Each individual square */
50        .cell {
51            width: var(--cell-size);
52            height: var(--cell-size);
53            border: 1px solid var(--line-color);
54            background-color: transparent;
55            transform-style: preserve-3d;
56            /* Animation timing matches the snappy yet fluid movement in the video */
57            animation: flip var(--anim-speed) cubic-bezier(0.65, 0, 0.35, 1) infinite;
58        }
59
60        /* 
61           The animation performs a full 360 rotation on the X-axis.
62           The pause at the end (70-100%) ensures the wave has time to propagate 
63           and stay still before starting the next cycle.
64        */
65        @keyframes flip {
66            0% {
67                transform: rotateX(0deg);
68            }
69            60%, 100% {
70                transform: rotateX(360deg);
71            }
72        }
73    </style>
74</head>
75<body>
76
77    <div class="scene">
78        <div class="grid" id="grid">
79            <!-- Cells generated by JavaScript -->
80        </div>
81    </div>
82
83    <script>
84        const gridContainer = document.getElementById('grid');
85        const size = 8; // 8x8 grid as observed in the video
86
87        /**
88         * We generate the cells and calculate a delay based on the sum of 
89         * coordinates (row + col) to create the diagonal wave effect.
90         */
91        for (let row = 0; row < size; row++) {
92            for (let col = 0; col < size; col++) {
93                const cell = document.createElement('div');
94                cell.className = 'cell';
95                
96                // delay multiplier (0.12s) controls the "tightness" of the wave
97                const delay = (row + col) * 0.12;
98                cell.style.animationDelay = `${delay}s`;
99                
100                gridContainer.appendChild(cell);
101            }
102        }
103    </script>
104</body>
105</html>