Gemini 3 Flash Preview

Wave Text Animation(Real PURE CSS)
A 0.84T 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>Laola Wave Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: #111;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            overflow: hidden;
17        }
18
19        .container {
20            display: flex;
21            gap: 2px;
22        }
23
24        .char {
25            color: #d1d1d1;
26            font-family: 'Courier New', Courier, monospace;
27            font-size: 32px;
28            font-weight: bold;
29            display: inline-block;
30            white-space: pre;
31            /* 
32               Animation duration: 2.5s total cycle
33               Timing: ease-in-out for smooth wave peaks
34            */
35            animation: wave 2.5s ease-in-out infinite;
36        }
37
38        @keyframes wave {
39            0%, 40%, 100% {
40                transform: translateY(0);
41            }
42            20% {
43                transform: translateY(-45px);
44            }
45        }
46
47        /* 
48           Generating delays for each character to create the wave propagation effect.
49           The stagger (0.08s) matches the visual speed of the wave in the video.
50        */
51        .char:nth-child(1)  { animation-delay: 0.00s; }
52        .char:nth-child(2)  { animation-delay: 0.08s; }
53        .char:nth-child(3)  { animation-delay: 0.16s; }
54        .char:nth-child(4)  { animation-delay: 0.24s; }
55        .char:nth-child(5)  { animation-delay: 0.32s; }
56        .char:nth-child(6)  { animation-delay: 0.40s; }
57        .char:nth-child(7)  { animation-delay: 0.48s; }
58        .char:nth-child(8)  { animation-delay: 0.56s; }
59        .char:nth-child(9)  { animation-delay: 0.64s; }
60        .char:nth-child(10) { animation-delay: 0.72s; }
61        .char:nth-child(11) { animation-delay: 0.80s; }
62        .char:nth-child(12) { animation-delay: 0.88s; }
63        .char:nth-child(13) { animation-delay: 0.96s; }
64        .char:nth-child(14) { animation-delay: 1.04s; }
65        .char:nth-child(15) { animation-delay: 1.12s; }
66        .char:nth-child(16) { animation-delay: 1.20s; }
67        .char:nth-child(17) { animation-delay: 1.28s; }
68        .char:nth-child(18) { animation-delay: 1.36s; }
69        .char:nth-child(19) { animation-delay: 1.44s; }
70        .char:nth-child(20) { animation-delay: 1.52s; }
71        .char:nth-child(21) { animation-delay: 1.60s; }
72        .char:nth-child(22) { animation-delay: 1.68s; }
73        .char:nth-child(23) { animation-delay: 1.76s; }
74    </style>
75</head>
76<body>
77
78    <div class="container" id="text-container">
79        <!-- Text: LAOLA_W33LL3_IN_3_2_1_! -->
80    </div>
81
82    <script>
83        const text = "LAOLA_W33LL3_IN_3_2_1_!";
84        const container = document.getElementById('text-container');
85
86        // Dynamically create spans for each character to allow individual animation
87        text.split('').forEach((char, index) => {
88            const span = document.createElement('span');
89            span.textContent = char;
90            span.className = 'char';
91            // Fallback delay setting via JS if nth-child rules were not used
92            span.style.animationDelay = `${index * 0.08}s`;
93            container.appendChild(span);
94        });
95    </script>
96</body>
97</html>