model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.84T 0.39
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>Coral Orbit Loader</title>
7    <style>
8        /* Base page styling to match the video background */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #1a1a1a;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container for the loader to handle centering and sizing */
21        .loader-container {
22            position: relative;
23            width: 120px;
24            height: 120px;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28        }
29
30        /* 
31           The main loader uses two simultaneous animations:
32           1. A linear rotation for a consistent spin.
33           2. A custom-timed scale animation to recreate the pulsing 'breathing' effect.
34        */
35        .loader-content {
36            width: 100%;
37            height: 100%;
38            display: flex;
39            justify-content: center;
40            align-items: center;
41            animation: 
42                rotate-cycle 3s linear infinite,
43                scale-cycle 3s ease-in-out infinite;
44        }
45
46        /* SVG styling for the ring and the dot */
47        svg {
48            width: 100%;
49            height: 100%;
50            transform: rotate(-90deg); /* Start the dot at the 12 o'clock position */
51        }
52
53        .ring {
54            fill: none;
55            stroke: #f17c7e; /* The specific coral/salmon color from the frames */
56            stroke-width: 2.5;
57            stroke-linecap: round;
58            /* Creates a slight gap in the ring where the dot sits */
59            stroke-dasharray: 235 50; 
60            opacity: 0.9;
61        }
62
63        .dot {
64            fill: #f17c7e;
65            /* Slight drop-shadow to match the anti-aliased/soft look in the video */
66            filter: drop-shadow(0 0 1px rgba(241, 124, 126, 0.5));
67        }
68
69        /* 
70           Continuous 360-degree rotation 
71        */
72        @keyframes rotate-cycle {
73            from {
74                transform: rotate(0deg);
75            }
76            to {
77                transform: rotate(360deg);
78            }
79        }
80
81        /* 
82           The scale animation timing based on the video timestamps:
83           - 0.0s: Normal size (1.0)
84           - 0.5s: Peak expansion (approx 1.45)
85           - 1.5s: Shrinking down
86           - 2.0s: Smallest point (approx 0.2)
87           - 3.0s: Return to start
88        */
89        @keyframes scale-cycle {
90            0% {
91                transform: scale(1);
92            }
93            16.6% { /* 0.5s / 3.0s */
94                transform: scale(1.45);
95            }
96            40% { /* 1.2s */
97                transform: scale(0.9);
98            }
99            66.6% { /* 2.0s */
100                transform: scale(0.2);
101            }
102            85% { /* 2.55s */
103                transform: scale(0.8);
104            }
105            100% {
106                transform: scale(1);
107            }
108        }
109    </style>
110</head>
111<body>
112
113    <div class="loader-container">
114        <div class="loader-content">
115            <svg viewBox="0 0 100 100">
116                <!-- Circular path with a dasharray gap -->
117                <circle class="ring" cx="50" cy="50" r="40" />
118                
119                <!-- Leading dot placed at the start of the stroke -->
120                <!-- cx=90, cy=50 puts it at the '3 o'clock' relative to the center 50,50 -->
121                <!-- Because the SVG is rotated -90deg in CSS, this appears at the top -->
122                <circle class="dot" cx="90" cy="50" r="5.5" />
123            </svg>
124        </div>
125    </div>
126
127</body>
128</html>