model output
LLaMA 4 Scout

CSS3 loading animations
A 0.56T 0.07
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>Red Dots Animation</title>
7    <style>
8        body {
9            background-color: black;
10            overflow: hidden;
11        }
12        .dot {
13            position: absolute;
14            width: 5px;
15            height: 5px;
16            background-color: red;
17            border-radius: 50%;
18        }
19    </style>
20</head>
21<body>
22    <script>
23        // Create dots
24        for (let i = 0; i < 10; i++) {
25            const dot = document.createElement('div');
26            dot.className = 'dot';
27            dot.style.top = `${Math.random() * 100}%`;
28            dot.style.left = `${Math.random() * 100}%`;
29            document.body.appendChild(dot);
30            
31            // Animate dot
32            dot.style.animation = 'move 5s linear infinite';
33            dot.style.animationDelay = `${Math.random() * 5}s`;
34        }
35        
36        // Define keyframe animation
37        const style = document.createElement('style');
38        style.innerHTML = `
39            @keyframes move {
40                0% {
41                    transform: translate(0, 0);
42                }
43                100% {
44                    transform: translate(100px, 100px);
45                }
46            }
47        `;
48        document.head.appendChild(style);
49    </script>
50</body>
51</html>