model output
GPT-5.4

4 'counter rotation' effects
A 0.89T 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" />
6<title>Grid to Line Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --blue:#0b3f63;
11    --pink:#b0004b;
12    --white:#f4f4f4;
13    --size:22px;
14    --gap:5px;
15    --radius:6px;
16    --dur:1.2s;
17    --ease:cubic-bezier(.65,0,.35,1);
18  }
19
20  html,body{
21    margin:0;
22    width:100%;
23    height:100%;
24    background:var(--bg);
25    overflow:hidden;
26    font-family:system-ui,sans-serif;
27  }
28
29  .stage{
30    position:relative;
31    width:100%;
32    height:100%;
33  }
34
35  .loader{
36    position:absolute;
37    left:142px;
38    top:49px;
39    width:calc(var(--size) * 3 + var(--gap) * 2);
40    height:calc(var(--size) * 3 + var(--gap) * 2);
41  }
42
43  .cell{
44    position:absolute;
45    width:var(--size);
46    height:var(--size);
47    border-radius:var(--radius);
48    background:var(--c);
49    box-shadow:
50      0 0 0 1px rgba(255,255,255,.12) inset,
51      0 0 4px rgba(255,255,255,.28),
52      0 0 8px rgba(255,255,255,.12);
53    animation: morph var(--dur) var(--ease) infinite alternate;
54  }
55
56  @keyframes morph{
57    0%{
58      transform:translate(var(--gx), var(--gy));
59    }
60    100%{
61      transform:translate(var(--lx), var(--ly));
62    }
63  }
64</style>
65</head>
66<body>
67<div class="stage">
68  <div class="loader" id="loader"></div>
69</div>
70
71<script>
72  const loader = document.getElementById('loader');
73
74  const size = 22;
75  const gap = 5;
76  const step = size + gap;
77
78  // 3x3 grid colors from the frames:
79  // blue pink blue
80  // pink white pink
81  // blue pink blue
82  const cells = [
83    {gx:0, gy:0, c:'var(--blue)'},
84    {gx:1, gy:0, c:'var(--pink)'},
85    {gx:2, gy:0, c:'var(--blue)'},
86    {gx:0, gy:1, c:'var(--pink)'},
87    {gx:1, gy:1, c:'var(--white)'},
88    {gx:2, gy:1, c:'var(--pink)'},
89    {gx:0, gy:2, c:'var(--blue)'},
90    {gx:1, gy:2, c:'var(--pink)'},
91    {gx:2, gy:2, c:'var(--blue)'}
92  ];
93
94  // In the sampled frames the shape alternates between:
95  // full 3x3 grid and a centered vertical line of 5 blocks:
96  // blue, pink, blue, pink, blue
97  // We map visible cells into that line and collapse the others onto same spots.
98  const lineX = step; // centered column
99  const lineY = [-0.0*step, 1*step, 2*step, 3*step, 4*step];
100
101  const targetMap = [
102    0, // top-left -> top blue
103    1, // top-mid  -> pink
104    0, // top-right -> top blue
105    1, // mid-left  -> pink
106    2, // center    -> blue
107    3, // mid-right -> pink
108    4, // bot-left  -> blue
109    3, // bot-mid   -> pink
110    4  // bot-right -> blue
111  ];
112
113  cells.forEach((cell, i) => {
114    const d = document.createElement('div');
115    const t = targetMap[i];
116    d.className = 'cell';
117    d.style.setProperty('--c', cell.c);
118    d.style.setProperty('--gx', `${cell.gx * step}px`);
119    d.style.setProperty('--gy', `${cell.gy * step}px`);
120    d.style.setProperty('--lx', `${lineX}px`);
121    d.style.setProperty('--ly', `${lineY[t]}px`);
122    loader.appendChild(d);
123  });
124</script>
125</body>
126</html>