model output
Claude Sonnet 4.6

Simple Spinner
A 0.85T 0.27
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5  * { margin: 0; padding: 0; box-sizing: border-box; }
6  body {
7    background: #c01a1a;
8    width: 100vw;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13  }
14  .box {
15    width: 50px;
16    height: 35px;
17    animation: colorCycle 3s linear infinite;
18    transform-style: preserve-3d;
19  }
20  @keyframes colorCycle {
21    0%   { background: #1a9fd4; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
22    10%  { background: #1a9fd4; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
23    20%  { background: #4caf50; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
24    30%  { background: #e84c1e; transform: perspective(200px) rotateY(60deg) rotateX(0deg); }
25    38%  { background: #1a9fd4; transform: perspective(200px) rotateY(0deg) rotateX(80deg); }
26    45%  { background: #c97a50; transform: perspective(200px) rotateY(-50deg) rotateX(0deg); }
27    55%  { background: #ffa726; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
28    65%  { background: #4caf50; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
29    75%  { background: #ff3a2a; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
30    85%  { background: #1a9fd4; transform: perspective(200px) rotateY(0deg) rotateX(-50deg); }
31    100% { background: #1a9fd4; transform: perspective(200px) rotateY(0deg) rotateX(0deg); }
32  }
33</style>
34</head>
35<body>
36  <div class="box"></div>
37</body>
38</html>