model output
GPT-5.4

Only CSS: Joint Animation
A 0.88T 0.30
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>Rotating Joined Bars</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --gray:rgba(140,140,140,.82);
11    --blue:rgba(63,157,210,.82);
12    --overlap:rgba(58,145,196,.72);
13    --dot:#ffd400;
14    --dot-ring:#ffffff;
15    --w: 520px;
16    --h: 76px;
17    --pivot: 50%;
18    --dur: 2.6s;
19    --ease: cubic-bezier(.42,0,.58,1);
20  }
21
22  html,body{
23    margin:0;
24    width:100%;
25    height:100%;
26    background:var(--bg);
27    overflow:hidden;
28    font-family:sans-serif;
29  }
30
31  .stage{
32    position:relative;
33    width:100vw;
34    height:100vh;
35    display:grid;
36    place-items:center;
37  }
38
39  .assembly{
40    position:relative;
41    width:var(--w);
42    height:var(--h);
43    transform-origin: var(--pivot) 50%;
44    animation: swing var(--dur) var(--ease) infinite alternate;
45  }
46
47  .bar{
48    position:absolute;
49    top:0;
50    width:calc(var(--w) / 2 + 10px);
51    height:100%;
52  }
53
54  .left{
55    left:0;
56    background:var(--gray);
57  }
58
59  .right{
60    right:0;
61    background:var(--blue);
62  }
63
64  .joint{
65    position:absolute;
66    left:50%;
67    top:50%;
68    width:74px;
69    height:100%;
70    transform:translate(-50%,-50%);
71    background:var(--overlap);
72    z-index:2;
73  }
74
75  .dot{
76    position:absolute;
77    top:50%;
78    width:14px;
79    height:14px;
80    margin-top:-7px;
81    border-radius:50%;
82    background:var(--dot);
83    border:3px solid var(--dot-ring);
84    box-shadow:0 0 0 1px rgba(255,212,0,.25);
85    z-index:3;
86  }
87
88  .left .dot{ left:32px; }
89  .right .dot{ right:132px; }
90
91  @keyframes swing{
92    0%   { transform:rotate(0deg); }
93    18%  { transform:rotate(-12deg); }
94    38%  { transform:rotate(-52deg); }
95    52%  { transform:rotate(-76deg); }
96    64%  { transform:rotate(-82deg); }
97    76%  { transform:rotate(-74deg); }
98    100% { transform:rotate(-28deg); }
99  }
100</style>
101</head>
102<body>
103  <div class="stage">
104    <div class="assembly">
105      <div class="bar left">
106        <div class="dot"></div>
107      </div>
108      <div class="bar right">
109        <div class="dot"></div>
110      </div>
111      <div class="joint"></div>
112    </div>
113  </div>
114</body>
115</html>