model output
GPT-5.4

4 'counter rotation' effects
A 0.90T 0.22
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 3x3 Tile Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --blue:#0b3f63;
11    --magenta:#b0004b;
12    --white:#ffffff;
13    --tile:22px;
14    --gap:6px;
15    --glow:rgba(210,220,235,.42);
16    --dur:1.35s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    background:var(--bg);
24    overflow:hidden;
25    font-family:system-ui,sans-serif;
26  }
27
28  .stage{
29    position:relative;
30    width:100vw;
31    height:100vh;
32    background:var(--bg);
33  }
34
35  .loader{
36    position:absolute;
37    left:142px;
38    top:49px;
39    width:calc(var(--tile) * 3 + var(--gap) * 2);
40    height:calc(var(--tile) * 3 + var(--gap) * 2);
41    display:grid;
42    grid-template-columns:repeat(3,var(--tile));
43    grid-template-rows:repeat(3,var(--tile));
44    gap:var(--gap);
45    transform-origin:50% 50%;
46    animation:wobble var(--dur) ease-in-out infinite;
47    filter:drop-shadow(0 0 3px rgba(255,255,255,.18));
48  }
49
50  .cell{
51    border-radius:6px;
52    box-shadow:
53      0 0 0 1px rgba(255,255,255,.08) inset,
54      0 0 5px var(--glow),
55      0 0 10px rgba(255,255,255,.08);
56  }
57
58  .blue{
59    background:linear-gradient(180deg, #0d4a73 0%, #0a3f63 55%, #083552 100%);
60  }
61
62  .magenta{
63    background:linear-gradient(180deg, #c10056 0%, #b0004b 55%, #8f003d 100%);
64  }
65
66  .white{
67    background:linear-gradient(180deg, #ffffff 0%, #f8f8f8 60%, #ececec 100%);
68    box-shadow:
69      0 0 0 1px rgba(255,255,255,.18) inset,
70      0 0 7px rgba(255,255,255,.65),
71      0 0 14px rgba(255,255,255,.18);
72  }
73
74  @keyframes wobble{
75    0%, 18%   { transform:rotate(0deg) scale(1); }
76    32%, 50%  { transform:rotate(45deg) scale(1); }
77    64%, 82%  { transform:rotate(0deg) scale(1); }
78    100%      { transform:rotate(45deg) scale(1); }
79  }
80</style>
81</head>
82<body>
83  <div class="stage">
84    <div class="loader" aria-label="animated loader">
85      <div class="cell blue"></div>
86      <div class="cell magenta"></div>
87      <div class="cell blue"></div>
88
89      <div class="cell magenta"></div>
90      <div class="cell white"></div>
91      <div class="cell magenta"></div>
92
93      <div class="cell blue"></div>
94      <div class="cell magenta"></div>
95      <div class="cell blue"></div>
96    </div>
97  </div>
98</body>
99</html>