model output
LLaMA 4 Scout

Only CSS: Joint Animation
A 0.63T 0.22
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>Toggle Animation</title>
7    <style>
8        .toggle {
9            position: relative;
10            width: 100px;
11            height: 20px;
12            background-color: gray;
13            border-radius: 10px;
14            transition: all 0.5s ease-in-out;
15        }
16        .toggle::before {
17            content: '';
18            position: absolute;
19            top: 0;
20            left: 0;
21            width: 20px;
22            height: 20px;
23            background-color: #87CEEB;
24            border-radius: 50%;
25            transition: all 0.5s ease-in-out;
26            transform: translateX(0);
27        }
28        .active {
29            background-color: gray;
30        }
31        .active::before {
32            transform: translateX(80px);
33        }
34    </style>
35</head>
36<body>
37    <div class="toggle" id="toggle"></div>
38    <script>
39        const toggle = document.getElementById('toggle');
40        toggle.addEventListener('click', () => {
41            toggle.classList.toggle('active');
42        });
43        // Simulate the animation
44        let progress = 0;
45        function animate() {
46            progress += 0.01;
47            if (progress <= 1) {
48                toggle.style.background = `linear-gradient(to right, gray ${100-progress*100}%, #87CEEB ${progress*100}%)`;
49                toggle.style.setProperty('--progress', `${progress*100}%`, false);
50                requestAnimationFrame(animate);
51            } else {
52                progress = 0;
53            }
54        }
55        animate();
56    </script>
57</body>
58</html>