← back to 4 'counter rotation' effectscompare with ground truth →
model output
Gemini 3 Flash Preview
4 'counter rotation' effects
A 0.70T 0.31
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>Square Grid Loader Animation</title>
7 <style>
8 :root {
9 --bg-color: #1a1a1a;
10 --red: #9b1b30;
11 --dark: #16303f;
12 --white: #ffffff;
13 --size: 40px;
14 --gap: 12px;
15 --animation-duration: 3.5s;
16 }
17
18 body {
19 margin: 0;
20 height: 100vh;
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 background-color: var(--bg-color);
25 overflow: hidden;
26 }
27
28 /* The container handles the 45-degree tilt and the continuous rotation */
29 .loader-container {
30 position: relative;
31 width: calc(var(--size) * 3 + var(--gap) * 2);
32 height: calc(var(--size) * 3 + var(--gap) * 2);
33 transform: rotate(45deg);
34 animation: main-rotate var(--animation-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
35 }
36
37 /* Each square is positioned absolutely based on a 3x3 coordinate system */
38 .square {
39 position: absolute;
40 width: var(--size);
41 height: var(--size);
42 border-radius: 8px;
43 /* Animation for collapsing into a line and expanding back */
44 animation: movement var(--animation-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
45 }
46
47 /* Color and Grid Positioning */
48 /* Corners: Dark Blue */
49 .s1 { background-color: var(--dark); --target-x: 0; --target-y: 0; }
50 .s3 { background-color: var(--dark); --target-x: 2; --target-y: 0; }
51 .s7 { background-color: var(--dark); --target-x: 0; --target-y: 2; }
52 .s9 { background-color: var(--dark); --target-x: 2; --target-y: 2; }
53
54 /* Edges: Red */
55 .s2 { background-color: var(--red); --target-x: 1; --target-y: 0; }
56 .s4 { background-color: var(--red); --target-x: 0; --target-y: 1; }
57 .s6 { background-color: var(--red); --target-x: 2; --target-y: 1; }
58 .s8 { background-color: var(--red); --target-x: 1; --target-y: 2; }
59
60 /* Center: White */
61 .s5 { background-color: var(--white); --target-x: 1; --target-y: 1; z-index: 2; }
62
63 @keyframes movement {
64 0%, 100% {
65 /* Start and end at grid positions */
66 left: calc(var(--target-x) * (var(--size) + var(--gap)));
67 top: calc(var(--target-y) * (var(--size) + var(--gap)));
68 }
69 45%, 55% {
70 /* Collapse into a horizontal line (relative to the rotated container) */
71 /* All Y coordinates move to the middle row (index 1) */
72 left: calc(var(--target-x) * (var(--size) + var(--gap)));
73 top: calc(1 * (var(--size) + var(--gap)));
74 }
75 }
76
77 @keyframes main-rotate {
78 0% {
79 transform: rotate(45deg);
80 }
81 /* Slows down slightly while in the line formation for emphasis */
82 45%, 55% {
83 transform: rotate(225deg);
84 }
85 100% {
86 transform: rotate(405deg);
87 }
88 }
89
90 /* Subtle scaling effect observed in the video transition */
91 .square {
92 transition: transform 0.3s ease;
93 }
94
95 @keyframes scale-pulse {
96 0%, 100% { transform: scale(1); }
97 50% { transform: scale(0.9); }
98 }
99
100 .loader-container div {
101 animation-name: movement, scale-pulse;
102 animation-duration: var(--animation-duration);
103 animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
104 animation-iteration-count: infinite;
105 }
106 </style>
107</head>
108<body>
109
110 <div class="loader-container">
111 <!-- 3x3 Grid of Squares -->
112 <div class="square s1"></div>
113 <div class="square s2"></div>
114 <div class="square s3"></div>
115 <div class="square s4"></div>
116 <div class="square s5"></div>
117 <div class="square s6"></div>
118 <div class="square s7"></div>
119 <div class="square s8"></div>
120 <div class="square s9"></div>
121 </div>
122
123</body>
124</html>