model output
GPT-5.4

Nice spinny stuff
A 0.94T 0.40
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>Pink Dot Wave Loader</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #fff;
13    overflow: hidden;
14    font-family: sans-serif;
15  }
16
17  .stage {
18    position: relative;
19    width: 100vw;
20    height: 100vh;
21    background: #fff;
22  }
23
24  /* Positioned near the upper-left like the reference */
25  .loader {
26    position: absolute;
27    left: 78px;
28    top: 138px;
29    width: 150px;
30    height: 42px;
31  }
32
33  .dot {
34    --i: 0;
35    position: absolute;
36    left: calc(var(--i) * 20px);
37    top: 50%;
38    width: 10px;
39    height: 10px;
40    margin: -5px 0 0 -5px;
41    border-radius: 50%;
42    background: radial-gradient(circle at 35% 35%, #ffd7e3 0%, #f8bfd0 45%, #f3a9c0 100%);
43    opacity: 0.72;
44    transform: translateY(0) scale(0.42);
45    animation: wave 1.25s ease-in-out infinite;
46    animation-delay: calc(var(--i) * -0.095s);
47    filter: blur(0.15px);
48  }
49
50  @keyframes wave {
51    0%, 100% {
52      transform: translateY(0px) scale(0.42);
53      opacity: 0.68;
54    }
55    12.5% {
56      transform: translateY(-8px) scale(0.62);
57      opacity: 0.72;
58    }
59    25% {
60      transform: translateY(-15px) scale(0.95);
61      opacity: 0.8;
62    }
63    37.5% {
64      transform: translateY(-20px) scale(1.28);
65      opacity: 0.88;
66    }
67    50% {
68      transform: translateY(-17px) scale(1.08);
69      opacity: 0.84;
70    }
71    62.5% {
72      transform: translateY(-8px) scale(0.72);
73      opacity: 0.76;
74    }
75    75% {
76      transform: translateY(0px) scale(0.42);
77      opacity: 0.68;
78    }
79  }
80</style>
81</head>
82<body>
83  <div class="stage">
84    <div class="loader" aria-label="loading animation">
85      <span class="dot" style="--i:0"></span>
86      <span class="dot" style="--i:1"></span>
87      <span class="dot" style="--i:2"></span>
88      <span class="dot" style="--i:3"></span>
89      <span class="dot" style="--i:4"></span>
90      <span class="dot" style="--i:5"></span>
91      <span class="dot" style="--i:6"></span>
92      <span class="dot" style="--i:7"></span>
93    </div>
94  </div>
95
96  <script>
97    // No JS required; CSS timing reproduces the looping wave motion.
98  </script>
99</body>
100</html>