model output
GPT-5.4

Simple loading indicators
A 0.85T 0.31
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>Corner Flipping Square</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    background: #fff;
21  }
22
23  .box {
24    position: absolute;
25    left: 28px;
26    top: 28px;
27    width: 50px;
28    height: 50px;
29    background: #cfcfcf;
30    transform-origin: 50% 50%;
31    animation: spin 1.6s linear infinite;
32  }
33
34  /* teal face that appears to rotate around the square */
35  .box::after {
36    content: "";
37    position: absolute;
38    inset: 0;
39    background: #16b39a;
40    clip-path: inset(0 0 0 50%);
41    animation: face 1.6s linear infinite;
42  }
43
44  /* subtle pale edge visible during transitions */
45  .box::before {
46    content: "";
47    position: absolute;
48    inset: 0;
49    background: #e9e9e9;
50    clip-path: inset(0 0 88% 0);
51    opacity: 0;
52    animation: highlight 1.6s linear infinite;
53    z-index: 2;
54    pointer-events: none;
55  }
56
57  @keyframes spin {
58    0%   { transform: rotate(0deg); }
59    25%  { transform: rotate(-18deg); }
60    50%  { transform: rotate(-12deg); }
61    75%  { transform: rotate(18deg); }
62    100% { transform: rotate(0deg); }
63  }
64
65  /* Simulates the colored face moving right -> full -> bottom -> thin bottom -> none */
66  @keyframes face {
67    0% {
68      clip-path: inset(0 0 0 100%);
69      opacity: 0;
70    }
71    8% {
72      clip-path: inset(0 0 0 55%);
73      opacity: 1;
74    }
75    18% {
76      clip-path: inset(0 0 0 0);
77      opacity: 1;
78    }
79    38% {
80      clip-path: inset(0 0 0 0);
81      opacity: 1;
82    }
83    58% {
84      clip-path: inset(55% 0 0 0);
85      opacity: 1;
86    }
87    72% {
88      clip-path: inset(92% 0 0 0);
89      opacity: 1;
90    }
91    84% {
92      clip-path: inset(100% 0 0 0);
93      opacity: 0;
94    }
95    100% {
96      clip-path: inset(100% 0 0 0);
97      opacity: 0;
98    }
99  }
100
101  @keyframes highlight {
102    0%, 6% {
103      opacity: 0;
104      clip-path: inset(0 0 88% 0);
105    }
106    12%, 22% {
107      opacity: 1;
108      clip-path: inset(0 0 88% 0);
109    }
110    30%, 100% {
111      opacity: 0;
112      clip-path: inset(0 0 88% 0);
113    }
114  }
115</style>
116</head>
117<body>
118  <div class="stage">
119    <div class="box"></div>
120  </div>
121</body>
122</html>