model output
LLaMA 4 Scout

Only CSS: Peacock
A 0.42T 0.17
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        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .spinner {
18            position: relative;
19            width: 100px;
20            height: 100px;
21        }
22        .spinner div {
23            position: absolute;
24            width: 50px;
25            height: 50px;
26            background-color: red;
27            border-radius: 50%;
28            transform-origin: center;
29            animation: rotate 2s linear infinite;
30        }
31        .spinner div:nth-child(1) {
32            transform: rotate(0deg);
33        }
34        .spinner div:nth-child(2) {
35            transform: rotate(90deg);
36        }
37        .spinner div:nth-child(3) {
38            transform: rotate(180deg);
39        }
40        .spinner div:nth-child(4) {
41            transform: rotate(270deg);
42        }
43        
44        @keyframes rotate {
45            0% {
46                transform: rotate(0deg);
47            }
48            100% {
49                transform: rotate(360deg);
50            }
51        }
52        
53        .color-change {
54            animation: colorChange 4s ease infinite;
55        }
56        
57        @keyframes colorChange {
58            0% {
59                filter: hue-rotate(0deg);
60            }
61            100% {
62                filter: hue-rotate(360deg);
63            }
64        }
65        
66        .extended-spinner {
67            width: 200px;
68            height: 200px;
69        }
70        .extended-spinner div {
71            width: 100px;
72            height: 100px;
73            animation: extendedRotate 4s ease infinite;
74        }
75        
76        @keyframes extendedRotate {
77            0% {
78                transform: rotate(0deg);
79            }
80            50% {
81                transform: rotate(180deg);
82            }
83            100% {
84                transform: rotate(360deg);
85            }
86        }
87    </style>
88</head>
89<body>
90    <div class="spinner">
91        <div class="color-change" style="background: linear-gradient(90deg, #ff0000 0%, #ffa500 50%, #ffff00 100%);"></div>
92        <div class="color-change" style="background: linear-gradient(90deg, #00ff00 0%, #00ffff 50%, #0000ff 100%);"></div>
93        <div class="color-change" style="background: linear-gradient(90deg, #ff00ff 0%, #ff00ff 50%, #00ff00 100%);"></div>
94        <div class="color-change" style="background: linear-gradient(90deg, #0000ff 0%, #0000ff 50%, #ff00ff 100%);"></div>
95    </div>
96    <script>
97        // JavaScript code for dynamic changes or interactions can be added here
98    </script>
99</body>
100</html>