model output
GPT-5.4

4 'counter rotation' effects
A 0.84T 0.36
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" />
6<title>Rotating Tile Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --blue:#0b4f78;
11    --magenta:#c1004f;
12    --white:#ffffff;
13    --tile:22px;
14    --gap:5px;
15    --radius:6px;
16    --glow:rgba(255,255,255,.28);
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    background:var(--bg);
24    overflow:hidden;
25  }
26
27  .stage{
28    position:relative;
29    width:100vw;
30    height:100vh;
31  }
32
33  /* Positioned near the upper-left like the reference */
34  .loader{
35    position:absolute;
36    left:142px;
37    top:50px;
38    width:calc(var(--tile) * 3 + var(--gap) * 2);
39    height:calc(var(--tile) * 3 + var(--gap) * 2);
40    transform-origin:50% 50%;
41    animation: spin 2.2s linear infinite;
42    filter: drop-shadow(0 0 2px rgba(255,255,255,.35))
43            drop-shadow(0 0 5px rgba(255,255,255,.18));
44  }
45
46  .cell{
47    position:absolute;
48    width:var(--tile);
49    height:var(--tile);
50    border-radius:var(--radius);
51    box-shadow:
52      inset 0 0 0 1px rgba(255,255,255,.12),
53      0 0 0 1px rgba(255,255,255,.06),
54      0 0 8px rgba(180,220,255,.22);
55  }
56
57  .blue{
58    background:linear-gradient(145deg,#0d5f8f 0%, #0a4f79 45%, #083d5d 100%);
59  }
60
61  .magenta{
62    background:linear-gradient(145deg,#d10058 0%, #b7004b 50%, #8f003b 100%);
63  }
64
65  .white{
66    background:linear-gradient(145deg,#ffffff 0%, #f7f7f7 55%, #e9e9e9 100%);
67    box-shadow:
68      inset 0 0 0 1px rgba(255,255,255,.55),
69      0 0 0 1px rgba(255,255,255,.18),
70      0 0 10px rgba(255,255,255,.55);
71  }
72
73  @keyframes spin{
74    from{ transform:rotate(0deg); }
75    to{ transform:rotate(360deg); }
76  }
77</style>
78</head>
79<body>
80  <div class="stage">
81    <div class="loader" aria-hidden="true">
82      <!-- 3x3 grid -->
83      <div class="cell blue"    style="left:0;top:0"></div>
84      <div class="cell magenta" style="left:27px;top:0"></div>
85      <div class="cell blue"    style="left:54px;top:0"></div>
86
87      <div class="cell magenta" style="left:0;top:27px"></div>
88      <div class="cell white"   style="left:27px;top:27px"></div>
89      <div class="cell magenta" style="left:54px;top:27px"></div>
90
91      <div class="cell blue"    style="left:0;top:54px"></div>
92      <div class="cell magenta" style="left:27px;top:54px"></div>
93      <div class="cell blue"    style="left:54px;top:54px"></div>
94    </div>
95  </div>
96</body>
97</html>