model output
GPT-5.4

Staggered Stair Loading
A 0.96T 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" />
6<title>Loading Animation Replica</title>
7<style>
8  :root{
9    --bg:#3382b8;
10    --tile:#3b5169;
11    --text:#f4f1ea;
12    --shine:#e9edf1;
13    --shine2:#b9d3e8;
14    --w:72px;
15    --h:100px;
16    --dur:1.8s;
17  }
18
19  *{box-sizing:border-box}
20  html,body{
21    margin:0;
22    width:100%;
23    height:100%;
24    overflow:hidden;
25    background:var(--bg);
26    font-family:Arial, Helvetica, sans-serif;
27  }
28
29  .stage{
30    width:100%;
31    height:100%;
32    display:grid;
33    place-items:center;
34  }
35
36  .loader{
37    display:flex;
38    align-items:center;
39    justify-content:center;
40    transform:translateY(-6px);
41  }
42
43  .tile{
44    position:relative;
45    width:var(--w);
46    height:var(--h);
47    background:var(--tile);
48    color:var(--text);
49    display:flex;
50    align-items:center;
51    justify-content:center;
52    font-size:50px;
53    font-weight:300;
54    letter-spacing:0.02em;
55    overflow:visible;
56    animation: stepWave var(--dur) linear infinite;
57    z-index:1;
58  }
59
60  .tile span{
61    position:relative;
62    z-index:2;
63    transform:translateY(2px);
64  }
65
66  .tile::before{
67    content:"";
68    position:absolute;
69    left:0;
70    right:0;
71    bottom:-1px;
72    height:20px;
73    background:
74      linear-gradient(to bottom,
75        rgba(255,255,255,.92) 0 58%,
76        rgba(185,211,232,.95) 58% 100%);
77    opacity:0;
78    z-index:0;
79    animation: shineWave var(--dur) linear infinite;
80    animation-delay:inherit;
81  }
82
83  .tile:nth-child(1){animation-delay:0s}
84  .tile:nth-child(2){animation-delay:calc(var(--dur) * -0.095)}
85  .tile:nth-child(3){animation-delay:calc(var(--dur) * -0.19)}
86  .tile:nth-child(4){animation-delay:calc(var(--dur) * -0.285)}
87  .tile:nth-child(5){animation-delay:calc(var(--dur) * -0.38)}
88  .tile:nth-child(6){animation-delay:calc(var(--dur) * -0.475)}
89  .tile:nth-child(7){animation-delay:calc(var(--dur) * -0.57)}
90
91  @keyframes stepWave{
92    0%,100%{
93      transform:translateY(0);
94    }
95    12%{
96      transform:translateY(-27px);
97    }
98    24%{
99      transform:translateY(-15px);
100    }
101    36%{
102      transform:translateY(0);
103    }
104    100%{
105      transform:translateY(0);
106    }
107  }
108
109  @keyframes shineWave{
110    0%,8%,100%{
111      opacity:0;
112      transform:translateY(0);
113    }
114    12%{
115      opacity:.95;
116      transform:translateY(0);
117    }
118    24%{
119      opacity:.75;
120      transform:translateY(0);
121    }
122    36%{
123      opacity:0;
124      transform:translateY(0);
125    }
126  }
127
128  @media (max-width: 900px){
129    :root{
130      --w:64px;
131      --h:92px;
132    }
133    .tile{font-size:44px}
134  }
135</style>
136</head>
137<body>
138  <div class="stage">
139    <div class="loader" aria-label="Loading">
140      <div class="tile"><span>L</span></div>
141      <div class="tile"><span>O</span></div>
142      <div class="tile"><span>A</span></div>
143      <div class="tile"><span>D</span></div>
144      <div class="tile"><span>I</span></div>
145      <div class="tile"><span>N</span></div>
146      <div class="tile"><span>G</span></div>
147    </div>
148  </div>
149</body>
150</html>