model output
Claude Sonnet 4.6

Only CSS: Caterpillar
A 0.78T 0.29
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>Spinning Shape Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    width: 1024px;
12    height: 768px;
13    background: white;
14    overflow: hidden;
15  }
16
17  .scene {
18    position: absolute;
19    top: 50%;
20    left: 50%;
21    transform: translate(-50%, -50%);
22    transform-style: preserve-3d;
23    perspective: 800px;
24  }
25
26  .shape-wrapper {
27    position: relative;
28    width: 200px;
29    height: 60px;
30    transform-style: preserve-3d;
31    animation: spin 3s linear infinite;
32    transform-origin: center center;
33  }
34
35  @keyframes spin {
36    0%   { transform: rotateX(75deg) rotateZ(20deg); }
37    100% { transform: rotateX(75deg) rotateZ(380deg); }
38  }
39
40  .shape {
41    position: absolute;
42    top: 0; left: 0;
43    width: 100%;
44    height: 100%;
45    display: flex;
46    align-items: stretch;
47  }
48
49  .left-black {
50    width: 35%;
51    background: #000;
52    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
53  }
54
55  .center-blue {
56    width: 30%;
57    background: #1aa7d4;
58  }
59
60  .right-black {
61    width: 35%;
62    background: #000;
63    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
64  }
65</style>
66</head>
67<body>
68
69<div class="scene">
70  <div class="shape-wrapper">
71    <div class="shape">
72      <div class="left-black"></div>
73      <div class="center-blue"></div>
74      <div class="right-black"></div>
75    </div>
76  </div>
77</div>
78
79<script>
80  // The animation is handled purely by CSS
81  // The shape rotates in 3D space giving the perspective illusion
82  // of a flat object spinning
83</script>
84
85</body>
86</html>