model output
GPT-5.4

Animated Radio Waves
A 0.82T 0.23
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>Echo Dot Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #fff;
14  }
15
16  body {
17    position: relative;
18    font-family: sans-serif;
19  }
20
21  .scene {
22    position: relative;
23    width: 100vw;
24    height: 100vh;
25    background: #fff;
26  }
27
28  /* black dot at right */
29  .dot {
30    position: absolute;
31    right: 3.2vw;
32    top: 18.8vh;
33    width: 3.1vw;
34    height: 3.1vw;
35    min-width: 22px;
36    min-height: 22px;
37    max-width: 32px;
38    max-height: 32px;
39    background: #000;
40    border-radius: 50%;
41    z-index: 3;
42  }
43
44  /* container for all wave marks */
45  .waves {
46    position: absolute;
47    inset: 0;
48  }
49
50  .arc {
51    position: absolute;
52    top: 14.5vh;
53    height: 10vh;
54    border-left-style: solid;
55    border-left-color: currentColor;
56    border-top-left-radius: 999px;
57    border-bottom-left-radius: 999px;
58    transform-origin: center center;
59    animation: pulse 1.8s linear infinite;
60    opacity: 0;
61  }
62
63  /* approximate positions/sizes from frames */
64  .a1 {
65    left: 89.2vw;
66    width: 1.2vw;
67    min-width: 8px;
68    height: 4.2vh;
69    color: rgba(170,170,170,.55);
70    border-left-width: 3px;
71    animation-delay: 0s;
72  }
73
74  .a2 {
75    left: 84.8vw;
76    width: 1.7vw;
77    min-width: 12px;
78    height: 5.8vh;
79    color: rgba(145,145,145,.72);
80    border-left-width: 4px;
81    animation-delay: .18s;
82  }
83
84  .a3 {
85    left: 77.2vw;
86    width: 2.2vw;
87    min-width: 16px;
88    height: 8.2vh;
89    color: rgba(95,95,95,.9);
90    border-left-width: 5px;
91    animation-delay: .36s;
92  }
93
94  .a4 {
95    left: 58.2vw;
96    width: 2.6vw;
97    min-width: 18px;
98    height: 10.2vh;
99    color: rgba(35,35,35,.98);
100    border-left-width: 7px;
101    animation-delay: .54s;
102  }
103
104  .a5 {
105    left: 39.2vw;
106    width: 3vw;
107    min-width: 22px;
108    height: 12.8vh;
109    color: rgba(110,110,110,.82);
110    border-left-width: 8px;
111    animation-delay: .72s;
112  }
113
114  .a6 {
115    left: 24.2vw;
116    width: 3.4vw;
117    min-width: 24px;
118    height: 15.8vh;
119    color: rgba(185,185,185,.55);
120    border-left-width: 9px;
121    animation-delay: .9s;
122  }
123
124  .a7 {
125    left: -1.2vw;
126    width: 3.8vw;
127    min-width: 26px;
128    height: 18vh;
129    color: rgba(235,235,235,.9);
130    border-left-width: 10px;
131    animation-delay: 1.08s;
132  }
133
134  @keyframes pulse {
135    0% {
136      opacity: 0;
137      transform: translateX(2vw) scaleY(.92);
138    }
139    8% {
140      opacity: 1;
141    }
142    22% {
143      opacity: 1;
144      transform: translateX(0) scaleY(1);
145    }
146    55% {
147      opacity: 1;
148      transform: translateX(0) scaleY(1);
149    }
150    100% {
151      opacity: 0;
152      transform: translateX(-1vw) scaleY(1.02);
153    }
154  }
155</style>
156</head>
157<body>
158  <div class="scene">
159    <div class="waves">
160      <div class="arc a1"></div>
161      <div class="arc a2"></div>
162      <div class="arc a3"></div>
163      <div class="arc a4"></div>
164      <div class="arc a5"></div>
165      <div class="arc a6"></div>
166      <div class="arc a7"></div>
167    </div>
168    <div class="dot"></div>
169  </div>
170</body>
171</html>