model output
Claude Sonnet 4.6

4 'counter rotation' effects
A 0.78T 0.38
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>Grid Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #1e1e1e;
12    width: 100vw;
13    height: 100vh;
14    overflow: hidden;
15  }
16
17  .grid-wrapper {
18    position: absolute;
19    top: 120px;
20    left: 145px;
21    animation: spin 2s ease-in-out infinite;
22    transform-origin: center center;
23  }
24
25  @keyframes spin {
26    0%   { transform: rotate(0deg); }
27    50%  { transform: rotate(45deg); }
28    100% { transform: rotate(0deg); }
29  }
30
31  .grid {
32    display: grid;
33    grid-template-columns: repeat(3, 22px);
34    grid-template-rows: repeat(3, 22px);
35    gap: 4px;
36  }
37
38  .cell {
39    width: 22px;
40    height: 22px;
41    border-radius: 5px;
42  }
43
44  .blue  { background-color: #1f5f7a; }
45  .red   { background-color: #9b0040; }
46  .white { background-color: #e8e8e8; }
47</style>
48</head>
49<body>
50
51<div class="grid-wrapper">
52  <div class="grid">
53    <!-- Row 1 -->
54    <div class="cell blue"></div>
55    <div class="cell red"></div>
56    <div class="cell blue"></div>
57    <!-- Row 2 -->
58    <div class="cell red"></div>
59    <div class="cell white"></div>
60    <div class="cell red"></div>
61    <!-- Row 3 -->
62    <div class="cell blue"></div>
63    <div class="cell red"></div>
64    <div class="cell blue"></div>
65  </div>
66</div>
67
68</body>
69</html>