model output
LLaMA 4 Scout

Only CSS: Joint Animation
A 0.60T 0.34
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>Loading Animation</title>
7    <style>
8        .loader {
9            position: relative;
10            width: 100px;
11            height: 10px;
12            background-color: #1875F2;
13            border-radius: 10px;
14            transform: scaleX(0);
15            animation: scaleX 1s ease-in-out infinite;
16        }
17
18        @keyframes scaleX {
19            0% {
20                transform: scaleX(0);
21            }
22            50% {
23                transform: scaleX(1);
24            }
25            100% {
26                transform: scaleX(0);
27            }
28        }
29
30        .loader::before {
31            content: "";
32            position: absolute;
33            top: 0;
34            left: 0;
35            width: 20px;
36            height: 10px;
37            background-color: #1875F2;
38            border-radius: 10px;
39            animation: move 2s ease-in-out infinite;
40        }
41
42        @keyframes move {
43            0% {
44                transform: translateX(0) rotate(0);
45            }
46            100% {
47                transform: translateX(80px) rotate(720deg);
48            }
49        }
50    </style>
51</head>
52<body>
53    <div class="loader"></div>
54</body>
55</html>