model output
GPT-5.4

Only CSS: Caterpillar
A 0.76T 0.38
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>Minimal Rotating Tile</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #fff;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    display: grid;
21    place-items: center;
22  }
23
24  /* overall placement and slight low-center positioning */
25  .wrap {
26    position: relative;
27    width: 180px;
28    height: 120px;
29    transform: translateY(42px);
30    display: grid;
31    place-items: center;
32  }
33
34  .tile {
35    position: relative;
36    width: 118px;
37    height: 54px;
38    transform-style: preserve-3d;
39    animation: spin 3.2s linear infinite;
40  }
41
42  .strip {
43    position: absolute;
44    top: 0;
45    height: 100%;
46    transform: skewX(-28deg);
47  }
48
49  .left, .right {
50    width: 36px;
51    background: #050505;
52  }
53
54  .mid {
55    left: 36px;
56    width: 46px;
57    background: #18a9df;
58  }
59
60  .left { left: 0; }
61  .right { left: 82px; }
62
63  /* brief striped appearance at the start of each loop */
64  .left::before,
65  .right::before {
66    content: "";
67    position: absolute;
68    inset: 0;
69    background:
70      repeating-linear-gradient(
71        to bottom,
72        rgba(24,169,223,0.95) 0 3px,
73        rgba(24,169,223,0.95) 3px 5px,
74        transparent 5px 10px
75      );
76    opacity: 0;
77    animation: stripes 3.2s linear infinite;
78    pointer-events: none;
79  }
80
81  @keyframes stripes {
82    0%   { opacity: 1; }
83    8%   { opacity: 1; }
84    14%  { opacity: 0; }
85    100% { opacity: 0; }
86  }
87
88  /* rotation approximates the frame sequence:
89     starts around -25deg, passes through front-facing,
90     continues to about +25deg, then loops */
91  @keyframes spin {
92    0%   { transform: rotateZ(-24deg) scale(1); }
93    50%  { transform: rotateZ(0deg) scale(1); }
94    100% { transform: rotateZ(24deg) scale(1); }
95  }
96</style>
97</head>
98<body>
99  <div class="stage">
100    <div class="wrap">
101      <div class="tile">
102        <div class="strip left"></div>
103        <div class="strip mid"></div>
104        <div class="strip right"></div>
105      </div>
106    </div>
107  </div>
108</body>
109</html>