model output
GPT-5.4

Only CSS: Joint Animation
A 0.72T 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" />
6<title>Pivot Bars Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    height: 100%;
11    background: #ffffff;
12    overflow: hidden;
13  }
14
15  .stage {
16    width: 100vw;
17    height: 100vh;
18    display: grid;
19    place-items: center;
20  }
21
22  .figure {
23    position: relative;
24    width: 520px;
25    height: 260px;
26  }
27
28  .bar {
29    position: absolute;
30    width: 260px;
31    height: 76px;
32    border-radius: 999px;
33    top: 92px;
34    left: 130px;
35    transform-origin: 38px 38px;
36    opacity: .82;
37  }
38
39  .blue {
40    background: #3ea2d8;
41    z-index: 1;
42    transform: rotate(0deg);
43  }
44
45  .gray {
46    background: #8f8f8f;
47    z-index: 2;
48    animation: swing 1.8s cubic-bezier(.42,0,.58,1) infinite;
49  }
50
51  @keyframes swing {
52    0%   { transform: rotate(0deg); }
53    18%  { transform: rotate(-22deg); }
54    38%  { transform: rotate(-72deg); }
55    50%  { transform: rotate(-86deg); }
56    62%  { transform: rotate(-72deg); }
57    82%  { transform: rotate(-22deg); }
58    100% { transform: rotate(0deg); }
59  }
60
61  /* scale to resemble the source framing on smaller screens */
62  @media (max-width: 700px) {
63    .figure { transform: scale(.72); }
64  }
65</style>
66</head>
67<body>
68  <div class="stage">
69    <div class="figure">
70      <div class="bar blue"></div>
71      <div class="bar gray"></div>
72    </div>
73  </div>
74</body>
75</html>