LLaMA 4 Scout

[single element] CSS Double Helix
A 0.52T 0.25
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            margin: 0;
10            background-image: linear-gradient(to right, blue, green, yellow, red);
11            background-size: 100% 100%;
12            height: 100vh;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16        }
17        .dots {
18            position: relative;
19        }
20        .dot {
21            position: absolute;
22            background-color: white;
23            border-radius: 50%;
24            animation: move 10s linear infinite;
25        }
26        @keyframes move {
27            0% {
28                transform: translateX(0);
29            }
30            50% {
31                transform: translateX(200px);
32            }
33            100% {
34                transform: translateX(0);
35            }
36        }
37    </style>
38</head>
39<body>
40    <div class="dots">
41        <!-- dots will be generated here -->
42    </div>
43    <script>
44        const dotsContainer = document.querySelector('.dots');
45        for (let i = 0; i < 50; i++) {
46            const dot = document.createElement('div');
47            dot.classList.add('dot');
48            dot.style.left = `${i * 10}px`;
49            dot.style.top = '50%';
50            dot.style.transform = 'translateY(-50%)';
51            dot.style.width = `${Math.random() * 10 + 5}px`;
52            dot.style.height = dot.style.width;
53            dot.style.animationDelay = `${i * 0.1}s`;
54            dotsContainer.appendChild(dot);
55        }
56    </script>
57</body>
58</html>