model output
LLaMA 4 Scout

Only CSS: Star Warp Display
A 0.62T 0.27
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: #03055B;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .animation-container {
17            position: relative;
18            width: 200px;
19            height: 350px;
20            background-color: black;
21            border: 1px solid white;
22        }
23        .star {
24            position: absolute;
25            background-color: white;
26            border-radius: 2px;
27        }
28    </style>
29</head>
30<body>
31    <div class="animation-container">
32        <div class="star" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation: twinkle 3s infinite;"></div>
33        <div class="star" style="top: 20%; left: 30%; width: 2px; height: 2px; animation: move 2s infinite;"></div>
34        <div class="star" style="top: 30%; left: 70%; width: 3px; height: 3px; animation: move 2.5s infinite;"></div>
35        <div class="star" style="top: 40%; left: 10%; width: 1px; height: 1px; animation: move 1.5s infinite;"></div>
36        <div class="star" style="top: 60%; left: 40%; width: 4px; height: 4px; animation: move 3s infinite;"></div>
37        <div class="star" style="top: 70%; left: 80%; width: 2px; height: 2px; animation: move 2.2s infinite;"></div>
38        <!-- Add more stars here -->
39    </div>
40
41    <script>
42        // Create stars dynamically
43        for (let i = 0; i < 50; i++) {
44            let star = document.createElement('div');
45            star.classList.add('star');
46            star.style.top = `${Math.random() * 100}%`;
47            star.style.left = `${Math.random() * 100}%`;
48            star.style.width = `${Math.random() * 3}px`;
49            star.style.height = `${Math.random() * 3}px`;
50            star.style.animation = `move ${Math.random() * 3}s infinite`;
51            document.querySelector('.animation-container').appendChild(star);
52        }
53
54        // Animation keyframes
55        const style = document.createElement('style');
56        style.innerHTML = `
57            @keyframes twinkle {
58                0% {
59                    transform: scale(1);
60                }
61                50% {
62                    transform: scale(1.2);
63                }
64                100% {
65                    transform: scale(1);
66                }
67            }
68            @keyframes move {
69                0% {
70                    transform: translate(0, 0);
71                }
72                100% {
73                    transform: translate(10px, 10px);
74                }
75            }
76        `;
77        document.head.appendChild(style);
78    </script>
79</body>
80</html>