model output
Gemini 3 Flash Preview

Staggered Stair Loading
A 0.92T 0.30
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>Loading Animation</title>
7    <style>
8        /* 
9           Color Palette:
10           Background: #2e86c1 (A vibrant flat UI blue)
11           Box Color: #34495e (Wet Asphalt)
12           Text Color: #ffffff (White)
13        */
14
15        body {
16            margin: 0;
17            padding: 0;
18            display: flex;
19            justify-content: center;
20            align-items: center;
21            height: 100vh;
22            background-color: #2e86c1;
23            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
24            overflow: hidden;
25        }
26
27        .loader {
28            display: flex;
29            user-select: none;
30        }
31
32        .loader span {
33            display: flex;
34            justify-content: center;
35            align-items: center;
36            width: 50px;
37            height: 60px;
38            background-color: #34495e;
39            color: #ffffff;
40            font-size: 28px;
41            font-weight: 600;
42            letter-spacing: 2px;
43            /* Animation properties */
44            animation: bounce 1.5s infinite ease-in-out;
45            /* This ensures boxes are flush against each other initially */
46            margin: 0; 
47        }
48
49        /* 
50           Keyframes:
51           The letters move up and then return. 
52           We use translateY to match the vertical bobbing motion.
53        */
54        @keyframes bounce {
55            0%, 100% {
56                transform: translateY(0);
57            }
58            30% {
59                transform: translateY(-20px);
60            }
61            60% {
62                transform: translateY(0);
63            }
64        }
65
66        /* 
67           Staggering the animation:
68           Each letter starts its animation 0.1s after the previous one
69           to create the "wave" effect seen in the video.
70        */
71        .loader span:nth-child(1) { animation-delay: 0.0s; }
72        .loader span:nth-child(2) { animation-delay: 0.1s; }
73        .loader span:nth-child(3) { animation-delay: 0.2s; }
74        .loader span:nth-child(4) { animation-delay: 0.3s; }
75        .loader span:nth-child(5) { animation-delay: 0.4s; }
76        .loader span:nth-child(6) { animation-delay: 0.5s; }
77        .loader span:nth-child(7) { animation-delay: 0.6s; }
78
79    </style>
80</head>
81<body>
82
83    <div class="loader">
84        <span>L</span>
85        <span>O</span>
86        <span>A</span>
87        <span>D</span>
88        <span>I</span>
89        <span>N</span>
90        <span>G</span>
91    </div>
92
93</body>
94</html>