model output
Gemini 3 Flash Preview

Wave Animation Pure CSS
A 0.97T 0.17
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    /* Reset and Center Container */
9    body, html {
10      margin: 0;
11      padding: 0;
12      width: 100%;
13      height: 100%;
14      display: flex;
15      justify-content: center;
16      align-items: center;
17      background-color: #ffffff;
18      overflow: hidden;
19    }
20
21    /* Text Styling and Animation */
22    .training-text {
23      font-family: "Arial Black", "Arial", sans-serif;
24      font-size: 80px;
25      font-weight: 900;
26      color: #ff0000;
27      text-transform: uppercase;
28      /* Tight letter spacing to match the video's bold look */
29      letter-spacing: -3px;
30      margin: 0;
31      position: relative;
32
33      /* 
34         Create the shimmer effect using a background gradient 
35         clipped to the text. We use a base red with a lighter 
36         red/pink band in the middle.
37      */
38      background: linear-gradient(
39        90deg, 
40        #ff0000 0%, 
41        #ff0000 42%, 
42        #ffb3b3 50%, 
43        #ff0000 58%, 
44        #ff0000 100%
45      );
46      
47      /* Make the background larger than the text so we can slide it across */
48      background-size: 250% 100%;
49      
50      /* Clip the background to the text characters */
51      -webkit-background-clip: text;
52      background-clip: text;
53      
54      /* Make the actual text transparent so the background gradient shows through */
55      -webkit-text-fill-color: transparent;
56      
57      /* Linear animation matching the 3-second loop of the video */
58      animation: shimmer-swipe 3s linear infinite;
59    }
60
61    /* 
62       Keyframes for the "swipe" effect. 
63       Adjusting background-position-x moves the gradient.
64       Starting at a positive value and moving to a negative value 
65       moves the "highlight" from left to right.
66    */
67    @keyframes shimmer-swipe {
68      0% {
69        background-position: 150% 0;
70      }
71      100% {
72        background-position: -50% 0;
73      }
74    }
75
76    /* Responsive adjustment for smaller screens */
77    @media (max-width: 600px) {
78      .training-text {
79        font-size: 12vw;
80        letter-spacing: -1px;
81      }
82    }
83  </style>
84</head>
85<body>
86
87  <h1 class="training-text">TRAINING</h1>
88
89</body>
90</html>