model output
LLaMA 4 Scout

flat loading animate
A 0.87T 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        .balls {
9            position: relative;
10            width: 100px;
11            height: 100px;
12            margin: 50px auto;
13        }
14        .ball {
15            position: absolute;
16            width: 20px;
17            height: 20px;
18            border-radius: 50%;
19            transition: all 0.5s ease-in-out;
20        }
21        .ball:nth-child(1) {
22            background-color: #2E4053; /* dark blue */
23            top: 0;
24            left: 40px;
25        }
26        .ball:nth-child(2) {
27            background-color: #0097A7; /* green */
28            top: 0;
29            right: 40px;
30        }
31        .ball:nth-child(3) {
32            background-color: #FFC107; /* orange */
33            bottom: 0;
34            left: 40px;
35        }
36        .ball:nth-child(4) {
37            background-color: #FF69B4; /* pink */
38            bottom: 0;
39            right: 40px;
40        }
41    </style>
42</head>
43<body>
44    <div class="balls">
45        <div class="ball"></div>
46        <div class="ball"></div>
47        <div class="ball"></div>
48        <div class="ball"></div>
49    </div>
50
51    <script>
52        const balls = document.querySelectorAll('.ball');
53        let animationIteration = 0;
54
55        function animate() {
56            balls.forEach((ball, index) => {
57                let x, y;
58                switch (index) {
59                    case 0: // Top left
60                        x = 40 + Math.sin(animationIteration) * 20;
61                        y = 40 + Math.cos(animationIteration) * 20;
62                        break;
63                    case 1: // Top right
64                        x = 60 + Math.cos(animationIteration) * 20;
65                        y = 40 + Math.sin(animationIteration) * 20;
66                        break;
67                    case 2: // Bottom left
68                        x = 40 + Math.cos(animationIteration) * 20;
69                        y = 60 + Math.sin(animationIteration) * 20;
70                        break;
71                    case 3: // Bottom right
72                        x = 60 + Math.sin(animationIteration) * 20;
73                        y = 60 + Math.cos(animationIteration) * 20;
74                        break;
75                }
76                ball.style.top = `${y}px`;
77                ball.style.left = `${x}px`;
78            });
79            animationIteration += 0.01;
80            requestAnimationFrame(animate);
81        }
82        animate();
83    </script>
84</body>
85</html>