← back to 4 'counter rotation' effectscompare with ground truth →
model output
LLaMA 4 Scout
4 'counter rotation' effects
A 0.33T 0.30
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 width: 20px;
10 height: 20px;
11 display: inline-block;
12 margin: 2px;
13 border-radius: 2px;
14 }
15 .container {
16 position: relative;
17 top: 50px;
18 left: 50px;
19 }
20 .animation {
21 position: relative;
22 animation: move 2s infinite;
23 }
24 @keyframes move {
25 0% {
26 transform: translateY(0);
27 }
28 50% {
29 transform: translateY(-80px);
30 }
31 100% {
32 transform: translateY(0);
33 }
34 }
35 .color-1 {
36 background-color: #3498db;
37 }
38 .color-2 {
39 background-color: #e74c3c;
40 }
41 .color-3 {
42 background-color: #f1c40f;
43 }
44 </style>
45</head>
46<body>
47 <div class="container">
48 <div class="animation">
49 <div class="box color-1"></div>
50 <div class="box color-2"></div>
51 <div class="box color-1"></div>
52 <div class="box color-1"></div>
53 <div class="box color-2"></div>
54 <div class="box color-1"></div>
55 <div class="box color-3"></div>
56 <div class="box color-2"></div>
57 <div class="box color-1"></div>
58 </div>
59 </div>
60</body>
61</html>