model output
GPT-5.4

Sequenced SplitText Animation
A 0.93T 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>Text Blur Slide Animation</title>
7<style>
8  :root{
9    --bg1:#e8f2ff;
10    --bg2:#f8edf2;
11    --text:#2f3f52;
12    --blur:10px;
13    --dur:10s;
14    --font: "Helvetica Neue", Arial, sans-serif;
15  }
16
17  *{box-sizing:border-box}
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    overflow:hidden;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28    background:linear-gradient(180deg,var(--bg1) 0%, #eef0fb 45%, var(--bg2) 100%);
29    font-family:var(--font);
30  }
31
32  .stage{
33    width:100%;
34    height:100%;
35    display:grid;
36    place-items:center;
37    position:relative;
38  }
39
40  .block{
41    position:absolute;
42    left:50%;
43    top:50%;
44    transform:translate(-50%,-50%);
45    text-align:center;
46    color:var(--text);
47    letter-spacing:.22em;
48    font-weight:300;
49    line-height:1.55;
50    white-space:nowrap;
51    filter:blur(var(--blur));
52    opacity:0;
53    will-change:transform,opacity,filter;
54    animation-duration:var(--dur);
55    animation-timing-function:linear;
56    animation-iteration-count:infinite;
57  }
58
59  .block .line{
60    font-size:clamp(22px, 3vw, 34px);
61  }
62
63  .block.one{
64    animation-name:block1;
65  }
66
67  .block.two{
68    animation-name:block2;
69  }
70
71  @keyframes block1{
72    0%{
73      opacity:0;
74      filter:blur(var(--blur));
75      transform:translate(-58%,-50%);
76    }
77    8%{
78      opacity:1;
79      filter:blur(0);
80      transform:translate(-50%,-50%);
81    }
82    34%{
83      opacity:1;
84      filter:blur(0);
85      transform:translate(-50%,-50%);
86    }
87    42%{
88      opacity:0;
89      filter:blur(var(--blur));
90      transform:translate(-42%,-50%);
91    }
92    100%{
93      opacity:0;
94      filter:blur(var(--blur));
95      transform:translate(-42%,-50%);
96    }
97  }
98
99  @keyframes block2{
100    0%,44%{
101      opacity:0;
102      filter:blur(var(--blur));
103      transform:translate(-58%,-50%);
104    }
105    54%{
106      opacity:1;
107      filter:blur(0);
108      transform:translate(-50%,-50%);
109    }
110    88%{
111      opacity:1;
112      filter:blur(0);
113      transform:translate(-50%,-50%);
114    }
115    96%,100%{
116      opacity:0;
117      filter:blur(var(--blur));
118      transform:translate(-42%,-50%);
119    }
120  }
121
122  @media (max-width:700px){
123    .block{
124      letter-spacing:.16em;
125      width:min(92vw,900px);
126      white-space:normal;
127      padding:0 1rem;
128    }
129    .block .line{
130      font-size:clamp(20px, 5vw, 30px);
131    }
132  }
133</style>
134</head>
135<body>
136  <div class="stage">
137    <div class="block one" aria-label="Do you know CSS Animation? It's really awesome!">
138      <div class="line">Do you know CSS Animation?</div>
139      <div class="line">It's really awesome!</div>
140    </div>
141
142    <div class="block two" aria-label="But when combined with JS Animation, It will be stunning awesome!">
143      <div class="line">But when combined with JS Animation,</div>
144      <div class="line">It will be stunning awesome!</div>
145    </div>
146  </div>
147</body>
148</html>