model output
GPT-5.4

background wave animation
A 0.89T 0.35
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>Abstract Blue Arc Sweep</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #1f71bf;
14  }
15
16  body {
17    position: relative;
18  }
19
20  .scene {
21    position: fixed;
22    inset: 0;
23    background: #1f71bf;
24    overflow: hidden;
25  }
26
27  .orb {
28    position: absolute;
29    left: -42vmax;
30    top: -10vmax;
31    width: 92vmax;
32    height: 92vmax;
33    border-radius: 50%;
34    transform-origin: 50% 50%;
35    animation: drift 7.2s linear infinite;
36  }
37
38  .orb::before,
39  .orb::after {
40    content: "";
41    position: absolute;
42    inset: 0;
43    border-radius: 50%;
44  }
45
46  /* Main large cyan body */
47  .orb::before {
48    background: rgba(74, 171, 226, 0.88);
49  }
50
51  /* Soft inner shading to mimic layered translucent overlap */
52  .orb::after {
53    inset: 7%;
54    background: rgba(74, 171, 226, 0.28);
55  }
56
57  .ring,
58  .shadow,
59  .highlight {
60    position: absolute;
61    border-radius: 50%;
62    pointer-events: none;
63    animation: drift 7.2s linear infinite;
64  }
65
66  /* Thin brighter rim */
67  .ring {
68    left: -42vmax;
69    top: -10vmax;
70    width: 92vmax;
71    height: 92vmax;
72    box-sizing: border-box;
73    border: 1.35vmax solid rgba(61, 180, 245, 0.42);
74  }
75
76  /* Darker sweeping crescent behind */
77  .shadow {
78    left: -39vmax;
79    top: -12vmax;
80    width: 88vmax;
81    height: 88vmax;
82    box-sizing: border-box;
83    border: 2.8vmax solid rgba(18, 86, 157, 0.42);
84    clip-path: inset(0 0 0 0);
85  }
86
87  /* Broad translucent leading highlight */
88  .highlight {
89    left: -45vmax;
90    top: -14vmax;
91    width: 96vmax;
92    height: 96vmax;
93    box-sizing: border-box;
94    border: 4.2vmax solid rgba(83, 190, 245, 0.18);
95    border-right-color: transparent;
96    border-bottom-color: transparent;
97    transform-origin: 50% 50%;
98    animation-name: drift, shimmer;
99    animation-duration: 7.2s, 3.6s;
100    animation-timing-function: linear, ease-in-out;
101    animation-iteration-count: infinite, infinite;
102  }
103
104  @keyframes drift {
105    0%   { transform: translate(-10vmax, -2vmax) rotate(0deg); }
106    12.5%{ transform: translate(-4vmax, 1vmax) rotate(18deg); }
107    25%  { transform: translate(2vmax, 5vmax) rotate(42deg); }
108    37.5%{ transform: translate(6vmax, 10vmax) rotate(72deg); }
109    50%  { transform: translate(4vmax, 16vmax) rotate(108deg); }
110    62.5%{ transform: translate(-1vmax, 20vmax) rotate(150deg); }
111    75%  { transform: translate(-7vmax, 16vmax) rotate(214deg); }
112    87.5%{ transform: translate(-11vmax, 8vmax) rotate(286deg); }
113    100% { transform: translate(-10vmax, -2vmax) rotate(360deg); }
114  }
115
116  @keyframes shimmer {
117    0%, 100% { opacity: 0.75; }
118    50% { opacity: 1; }
119  }
120</style>
121</head>
122<body>
123  <div class="scene">
124    <div class="highlight"></div>
125    <div class="shadow"></div>
126    <div class="ring"></div>
127    <div class="orb"></div>
128  </div>
129</body>
130</html>