model output
GPT-5.4

Animated Concepts #3
A 0.90T 0.28
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>Orbiting Dot Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --pink:#ff7f7f;
11    --size:88px;
12    --stroke:4px;
13    --dot:20px;
14    --duration:1.6s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28  }
29
30  .loader{
31    position:relative;
32    width:var(--size);
33    height:var(--size);
34    animation:pulse var(--duration) ease-in-out infinite;
35    transform-origin:center;
36  }
37
38  .ring{
39    position:absolute;
40    inset:0;
41    border-radius:50%;
42    border:var(--stroke) solid var(--pink);
43    box-sizing:border-box;
44    opacity:.95;
45    filter:drop-shadow(0 0 1px rgba(255,127,127,.25));
46  }
47
48  .dot-wrap{
49    position:absolute;
50    inset:0;
51    animation:orbit var(--duration) linear infinite;
52    transform-origin:center;
53  }
54
55  .dot{
56    position:absolute;
57    width:var(--dot);
58    height:var(--dot);
59    border-radius:50%;
60    background:var(--pink);
61    top:calc(var(--stroke) - var(--dot) * 0.18);
62    left:50%;
63    transform:translateX(-50%);
64    box-shadow:0 0 2px rgba(255,127,127,.25);
65  }
66
67  /* subtle echo seen in middle frames */
68  .echo{
69    position:absolute;
70    inset:0;
71    border-radius:50%;
72    border:2px solid var(--pink);
73    opacity:0;
74    transform:scale(.45);
75    animation:echo var(--duration) ease-out infinite;
76  }
77
78  @keyframes orbit{
79    from{ transform:rotate(25deg); }
80    to{ transform:rotate(385deg); }
81  }
82
83  @keyframes pulse{
84    0%, 100%{ transform:scale(1); }
85    42%{ transform:scale(.42); }
86    50%{ transform:scale(.34); }
87    58%{ transform:scale(.42); }
88  }
89
90  @keyframes echo{
91    0%, 34%{
92      opacity:0;
93      transform:scale(.45);
94    }
95    46%{
96      opacity:.55;
97      transform:scale(.72);
98    }
99    54%{
100      opacity:.28;
101      transform:scale(1.18);
102    }
103    64%,100%{
104      opacity:0;
105      transform:scale(1.45);
106    }
107  }
108</style>
109</head>
110<body>
111  <div class="loader" aria-label="loading animation">
112    <div class="echo"></div>
113    <div class="ring"></div>
114    <div class="dot-wrap">
115      <div class="dot"></div>
116    </div>
117  </div>
118</body>
119</html>