model output
Gemini 3 Flash Preview

4 'counter rotation' effects
A 0.75T 0.30
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>Rotating Grid Loader</title>
7  <style>
8    /* 
9      Analysis of the animation:
10      - The background is a very dark gray (#111).
11      - The loader consists of a 3x3 grid of rounded squares (squircles).
12      - Color palette: 
13        Red: #8e1a32
14        Blue: #142c44
15        White: #ffffff
16      - The grid pattern:
17        Row 1: Blue, Red, Blue
18        Row 2: Red, White, Red
19        Row 3: Blue, Red, Blue
20      - Animation:
21        The entire grid rotates in 45-degree steps.
22        It cycles from Diamond (45deg) to Square (0deg) to Diamond (-45deg).
23        Since the grid is 90-degree symmetric, -45deg is visually identical to 45deg, 
24        creating a continuous rotation effect.
25        There is a slight scale change to manage visual weight during rotation.
26    */
27
28    body {
29      margin: 0;
30      padding: 0;
31      height: 100vh;
32      display: flex;
33      justify-content: center;
34      align-items: center;
35      background-color: #111111;
36      overflow: hidden;
37    }
38
39    .loader-container {
40      /* Container to hold the rotating element */
41      position: relative;
42      width: 100px;
43      height: 100px;
44      display: flex;
45      justify-content: center;
46      align-items: center;
47    }
48
49    .grid {
50      display: grid;
51      grid-template-columns: repeat(3, 20px);
52      grid-template-rows: repeat(3, 20px);
53      gap: 6px;
54      /* Animation: 1.2s duration for a smooth, weighted feel */
55      animation: rotate-step 1.2s infinite ease-in-out;
56    }
57
58    .square {
59      width: 20px;
60      height: 20px;
61      border-radius: 4px;
62    }
63
64    /* Colors defined from video analysis */
65    .blue { background-color: #142c44; }
66    .red { background-color: #8e1a32; }
67    .white { background-color: #ffffff; }
68
69    @keyframes rotate-step {
70      /* 
71        Step-based rotation:
72        0-20%: Stay at Diamond (45deg)
73        20-50%: Transition to Square (0deg)
74        50-70%: Stay at Square (0deg)
75        70-100%: Transition to Diamond (-45deg)
76        
77        The scale(0.8) on 45deg prevents the "diamond" from looking too large 
78        relative to the square due to its diagonal width.
79      */
80      0%, 20% {
81        transform: rotate(45deg) scale(0.8);
82      }
83      50%, 70% {
84        transform: rotate(0deg) scale(1);
85      }
86      100% {
87        transform: rotate(-45deg) scale(0.8);
88      }
89    }
90  </style>
91</head>
92<body>
93
94  <div class="loader-container">
95    <div class="grid">
96      <!-- Row 1 -->
97      <div class="square blue"></div>
98      <div class="square red"></div>
99      <div class="square blue"></div>
100      
101      <!-- Row 2 -->
102      <div class="square red"></div>
103      <div class="square white"></div>
104      <div class="square red"></div>
105      
106      <!-- Row 3 -->
107      <div class="square blue"></div>
108      <div class="square red"></div>
109      <div class="square blue"></div>
110    </div>
111  </div>
112
113</body>
114</html>