← back to 4 'counter rotation' effectscompare with ground truth →
model output
Claude Sonnet 4.6
4 'counter rotation' effects
A 0.65T 0.29
1Looking at the animation, I can see a 3x3 grid of colored squares (dark blue, crimson/red, and white center) that alternates between a full 3x3 grid layout and a collapsed single-column (5 squares vertical) layout. The animation loops between these two states.
2
3The grid pattern:
4- Row 1: blue, red, blue
5- Row 2: red, white, red
6- Row 3: blue, red, blue
7
8When collapsed, it shows a single column of 5 squares (blue, red, white/gray, red, blue).
9
10<!DOCTYPE html>
11<html lang="en">
12<head>
13<meta charset="UTF-8">
14<meta name="viewport" content="width=device-width, initial-scale=1.0">
15<title>Grid Animation</title>
16<style>
17 * { margin: 0; padding: 0; box-sizing: border-box; }
18
19 body {
20 background-color: #1e1e1e;
21 width: 100vw;
22 height: 100vh;
23 overflow: hidden;
24 }
25
26 .container {
27 position: absolute;
28 top: 80px;
29 left: 140px;
30 }
31
32 .grid {
33 display: grid;
34 grid-template-columns: repeat(3, 22px);
35 grid-template-rows: repeat(3, 22px);
36 gap: 4px;
37 animation: gridToggle 2s ease-in-out infinite;
38 }
39
40 .cell {
41 width: 22px;
42 height: 22px;
43 border-radius: 5px;
44 }
45
46 /* Colors: positions in 3x3 grid */
47 /* Row 1: blue, red, blue */
48 /* Row 2: red, white, red */
49 /* Row 3: blue, red, blue */
50
51 .blue { background-color: #1a4a6b; }
52 .red { background-color: #9b0030; }
53 .white { background-color: #e8e8e8; }
54
55 /* Individual cell animations - columns 1 and 3 collapse to center */
56 .col1 { animation: collapseLeft 2s ease-in-out infinite; }
57 .col3 { animation: collapseRight 2s ease-in-out infinite; }
58 .col2 { animation: none; }
59
60 @keyframes collapseLeft {
61 0%, 10% { transform: translateX(0px); opacity: 1; }
62 30%, 70% { transform: translateX(26px); opacity: 0; }
63 90%, 100% { transform: translateX(0px); opacity: 1; }
64 }
65
66 @keyframes collapseRight {
67 0%, 10% { transform: translateX(0px); opacity: 1; }
68 30%, 70% { transform: translateX(-26px); opacity: 0; }
69 90%, 100% { transform: translateX(0px); opacity: 1; }
70 }
71
72 /* Row spacing animation */
73 .row1 { animation: rowSpread1 2s ease-in-out infinite; }
74 .row2 { animation: none; }
75 .row3 { animation: rowSpread3 2s ease-in-out infinite; }
76
77 @keyframes rowSpread1 {
78 0%, 10% { transform: translateY(0px); }
79 30%, 70% { transform: translateY(26px); }
80 90%, 100% { transform: translateY(0px); }
81 }
82
83 @keyframes rowSpread3 {
84 0%, 10% { transform: translateY(0px); }
85 30%, 70% { transform: translateY(-26px); }
86 90%, 100% { transform: translateY(0px); }
87 }
88
89 .cell.col1.row1 { animation: combinedTL 2s ease-in-out infinite; }
90 .cell.col3.row1 { animation: combinedTR 2s ease-in-out infinite; }
91 .cell.col1.row3 { animation: combinedBL 2s ease-in-out infinite; }
92 .cell.col3.row3 { animation: combinedBR 2s ease-in-out infinite; }
93 .cell.col2.row1 { animation: combinedTC 2s ease-in-out infinite; }
94 .cell.col2.row3 { animation: combinedBC 2s ease-in-out infinite; }
95 .cell.col1.row2 { animation: combinedML 2s ease-in-out infinite; }
96 .cell.col3.row2 { animation: combinedMR 2s ease-in-out infinite; }
97
98 @keyframes combinedTL {
99 0%,10% { transform: translate(0,0); opacity:1; }
100 30%,70% { transform: translate(26px, 26px); opacity:0; }
101 90%,100%{ transform: translate(0,0); opacity:1; }
102 }
103 @keyframes combinedTR {
104 0%,10% { transform: translate(0,0); opacity:1; }
105 30%,70% { transform: translate(-26px, 26px); opacity:0; }
106 90%,100%{ transform: translate(0,0); opacity:1; }
107 }
108 @keyframes combinedBL {
109 0%,10% { transform: translate(0,0); opacity:1; }
110 30%,70% { transform: translate(26px, -26px); opacity:0; }
111 90%,100%{ transform: translate(0,0); opacity:1; }
112 }
113 @keyframes combinedBR {
114 0%,10% { transform: translate(0,0); opacity:1; }
115 30%,70% { transform: translate(-26px, -26px); opacity:0; }
116 90%,100%{ transform: translate(0,0); opacity:1; }
117 }
118 @keyframes combinedTC {
119 0%,10% { transform: translateY(0); }
120 30%,70% { transform: translateY(26px); }
121 90%,100%{ transform: translateY(0); }
122 }
123 @keyframes combinedBC {
124 0%,10% { transform: translateY(0); }
125 30%,70% { transform: translateY(-26px); }
126 90%,100%{ transform: translateY(0); }
127 }
128 @keyframes combinedML {
129 0%,10% { transform: translateX(0); opacity:1; }
130 30%,70% { transform: translateX(26px); opacity:0; }
131 90%,100%{ transform: translateX(0); opacity:1; }
132 }
133 @keyframes combinedMR {
134 0%,10% { transform: translateX(0); opacity:1; }
135 30%,70% { transform: translateX(-26px); opacity:0; }
136 90%,100%{ transform: translateX(0); opacity:1; }
137 }
138</style>
139</head>
140<body>
141<div class="container">
142 <div class="grid">
143 <div class="cell blue col1 row1"></div>
144 <div class="cell red col2 row1"></div>
145 <div class="cell blue col3 row1"></div>
146 <div class="cell red col1 row2"></div>
147 <div class="cell white col2 row2"></div>
148 <div class="cell red col3 row2"></div>
149 <div class="cell blue col1 row3"></div>
150 <div class="cell red col2 row3"></div>
151 <div class="cell blue col3 row3"></div>
152 </div>
153</div>
154</body>
155</html>