model output
GPT-5.4

Only CSS: Joint Animation
A 0.94T 0.65
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>Recreated Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --panel:#4f98c1;
11    --border:#9a9a9a;
12    --green:#5ea7a0;
13    --yellow:#f0c91d;
14    --dot-ring: rgba(255,255,255,.75);
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23    font-family:sans-serif;
24  }
25
26  .stage{
27    position:relative;
28    width:100vw;
29    height:100vh;
30    background:#fff;
31  }
32
33  .bar{
34    position:absolute;
35    left:50%;
36    top:50%;
37    width:300px;
38    height:78px;
39    margin-left:-150px;
40    margin-top:-39px;
41    background:var(--panel);
42    border:5px solid var(--border);
43    box-sizing:border-box;
44    transform-origin:50% 50%;
45    animation: spin 2.8s linear infinite;
46  }
47
48  .dot{
49    position:absolute;
50    width:20px;
51    height:20px;
52    border-radius:50%;
53    top:50%;
54    transform:translate(-50%,-50%);
55    box-sizing:border-box;
56    box-shadow:
57      0 0 0 3px rgba(255,255,255,.55) inset,
58      0 0 2px rgba(255,255,255,.7);
59    opacity:.95;
60  }
61
62  .dot.green{
63    left:13%;
64    background:var(--green);
65    opacity:.55;
66  }
67
68  .dot.yellow{
69    left:50%;
70    background:var(--yellow);
71  }
72
73  @keyframes spin{
74    0%   { transform:translate(0,0) rotate(0deg); }
75    16.66% { transform:translate(-6px, 10px) rotate(20deg); }
76    33.33% { transform:translate(-78px, 110px) rotate(73deg); }
77    50%  { transform:translate(-110px, 165px) rotate(80deg); }
78    66.66% { transform:translate(-92px, 150px) rotate(80deg); }
79    83.33% { transform:translate(-42px, 92px) rotate(25deg); }
80    100% { transform:translate(0,0) rotate(0deg); }
81  }
82</style>
83</head>
84<body>
85  <div class="stage">
86    <div class="bar">
87      <div class="dot green"></div>
88      <div class="dot yellow"></div>
89    </div>
90  </div>
91</body>
92</html>