Gemini 3 Flash Preview

Tiny Single Element Loading Animations
A 0.70T 0.24
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>Map Pin Animation</title>
7    <style>
8        /* 
9           Analysis:
10           - The video features a minimalist map pin icon in the top-left corner.
11           - Background: Pure White (#FFFFFF).
12           - Icon Color: Medium Light Gray (approx #A0A0A0).
13           - Animation: The pin performs a subtle, smooth vertical bounce over a period of 2-3 seconds, looping throughout the 5.5s duration.
14        */
15
16        :root {
17            --pin-color: #a0a0a0;
18            --bg-color: #ffffff;
19            --animation-speed: 2.5s;
20        }
21
22        * {
23            margin: 0;
24            padding: 0;
25            box-sizing: border-box;
26        }
27
28        body {
29            background-color: var(--bg-color);
30            height: 100vh;
31            width: 100vw;
32            display: flex;
33            justify-content: flex-start;
34            align-items: flex-start;
35            padding: 24px; /* Matches the top-left offset in the video */
36            overflow: hidden;
37        }
38
39        .marker-container {
40            position: relative;
41            width: 32px;
42            height: 32px;
43            display: flex;
44            justify-content: center;
45            align-items: center;
46            /* The bounce animation */
47            animation: bounce var(--animation-speed) ease-in-out infinite;
48        }
49
50        /* SVG Pin styling to match the thin line aesthetic */
51        .pin-svg {
52            width: 100%;
53            height: 100%;
54            fill: none;
55            stroke: var(--pin-color);
56            stroke-width: 1.2;
57            stroke-linecap: round;
58            stroke-linejoin: round;
59        }
60
61        /* The gentle bounce keyframes */
62        @keyframes bounce {
63            0% {
64                transform: translateY(0);
65            }
66            50% {
67                transform: translateY(-5px); /* Subtle upward movement */
68            }
69            100% {
70                transform: translateY(0);
71            }
72        }
73
74        /* Shadow/Pulse effect under the pin */
75        .shadow {
76            position: absolute;
77            bottom: -2px;
78            left: 50%;
79            transform: translateX(-50%);
80            width: 8px;
81            height: 2px;
82            background: rgba(0, 0, 0, 0.1);
83            border-radius: 50%;
84            animation: shadow-scale var(--animation-speed) ease-in-out infinite;
85        }
86
87        @keyframes shadow-scale {
88            0%, 100% {
89                transform: translateX(-50%) scale(1);
90                opacity: 0.4;
91            }
92            50% {
93                transform: translateX(-50%) scale(1.5);
94                opacity: 0.2;
95            }
96        }
97    </style>
98</head>
99<body>
100
101    <div class="marker-container">
102        <!-- SVG recreation of the location pin icon seen in the video -->
103        <svg class="pin-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
104            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
105            <circle cx="12" cy="10" r="3"></circle>
106        </svg>
107        <div class="shadow"></div>
108    </div>
109
110    <script>
111        // JavaScript is used here to ensure the animation timing matches the specific 5.5s loop
112        // though CSS handles the visual cycle.
113        window.addEventListener('DOMContentLoaded', () => {
114            const container = document.querySelector('.marker-container');
115            const shadow = document.querySelector('.shadow');
116            
117            // Syncing animation delays if necessary
118            container.style.animationDuration = '2.75s'; // Two full bounces in 5.5s
119            shadow.style.animationDuration = '2.75s';
120        });
121    </script>
122</body>
123</html>