GPT-5.4

Wave Text Animation(Real PURE CSS)
A 0.81T 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>Wave Text Animation</title>
7<style>
8  :root{
9    --bg:#111;
10    --fg:#e8e8e8;
11    --dur:3.2s;
12    --amp:54px;
13    --blur:10px;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27    font-family: "Courier New", Courier, monospace;
28  }
29
30  .stage{
31    width:100vw;
32    height:100vh;
33    position:relative;
34    display:grid;
35    place-items:center;
36  }
37
38  .line{
39    position:relative;
40    display:flex;
41    align-items:flex-end;
42    justify-content:center;
43    white-space:pre;
44    color:var(--fg);
45    font-size:clamp(28px, 3.2vw, 44px);
46    font-weight:300;
47    letter-spacing:.02em;
48    transform:translateY(-2vh);
49    text-shadow:0 0 0.5px rgba(255,255,255,.8);
50  }
51
52  .ch{
53    display:inline-block;
54    position:relative;
55    animation:wave var(--dur) ease-in-out infinite;
56    animation-delay:calc(var(--i) * 0.085s);
57    will-change:transform, filter, opacity;
58  }
59
60  .space{
61    width:.62em;
62  }
63
64  @keyframes wave{
65    0%, 100%{
66      transform:translateY(0) rotate(0deg) scale(1);
67      filter:blur(0px);
68      opacity:.96;
69    }
70    8%{
71      transform:translateY(0) rotate(0deg) scale(1);
72      filter:blur(0px);
73      opacity:.96;
74    }
75    18%{
76      transform:translateY(calc(var(--amp) * -0.28)) rotate(-1deg) scale(1);
77      filter:blur(1px);
78      opacity:.9;
79    }
80    28%{
81      transform:translateY(calc(var(--amp) * -0.72)) rotate(-2deg) scale(1.01);
82      filter:blur(3px);
83      opacity:.78;
84    }
85    38%{
86      transform:translateY(calc(var(--amp) * -1)) rotate(-3deg) scale(1.02);
87      filter:blur(var(--blur));
88      opacity:.42;
89    }
90    50%{
91      transform:translateY(calc(var(--amp) * -0.72)) rotate(-2deg) scale(1.01);
92      filter:blur(4px);
93      opacity:.72;
94    }
95    62%{
96      transform:translateY(calc(var(--amp) * -0.28)) rotate(-1deg) scale(1);
97      filter:blur(1px);
98      opacity:.9;
99    }
100    72%, 100%{
101      transform:translateY(0) rotate(0deg) scale(1);
102      filter:blur(0px);
103      opacity:.96;
104    }
105  }
106</style>
107</head>
108<body>
109  <div class="stage">
110    <div class="line" id="line" aria-label="LAOLA_W33LL3_IN_3_2_1_!"></div>
111  </div>
112
113<script>
114  const text = "LAOLA_W33LL3_IN_3_2_1_!";
115  const line = document.getElementById("line");
116
117  [...text].forEach((char, i) => {
118    const span = document.createElement("span");
119    span.className = "ch" + (char === " " ? " space" : "");
120    span.style.setProperty("--i", i);
121    span.textContent = char;
122    line.appendChild(span);
123  });
124</script>
125</body>
126</html>