model output
GPT-5.4

Wavy Loading Animations
A 0.71T 0.20
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 Morphing Wedge</title>
7<style>
8  :root{
9    --bg:#f3f3f3;
10    --g1:#b7b7b7;
11    --g2:#c9c9c9;
12    --g3:#ececec;
13    --w:82px;
14    --h:40px;
15    --dur:1.2s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    display:grid;
28    place-items:start center;
29    font-family:sans-serif;
30  }
31
32  .stage{
33    position:relative;
34    width:100vw;
35    height:100vh;
36  }
37
38  .shape{
39    position:absolute;
40    left:50%;
41    top:10.5%;
42    width:var(--w);
43    height:var(--h);
44    transform:translateX(-50%);
45    transform-origin:50% 50%;
46    animation: flip var(--dur) linear infinite;
47    filter: blur(.15px);
48  }
49
50  .shape::before{
51    content:"";
52    position:absolute;
53    inset:0;
54    background:linear-gradient(90deg,var(--g1) 0 28%, var(--g2) 55%, var(--g1) 100%);
55    clip-path:polygon(0 10%, 28% 10%, 58% 0, 100% 12%, 100% 88%, 58% 100%, 28% 90%, 0 90%);
56    animation: morph var(--dur) ease-in-out infinite;
57  }
58
59  @keyframes morph{
60    0%,100%{
61      background:linear-gradient(90deg,var(--g1) 0 30%, #d7d7d7 58%, rgba(236,236,236,.15) 100%);
62      clip-path:polygon(0 18%, 22% 18%, 52% 34%, 100% 50%, 52% 66%, 22% 82%, 0 82%);
63    }
64    50%{
65      background:linear-gradient(90deg,var(--g1) 0 22%, var(--g2) 52%, var(--g1) 100%);
66      clip-path:polygon(0 10%, 28% 10%, 58% 0, 100% 12%, 100% 88%, 58% 100%, 28% 90%, 0 90%);
67    }
68  }
69
70  @keyframes flip{
71    0%,49.999%{
72      transform:translateX(-50%) scaleX(1);
73    }
74    50%,100%{
75      transform:translateX(-50%) scaleX(-1);
76    }
77  }
78</style>
79</head>
80<body>
81  <div class="stage">
82    <div class="shape"></div>
83  </div>
84</body>
85</html>