model output
Claude Sonnet 4.6

Only CSS: Busy Box
A 0.69T 0.27
1Looking at the animation, I can see a 9x9 grid of squares that undergoes a complex 3D rotation/wave animation. The grid starts flat, then rows of squares rotate/flip in sequence creating a wave effect that travels through the grid, with each row rotating around different axes at different times.
2
3Let me analyze the key aspects:
4- Pink background (~#F07070 / salmon pink)
5- Teal/dark cyan grid lines (~#2D6B6B)
6- 9x9 grid of squares
7- Wave animation where rows flip/rotate sequentially
8- The animation creates a 3D perspective effect
9- Continuous looping animation
10
11<!DOCTYPE html>
12<html>
13<head>
14<style>
15  * { margin: 0; padding: 0; box-sizing: border-box; }
16  body {
17    background: #f07878;
18    width: 100vw; height: 100vh;
19    display: flex; align-items: center; justify-content: center;
20    overflow: hidden;
21  }
22  canvas { display: block; }
23</style>
24</head>
25<body>
26<canvas id="c"></canvas>
27<script>
28const canvas = document.getElementById('c');
29const ctx = canvas.getContext('2d');
30canvas.width = window.innerWidth;
31canvas.height = window.innerHeight;
32
33const COLS = 9, ROWS = 9;
34const CELL = 55;
35const GAP = 3;
36const STEP = CELL + GAP;
37const COLOR = '#2d6b6b';
38
39// Grid center
40const cx = canvas.width / 2 - 30;
41const cy = canvas.height / 2;
42
43// Each cell has its own rotation state
44// Animation: wave of rotations sweeping through the grid
45// The wave travels diagonally
46
47const DURATION = 4000; // ms per full cycle
48
49function project(x, y, z) {
50  // Simple perspective projection
51  const fov = 600;
52  const scale = fov / (fov + z);
53  return {
54    x: cx + x * scale,
55    y: cy + y * scale,
56    s: scale
57  };
58}
59
60function drawCell(corners) {
61  ctx.beginPath();
62  ctx.moveTo(corners[0].x, corners[0].y);
63  for (let i = 1; i < 4; i++) {
64    ctx.lineTo(corners[i].x, corners[i].y);
65  }
66  ctx.closePath();
67  ctx.strokeStyle = COLOR;
68  ctx.lineWidth = 1.5;
69  ctx.stroke();
70}
71
72function getCellCorners(col, row, rotX, rotY, rotZ) {
73  // Base position of cell center in 3D
74  const bx = (col - (COLS-1)/2) * STEP;
75  const by = (row - (ROWS-1)/2) * STEP;
76  const bz = 0;
77
78  // Half size
79  const h = CELL / 2;
80
81  // Local corners before rotation
82  const local = [
83    [-h, -h, 0],
84    [ h, -h, 0],
85    [ h,  h, 0],
86    [-h,  h, 0]
87  ];
88
89  // Apply cell rotation (around cell center)
90  const rotated = local.map(([lx, ly, lz]) => {
91    // rotX: rotation around X axis
92    let x = lx, y = ly, z = lz;
93    
94    // Rotate around Z
95    if (rotZ !== 0) {
96      const cz = Math.cos(rotZ), sz = Math.sin(rotZ);
97      [x, y] = [x*cz - y*sz, x*sz + y*cz];
98    }
99    // Rotate around X
100    if (rotX !== 0) {
101      const cx2 = Math.cos(rotX), sx = Math.sin(rotX);
102      [y, z] = [y*cx2 - z*sx, y*sx + z*cx2];
103    }
104    // Rotate around Y
105    if (rotY !== 0) {
106      const cy2 = Math.cos(rotY), sy = Math.sin(rotY);
107      [x, z] = [x*cy2 + z*sy, -x*sy + z*cy2];
108    }
109    
110    return [bx + x, by + y, bz + z];
111  });
112
113  // Project to 2D
114  return rotated.map(([x, y, z]) => project(x, y, z));
115}
116
117let startTime = null;
118
119function easeInOut(t) {
120  return t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
121}
122
123function animate(ts) {
124  if (!startTime) startTime = ts;
125  const elapsed = (ts - startTime) % DURATION;
126  const t = elapsed / DURATION; // 0 to 1
127
128  ctx.clearRect(0, 0, canvas.width, canvas.height);
129  ctx.fillStyle = '#f07878';
130  ctx.fillRect(0, 0, canvas.width, canvas.height);
131
132  // Wave parameter: each cell gets a phase based on position
133  // The wave sweeps diagonally (col + row) 
134  for (let row = 0; row < ROWS; row++) {
135    for (let col = 0; col < COLS; col++) {
136      // Phase offset based on position - wave travels from top-left to bottom-right
137      // but looking at frames, it seems row-based wave
138      const phase = (row / ROWS + col / COLS * 0.3);
139      
140      // Current animation phase for this cell
141      let cellT = (t - phase * 0.8 + 2) % 1;
142      
143      // Rotation angles
144      let rotX = 0, rotY = 0, rotZ = 0;
145      
146      // Each cell does a full rotation cycle
147      const angle = cellT * Math.PI * 2;
148      
149      // Rotate around Y axis (creates the flip effect)
150      rotY = angle;
151      // Add some X rotation for the wave look
152      rotX = Math.sin(angle) * 0.3;
153      
154      const corners = getCellCorners(col, row, rotX, rotY, rotZ);
155      drawCell(corners);
156    }
157  }
158
159  requestAnimationFrame(animate);
160}
161
162requestAnimationFrame(animate);
163</script>
164</body>
165</html>