GPT-5.4

Tiny Single Element Loading Animations
A 0.92T 0.20
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>Minimal Pin Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #ffffff;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #fff;
21  }
22
23  /* Small icon positioned near top-left exactly like the frames */
24  .marker {
25    position: absolute;
26    left: 44px;
27    top: 34px;
28    width: 28px;
29    height: 44px;
30  }
31
32  .pin {
33    position: absolute;
34    left: 0;
35    top: 0;
36    width: 28px;
37    height: 34px;
38  }
39
40  .pin svg {
41    display: block;
42    width: 100%;
43    height: 100%;
44  }
45
46  .shadow {
47    position: absolute;
48    left: 1px;
49    top: 36px;
50    width: 27px;
51    height: 8px;
52    border-radius: 50%;
53    background: #b7b7b7;
54  }
55
56  /* Very subtle idle motion inferred from nearly static frames */
57  .marker {
58    animation: float 2.4s ease-in-out infinite;
59    transform-origin: 50% 100%;
60  }
61
62  .shadow {
63    animation: shadowPulse 2.4s ease-in-out infinite;
64  }
65
66  @keyframes float {
67    0%, 100% { transform: translateY(0); }
68    50%      { transform: translateY(-1px); }
69  }
70
71  @keyframes shadowPulse {
72    0%, 100% {
73      transform: scaleX(1) scaleY(1);
74      opacity: 1;
75    }
76    50% {
77      transform: scaleX(0.96) scaleY(0.95);
78      opacity: 0.92;
79    }
80  }
81</style>
82</head>
83<body>
84  <div class="stage">
85    <div class="marker" aria-hidden="true">
86      <div class="pin">
87        <svg viewBox="0 0 28 34" xmlns="http://www.w3.org/2000/svg">
88          <!-- thin light-gray outlined map-pin / balloon shape -->
89          <path
90            d="M14 1.5
91               C7.1 1.5 1.8 6.9 1.8 13.6
92               C1.8 18.2 4.2 21.8 7.8 25.8
93               C10.2 28.5 12.5 30.6 13.4 31.4
94               C13.7 31.7 14.3 31.7 14.6 31.4
95               C15.5 30.6 17.8 28.5 20.2 25.8
96               C23.8 21.8 26.2 18.2 26.2 13.6
97               C26.2 6.9 20.9 1.5 14 1.5 Z"
98            fill="#ffffff"
99            stroke="#cfcfcf"
100            stroke-width="2"
101            stroke-linejoin="round"
102          />
103        </svg>
104      </div>
105      <div class="shadow"></div>
106    </div>
107  </div>
108</body>
109</html>