model output
GPT-5.4

4 'counter rotation' effects
A 0.86T 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:#1c1c1c;
10    --blue:#003f63;
11    --pink:#c0004f;
12    --white:#f4f4f4;
13    --tile:22px;
14    --gap:5px;
15    --radius:6px;
16    --glow:rgba(255,255,255,.38);
17    --period:1.35s;
18  }
19
20  html,body{
21    margin:0;
22    width:100%;
23    height:100%;
24    background:var(--bg);
25    overflow:hidden;
26    font-family:sans-serif;
27  }
28
29  .stage{
30    position:relative;
31    width:100%;
32    height:100%;
33  }
34
35  /* place near top-left like the reference */
36  .loader{
37    position:absolute;
38    left:142px;
39    top:49px;
40    width:calc(var(--tile) * 3 + var(--gap) * 2);
41    height:calc(var(--tile) * 3 + var(--gap) * 2);
42    transform-origin:50% 50%;
43    animation: spin var(--period) ease-in-out infinite;
44  }
45
46  .cell{
47    position:absolute;
48    width:var(--tile);
49    height:var(--tile);
50    border-radius:var(--radius);
51    box-sizing:border-box;
52    border:1px solid rgba(255,255,255,.18);
53    box-shadow:
54      0 0 0 1px rgba(255,255,255,.06) inset,
55      0 0 6px rgba(255,255,255,.18),
56      0 0 10px rgba(255,255,255,.12);
57  }
58
59  .blue{ background:var(--blue); }
60  .pink{ background:var(--pink); }
61  .white{
62    background:var(--white);
63    box-shadow:
64      0 0 0 1px rgba(255,255,255,.18) inset,
65      0 0 8px rgba(255,255,255,.55),
66      0 0 14px rgba(255,255,255,.28);
67  }
68
69  @keyframes spin{
70    0%, 24%   { transform:rotate(0deg); }
71    33%, 57%  { transform:rotate(45deg); }
72    66%, 90%  { transform:rotate(90deg); }
73    100%      { transform:rotate(90deg); }
74  }
75</style>
76</head>
77<body>
78<div class="stage">
79  <div class="loader" id="loader"></div>
80</div>
81
82<script>
83  const loader = document.getElementById('loader');
84  const tile = 22, gap = 5;
85
86  // 3x3 pattern from the frames:
87  // blue pink blue
88  // pink white pink
89  // blue pink blue
90  const pattern = [
91    ['blue','pink','blue'],
92    ['pink','white','pink'],
93    ['blue','pink','blue']
94  ];
95
96  pattern.forEach((row, y) => {
97    row.forEach((color, x) => {
98      const d = document.createElement('div');
99      d.className = `cell ${color}`;
100      d.style.left = `${x * (tile + gap)}px`;
101      d.style.top  = `${y * (tile + gap)}px`;
102      loader.appendChild(d);
103    });
104  });
105</script>
106</body>
107</html>