model output
Claude Sonnet 4.6

Wave Animation Pure CSS
A 0.99T 0.11
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>Training Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: white;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    font-family: Arial, sans-serif;
17  }
18
19  .word {
20    display: flex;
21    font-size: 52px;
22    font-weight: 900;
23    letter-spacing: 2px;
24  }
25
26  .letter {
27    color: red;
28    display: inline-block;
29  }
30
31  @keyframes pulse {
32    0%   { color: red; }
33    50%  { color: #ffaaaa; }
34    100% { color: red; }
35  }
36</style>
37</head>
38<body>
39<div class="word" id="word">
40  <span class="letter">T</span>
41  <span class="letter">R</span>
42  <span class="letter">A</span>
43  <span class="letter">I</span>
44  <span class="letter">N</span>
45  <span class="letter">I</span>
46  <span class="letter">N</span>
47  <span class="letter">G</span>
48</div>
49
50<script>
51  const letters = document.querySelectorAll('.letter');
52  const totalLetters = letters.length;
53  const letterDuration = 300; // ms per letter
54  const cycleDuration = totalLetters * letterDuration;
55
56  function animateCycle() {
57    letters.forEach((letter, index) => {
58      setTimeout(() => {
59        letter.style.animation = `pulse 300ms ease-in-out`;
60        setTimeout(() => {
61          letter.style.animation = '';
62        }, 300);
63      }, index * letterDuration);
64    });
65  }
66
67  // Run immediately and then repeat
68  animateCycle();
69  setInterval(animateCycle, cycleDuration + 500);
70</script>
71</body>
72</html>