model output
GPT-5.4

Only CSS: Joint Animation
A 0.90T 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>Rotating Bar Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --bar:#3f95c3;
11    --dot:#f2cc12;
12    --guide:#8a8a8a;
13    --w:300px;
14    --h:80px;
15    --dur:2.2s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24    font-family:sans-serif;
25  }
26
27  .stage{
28    width:100%;
29    height:100%;
30    display:grid;
31    place-items:center;
32  }
33
34  .wrap{
35    position:relative;
36    width:var(--w);
37    height:var(--h);
38  }
39
40  .guide{
41    position:absolute;
42    inset:0;
43    border:1px dashed var(--guide);
44    box-sizing:border-box;
45    opacity:.9;
46  }
47
48  .bar{
49    position:absolute;
50    inset:0;
51    background:var(--bar);
52    transform-origin:50% 50%;
53    animation:rock var(--dur) ease-in-out infinite;
54  }
55
56  .dot{
57    position:absolute;
58    left:50%;
59    top:50%;
60    width:14px;
61    height:14px;
62    margin:-7px 0 0 -7px;
63    border-radius:50%;
64    background:var(--dot);
65    border:3px solid #fff;
66    box-shadow:0 0 0 1px rgba(255,255,255,.35);
67    z-index:2;
68  }
69
70  @keyframes rock{
71    0%   { transform:rotate(0deg); }
72    16%  { transform:rotate(-20deg); }
73    34%  { transform:rotate(-74deg); }
74    50%  { transform:rotate(-82deg); }
75    66%  { transform:rotate(-74deg); }
76    84%  { transform:rotate(-20deg); }
77    100% { transform:rotate(0deg); }
78  }
79</style>
80</head>
81<body>
82  <div class="stage">
83    <div class="wrap">
84      <div class="guide"></div>
85      <div class="bar"></div>
86      <div class="dot"></div>
87    </div>
88  </div>
89</body>
90</html>