model output
LLaMA 4 Scout

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