model output
Gemini 3 Flash Preview

Cloudy Spiral CSS animation
A 0.75T 0.33
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>Spiral Circle Animation</title>
7    <style>
8        /* Base styles to match the video background and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            overflow: hidden;
15            background-color: #4676a9; /* Precise blue shade from the video */
16            display: flex;
17            justify-content: center;
18            align-items: center;
19        }
20
21        .container {
22            position: relative;
23            width: 100vw;
24            height: 100vh;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28        }
29
30        .circle {
31            position: absolute;
32            width: 40px;
33            height: 40px;
34            background-color: rgba(255, 255, 255, 0.25);
35            border-radius: 50%;
36            /* Use blur to mimic the soft glow effect seen in the video */
37            filter: blur(2px); 
38            opacity: 0;
39            will-change: transform, opacity;
40            /* The movement is a combination of rotation and outward translation */
41            animation: spiralMove 3.5s linear infinite;
42        }
43
44        @keyframes spiralMove {
45            0% {
46                transform: rotate(0deg) translateX(0) scale(0.1);
47                opacity: 0;
48            }
49            5% {
50                opacity: 0.4;
51            }
52            85% {
53                opacity: 0.2;
54            }
55            100% {
56                /* 1080deg creates 3 full rotations for the spiral effect */
57                /* Scale increases significantly as circles move outward */
58                transform: rotate(1080deg) translateX(650px) scale(8);
59                opacity: 0;
60            }
61        }
62    </style>
63</head>
64<body>
65
66    <div class="container" id="spiral-container">
67        <!-- Circles will be generated by JavaScript -->
68    </div>
69
70    <script>
71        /**
72         * To recreate the dense trail of circles seen in the video,
73         * we generate multiple div elements and stagger their animation delays.
74         */
75        const container = document.getElementById('spiral-container');
76        const circleCount = 60; // Number of circles in the trail
77        const staggerDelay = 0.045; // Time between each circle starting
78
79        function createSpiral() {
80            for (let i = 0; i < circleCount; i++) {
81                const circle = document.createElement('div');
82                circle.className = 'circle';
83                
84                // Stagger the animation-delay for each circle to create the trail effect
85                circle.style.animationDelay = `${i * staggerDelay}s`;
86                
87                container.appendChild(circle);
88            }
89        }
90
91        createSpiral();
92    </script>
93</body>
94</html>