← back to Only CSS: Busy Boxcompare with ground truth →
model output
GPT-5.4
Only CSS: Busy Box
A 0.82T 0.33
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" />
6<title>Tile Grid Wave Rotation</title>
7<style>
8 :root{
9 --bg:#ef878d;
10 --line:#0f6f72;
11 --cols:8;
12 --rows:8;
13 --cell:50px;
14 --gap:0px;
15 --stroke:2px;
16 --dur:7.2s;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family:sans-serif;
26 }
27
28 body{
29 display:grid;
30 place-items:center;
31 }
32
33 .scene{
34 width:100vw;
35 height:100vh;
36 display:grid;
37 place-items:center;
38 perspective:1200px;
39 perspective-origin:50% 50%;
40 background:var(--bg);
41 }
42
43 .board{
44 position:relative;
45 width:calc(var(--cols) * var(--cell));
46 height:calc(var(--rows) * var(--cell));
47 transform-style:preserve-3d;
48 animation: boardSpin var(--dur) linear infinite;
49 }
50
51 .tile{
52 position:absolute;
53 width:var(--cell);
54 height:var(--cell);
55 left:calc(var(--c) * var(--cell));
56 top:calc(var(--r) * var(--cell));
57 box-sizing:border-box;
58 border:var(--stroke) solid var(--line);
59 background:transparent;
60 transform-style:preserve-3d;
61 transform-origin:50% 50%;
62 animation: flap var(--dur) ease-in-out infinite;
63 animation-delay:var(--delay);
64 }
65
66 @keyframes boardSpin{
67 0% { transform:rotateY(0deg) rotateX(0deg); }
68 12% { transform:rotateY(-18deg) rotateX(8deg); }
69 24% { transform:rotateY(-42deg) rotateX(10deg); }
70 36% { transform:rotateY(-72deg) rotateX(4deg); }
71 50% { transform:rotateY(-90deg) rotateX(0deg); }
72 64% { transform:rotateY(-118deg) rotateX(-6deg); }
73 78% { transform:rotateY(-146deg) rotateX(-10deg); }
74 90% { transform:rotateY(-168deg) rotateX(-6deg); }
75 100% { transform:rotateY(-180deg) rotateX(0deg); }
76 }
77
78 @keyframes flap{
79 0%,100%{
80 transform:
81 translate3d(0,0,0)
82 rotateX(0deg)
83 rotateY(0deg)
84 rotateZ(0deg)
85 scale(1);
86 opacity:1;
87 }
88
89 10%{
90 transform:
91 translate3d(0,0,0)
92 rotateX(0deg)
93 rotateY(0deg)
94 rotateZ(0deg)
95 scale(1);
96 opacity:1;
97 }
98
99 22%{
100 transform:
101 translate3d(calc(var(--sx) * 10px), calc(var(--sy) * 8px), calc(var(--sz) * 40px))
102 rotateX(calc(var(--rx) * 55deg))
103 rotateY(calc(var(--ry) * 38deg))
104 rotateZ(calc(var(--rz) * 14deg))
105 scale(1);
106 opacity:1;
107 }
108
109 34%{
110 transform:
111 translate3d(calc(var(--sx) * 18px), calc(var(--sy) * 14px), calc(var(--sz) * 70px))
112 rotateX(calc(var(--rx) * 82deg))
113 rotateY(calc(var(--ry) * 58deg))
114 rotateZ(calc(var(--rz) * 18deg))
115 scale(1);
116 opacity:.98;
117 }
118
119 50%{
120 transform:
121 translate3d(calc(var(--sx) * 8px), calc(var(--sy) * 6px), calc(var(--sz) * 24px))
122 rotateX(calc(var(--rx) * 28deg))
123 rotateY(calc(var(--ry) * 18deg))
124 rotateZ(calc(var(--rz) * 8deg))
125 scale(1);
126 opacity:1;
127 }
128
129 66%{
130 transform:
131 translate3d(calc(var(--sx2) * 16px), calc(var(--sy2) * 12px), calc(var(--sz2) * 64px))
132 rotateX(calc(var(--rx2) * 76deg))
133 rotateY(calc(var(--ry2) * 52deg))
134 rotateZ(calc(var(--rz2) * 16deg))
135 scale(1);
136 opacity:.98;
137 }
138
139 82%{
140 transform:
141 translate3d(calc(var(--sx2) * 10px), calc(var(--sy2) * 8px), calc(var(--sz2) * 36px))
142 rotateX(calc(var(--rx2) * 42deg))
143 rotateY(calc(var(--ry2) * 26deg))
144 rotateZ(calc(var(--rz2) * 10deg))
145 scale(1);
146 opacity:1;
147 }
148 }
149</style>
150</head>
151<body>
152<div class="scene">
153 <div class="board" id="board"></div>
154</div>
155
156<script>
157 const board = document.getElementById('board');
158 const rows = 8, cols = 8;
159
160 for(let r=0;r<rows;r++){
161 for(let c=0;c<cols;c++){
162 const t = document.createElement('div');
163 t.className = 'tile';
164
165 const nx = (c/(cols-1))*2 - 1;
166 const ny = (r/(rows-1))*2 - 1;
167 const cx = c - (cols-1)/2;
168 const cy = r - (rows-1)/2;
169 const dist = Math.hypot(cx, cy);
170
171 const sx = (nx * 0.9).toFixed(3);
172 const sy = (ny * 0.9).toFixed(3);
173 const sz = (1 - dist/6).toFixed(3);
174
175 const sx2 = (-nx * 0.85 + ny * 0.15).toFixed(3);
176 const sy2 = (-ny * 0.85 - nx * 0.10).toFixed(3);
177 const sz2 = (0.7 - dist/8).toFixed(3);
178
179 const rx = (-ny).toFixed(3);
180 const ry = (nx).toFixed(3);
181 const rz = ((nx + ny) * 0.5).toFixed(3);
182
183 const rx2 = (ny * 0.9).toFixed(3);
184 const ry2 = (-nx * 0.9).toFixed(3);
185 const rz2 = ((ny - nx) * 0.45).toFixed(3);
186
187 const delay = ((r * 0.09 + c * 0.055) % 1.2).toFixed(3) + 's';
188
189 t.style.setProperty('--r', r);
190 t.style.setProperty('--c', c);
191 t.style.setProperty('--sx', sx);
192 t.style.setProperty('--sy', sy);
193 t.style.setProperty('--sz', sz);
194 t.style.setProperty('--sx2', sx2);
195 t.style.setProperty('--sy2', sy2);
196 t.style.setProperty('--sz2', sz2);
197 t.style.setProperty('--rx', rx);
198 t.style.setProperty('--ry', ry);
199 t.style.setProperty('--rz', rz);
200 t.style.setProperty('--rx2', rx2);
201 t.style.setProperty('--ry2', ry2);
202 t.style.setProperty('--rz2', rz2);
203 t.style.setProperty('--delay', delay);
204
205 board.appendChild(t);
206 }
207 }
208</script>
209</body>
210</html>