model output
LLaMA 4 Scout

Simple Spinner
A 0.67T 0.29
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        body {
9            background-color: #008000;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .square {
18            position: absolute;
19            transform: rotate(0deg);
20            transition: transform 2s ease-out;
21        }
22        .square:nth-child(1) {
23            width: 50px;
24            height: 50px;
25            background-color: #ffffff;
26            animation: scale-out 2s ease-out;
27        }
28        .square:nth-child(2) {
29            width: 70px;
30            height: 70px;
31            border: 2px solid #ffff00;
32            animation: scale-out 2s ease-out 0.2s;
33        }
34        .square:nth-child(3) {
35            width: 90px;
36            height: 90px;
37            border: 2px solid #0000ff;
38            animation: scale-out 2s ease-out 0.4s;
39        }
40        @keyframes scale-out {
41            0% {
42                transform: scale(0);
43                opacity: 1;
44            }
45            100% {
46                transform: scale(5);
47                opacity: 0;
48            }
49        }
50    </style>
51</head>
52<body>
53    <div class="square"></div>
54    <div class="square"></div>
55    <div class="square"></div>
56    <script>
57        // Add rotation animation
58        const squares = document.querySelectorAll('.square');
59        let angle = 0;
60        setInterval(() => {
61            angle += 10;
62            squares.forEach(square => {
63                square.style.transform = `rotate(${angle}deg)`;
64            });
65        }, 1000 / 60);
66    </script>
67</body>
68</html>