Claude Sonnet 4.6

Wave Text Animation(Real PURE CSS)
A 0.87T 0.39
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</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #0d0d0d;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    min-height: 100vh;
16    font-family: 'Courier New', Courier, monospace;
17  }
18
19  #text-container {
20    display: flex;
21    align-items: flex-end;
22    position: relative;
23  }
24
25  .char {
26    display: inline-block;
27    color: #cccccc;
28    font-size: 18px;
29    font-weight: 100;
30    letter-spacing: 2px;
31    font-family: 'Courier New', monospace;
32    line-height: 1;
33    animation: wave 3s ease-in-out infinite;
34    transform: translateY(0);
35  }
36
37  @keyframes wave {
38    0%   { transform: translateY(0); font-size: 18px; }
39    30%  { transform: translateY(-40px); font-size: 22px; }
40    60%  { transform: translateY(0); font-size: 18px; }
41    100% { transform: translateY(0); font-size: 18px; }
42  }
43</style>
44</head>
45<body>
46<div id="text-container"></div>
47
48<script>
49  const text = "LAOLA_W33LL3_IN_3_2_1_!";
50  const container = document.getElementById('text-container');
51  const totalDuration = 3000; // ms for full wave cycle
52  const chars = [];
53
54  text.split('').forEach((ch, i) => {
55    const span = document.createElement('span');
56    span.className = 'char';
57    span.textContent = ch === ' ' ? '\u00A0' : ch;
58    
59    // Stagger each character
60    const delay = (i / text.length) * totalDuration * 0.6;
61    span.style.animationDelay = `${delay}ms`;
62    span.style.animationDuration = `${totalDuration}ms`;
63    
64    container.appendChild(span);
65    chars.push(span);
66  });
67</script>
68</body>
69</html>