model output
LLaMA 4 Scout

4 'counter rotation' effects
A 0.55T 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>Animation</title>
7    <style>
8        .box {
9            position: absolute;
10            width: 20px;
11            height: 20px;
12            border-radius: 2px;
13        }
14        .box:nth-child(1) {
15            background-color: #3498db;
16            top: 50%;
17            left: 50%;
18            transform: translate(-50%, -50%);
19        }
20        .box:nth-child(2) {
21            background-color: #e74c3c;
22            top: 50%;
23            left: 50%;
24            transform: translate(-50%, -50%) rotate(90deg);
25        }
26        .box:nth-child(3) {
27            background-color: #3498db;
28            top: 50%;
29            left: 50%;
30            transform: translate(-50%, -50%) rotate(180deg);
31        }
32        .box:nth-child(4) {
33            background-color: #e74c3c;
34            top: 50%;
35            left: 50%;
36            transform: translate(-50%, -50%) rotate(270deg);
37        }
38        .box:nth-child(5) {
39            background-color: #f1c40f;
40            top: 50%;
41            left: 50%;
42        }
43        .animation {
44            position: relative;
45            width: 100vw;
46            height: 100vh;
47            overflow: hidden;
48        }
49        @keyframes move {
50            0% {
51                transform: translate(0, 0) scale(1);
52            }
53            100% {
54                transform: translate(30px, 30px) scale(1);
55            }
56        }
57        .move {
58            animation: move 2s ease-in-out infinite;
59        }
60    </style>
61</head>
62<body>
63    <div class="animation">
64        <div class="box" style="background-color: #3498db; left: 70px; top: 70px;"></div>
65        <div class="box" style="background-color: #e74c3c; left: 90px; top: 70px;"></div>
66        <div class="box" style="background-color: #3498db; left: 110px; top: 70px;"></div>
67        <div class="box" style="background-color: #e74c3c; left: 130px; top: 70px;"></div>
68        <div class="box" style="background-color: #f1c40f; left: 90px; top: 90px;"></div>
69        <script>
70            const boxes = document.querySelectorAll('.box');
71            let angle = 0;
72            function animate() {
73                angle += 1;
74                boxes.forEach((box, index) => {
75                    let x, y;
76                    if (index === 4) {
77                        x = 90 + Math.sin(angle * Math.PI / 180) * 50;
78                        y = 90 + Math.cos(angle * Math.PI / 180) * 50;
79                    } else {
80                        x = 90 + Math.sin((angle + index * 90) * Math.PI / 180) * 50;
81                        y = 70 + Math.cos((angle + index * 90) * Math.PI / 180) * 50;
82                    }
83                    box.style.left = `${x}px`;
84                    box.style.top = `${y}px`;
85                });
86                requestAnimationFrame(animate);
87            }
88            animate();
89        </script>
90    </div>
91</body>
92</html>