← back to 4 'counter rotation' effectscompare with ground truth →
model output
LLaMA 4 Scout
4 'counter rotation' effects
A 0.65T 0.21
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: 100vw;
11 height: 100vh;
12 background-color: #000;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 }
17 .box {
18 position: absolute;
19 width: 20px;
20 height: 20px;
21 border-radius: 50%;
22 }
23 .box:nth-child(1) {
24 top: 50px;
25 left: 50px;
26 background-color: #3498db;
27 animation: move 2s infinite;
28 }
29 .box:nth-child(2) {
30 top: 50px;
31 left: 70px;
32 background-color: #e74c3c;
33 animation: move 2s infinite 0.2s;
34 }
35 .box:nth-child(3) {
36 top: 50px;
37 left: 90px;
38 background-color: #3498db;
39 animation: move 2s infinite 0.4s;
40 }
41 .box:nth-child(4) {
42 top: 70px;
43 left: 50px;
44 background-color: #e74c3c;
45 animation: move 2s infinite 0.6s;
46 }
47 .box:nth-child(5) {
48 top: 70px;
49 left: 70px;
50 background-color: #fff;
51 }
52 .box:nth-child(6) {
53 top: 70px;
54 left: 90px;
55 background-color: #e74c3c;
56 animation: move 2s infinite 0.8s;
57 }
58 .box:nth-child(7) {
59 top: 90px;
60 left: 50px;
61 background-color: #3498db;
62 animation: move 2s infinite 1s;
63 }
64 .box:nth-child(8) {
65 top: 90px;
66 left: 70px;
67 background-color: #e74c3c;
68 animation: move 2s infinite 1.2s;
69 }
70 .box:nth-child(9) {
71 top: 90px;
72 left: 90px;
73 background-color: #3498db;
74 animation: move 2s infinite 1.4s;
75 }
76 @keyframes move {
77 0% {
78 transform: scale(1);
79 }
80 50% {
81 transform: scale(1.2);
82 }
83 100% {
84 transform: scale(1);
85 }
86 }
87 </style>
88</head>
89<body>
90 <div class="container">
91 <div class="box"></div>
92 <div class="box"></div>
93 <div class="box"></div>
94 <div class="box"></div>
95 <div class="box"></div>
96 <div class="box"></div>
97 <div class="box"></div>
98 <div class="box"></div>
99 <div class="box"></div>
100 </div>
101</body>
102</html>