model output
LLaMA 4 Scout

Only CSS: Joint Animation
A 0.49T 0.42
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>Animation</title>
7    <style>
8        /* Styles */
9        .container {
10            position: relative;
11            width: 200px;
12            height: 50px;
13        }
14        .gray-bar {
15            position: absolute;
16            top: 0;
17            left: 0;
18            width: 100px;
19            height: 50px;
20            background-color: gray;
21            transform-origin: top left;
22        }
23        .blue-bar {
24            position: absolute;
25            top: 0;
26            left: 100px;
27            width: 100px;
28            height: 50px;
29            background-color: blue;
30            transform-origin: top left;
31        }
32        .dot {
33            position: absolute;
34            width: 10px;
35            height: 10px;
36            border-radius: 50%;
37            background-color: yellow;
38        }
39        .dot:nth-child(1) {
40            top: 20px;
41            left: 45px;
42        }
43        .dot:nth-child(2) {
44            top: 20px;
45            left: 145px;
46        }
47    </style>
48</head>
49<body>
50    <div class="container">
51        <div class="gray-bar">
52            <div class="dot"></div>
53        </div>
54        <div class="blue-bar">
55            <div class="dot"></div>
56        </div>
57    </div>
58
59    <script>
60        // Animation
61        const grayBar = document.querySelector('.gray-bar');
62        const blueBar = document.querySelector('.blue-bar');
63
64        let angle = 0;
65
66        function animate() {
67            angle += 1;
68            grayBar.style.transform = `rotate(${angle}deg)`;
69            blueBar.style.transform = `rotate(${angle}deg) translateX(${100 - Math.cos(angle * Math.PI / 180) * 100}px)`;
70            if (angle < 360) {
71                requestAnimationFrame(animate);
72            }
73        }
74
75        animate();
76    </script>
77</body>
78</html>