← back to Loading Text (real PURE CSS)compare with ground truth →
model output
Claude Sonnet 4.6
Loading Text (real PURE CSS)
A 0.78T 0.15
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>Loading Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #0a0a0a;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 overflow: hidden;
17 font-family: 'Arial', sans-serif;
18 }
19
20 .scene {
21 position: relative;
22 width: 400px;
23 height: 80px;
24 perspective: 600px;
25 }
26
27 .loading-container {
28 position: absolute;
29 top: 50%;
30 left: 50%;
31 transform: translate(-50%, -50%);
32 display: flex;
33 align-items: center;
34 }
35
36 .letter {
37 display: inline-block;
38 font-size: 48px;
39 font-weight: bold;
40 letter-spacing: 4px;
41 color: #cc0000;
42 position: relative;
43 animation-fill-mode: both;
44 text-transform: uppercase;
45 }
46
47 /* Shadow/reflection row */
48 .shadow-container {
49 position: absolute;
50 top: 50%;
51 left: 50%;
52 transform: translate(-50%, -50%) translateY(30px);
53 display: flex;
54 align-items: center;
55 opacity: 0.4;
56 }
57
58 .shadow-letter {
59 display: inline-block;
60 font-size: 36px;
61 font-weight: bold;
62 letter-spacing: 4px;
63 color: #330000;
64 text-transform: uppercase;
65 animation-fill-mode: both;
66 }
67
68 /* Individual letter animations - main row */
69 .l1 { animation: letterDrop 0.4s ease-out 0.2s both, letterGlow 3s ease-in-out 0.2s infinite; }
70 .l2 { animation: letterDrop 0.4s ease-out 0.5s both, letterGlow 3s ease-in-out 0.5s infinite; }
71 .l3 { animation: letterDrop 0.4s ease-out 0.8s both, letterGlow 3s ease-in-out 0.8s infinite; }
72 .l4 { animation: letterDrop 0.4s ease-out 1.1s both, letterGlow 3s ease-in-out 1.1s infinite; }
73 .l5 { animation: letterDrop 0.4s ease-out 1.4s both, letterGlow 3s ease-in-out 1.4s infinite; }
74 .l6 { animation: letterDrop 0.4s ease-out 1.7s both, letterGlow 3s ease-in-out 1.7s infinite; }
75 .l7 { animation: letterDrop 0.4s ease-out 2.0s both, letterGlow 3s ease-in-out 2.0s infinite; }
76 .l8 { animation: letterDrop 0.4s ease-out 2.2s both, letterGlow 3s ease-in-out 2.2s infinite; }
77 .l9 { animation: letterDrop 0.4s ease-out 2.4s both, letterGlow 3s ease-in-out 2.4s infinite; }
78 .l10 { animation: letterDrop 0.4s ease-out 2.6s both, letterGlow 3s ease-in-out 2.6s infinite; }
79
80 /* Shadow letters */
81 .s1 { animation: shadowDrop 0.4s ease-out 0.2s both; }
82 .s2 { animation: shadowDrop 0.4s ease-out 0.5s both; }
83 .s3 { animation: shadowDrop 0.4s ease-out 0.8s both; }
84 .s4 { animation: shadowDrop 0.4s ease-out 1.1s both; }
85 .s5 { animation: shadowDrop 0.4s ease-out 1.4s both; }
86 .s6 { animation: shadowDrop 0.4s ease-out 1.7s both; }
87 .s7 { animation: shadowDrop 0.4s ease-out 2.0s both; }
88 .s8 { animation: shadowDrop 0.4s ease-out 2.2s both; }
89 .s9 { animation: shadowDrop 0.4s ease-out 2.4s both; }
90 .s10 { animation: shadowDrop 0.4s ease-out 2.6s both; }
91
92 @keyframes letterDrop {
93 0% {
94 opacity: 0;
95 transform: translateY(-40px) scale(1.5);
96 color: #ff0000;
97 text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
98 }
99 60% {
100 transform: translateY(5px) scale(0.95);
101 color: #cc0000;
102 }
103 100% {
104 opacity: 1;
105 transform: translateY(0) scale(1);
106 color: #cc0000;
107 text-shadow: 0 0 8px rgba(200, 0, 0, 0.5);
108 }
109 }
110
111 @keyframes shadowDrop {
112 0% {
113 opacity: 0;
114 transform: translateY(-20px);
115 }
116 100% {
117 opacity: 1;
118 transform: translateY(0);
119 }
120 }
121
122 @keyframes letterGlow {
123 0%, 100% { text-shadow: 0 0 8px rgba(200, 0, 0, 0.4); }
124 50% { text-shadow: 0 0 20px rgba(200, 0, 0, 0.8), 0 0 40px rgba(200, 0, 0, 0.3); }
125 }
126
127 /* Whole animation cycles */
128 .loading-container {
129 animation: containerPulse 3s ease-in-out 3s infinite;
130 }
131
132 @keyframes containerPulse {
133 0%, 100% { filter: brightness(1); }
134 50% { filter: brightness(0.6) blur(1px); }
135 }
136
137 .dots {
138 display: inline-flex;
139 gap: 2px;
140 margin-left: 2px;
141 }
142
143 .dot {
144 display: inline-block;
145 font-size: 48px;
146 font-weight: bold;
147 color: #cc0000;
148 animation: dotPulse 1.5s ease-in-out infinite;
149 }
150
151 .dot:nth-child(1) { animation-delay: 2.8s; }
152 .dot:nth-child(2) { animation-delay: 3.0s; }
153 .dot:nth-child(3) { animation-delay: 3.2s; }
154
155 @keyframes dotPulse {
156 0%, 100% { opacity: 0.3; transform: scale(0.8); }
157 50% { opacity: 1; transform: scale(1.2); color: #ff2200; text-shadow: 0 0 10px #ff0000; }
158 }
159
160 /* Glitch/scroll effect */
161 .wrapper {
162 animation: glitchScroll 4s ease-in-out 1s infinite;
163 }
164
165 @keyframes glitchScroll {
166 0%, 100% { transform: translateX(0); filter: none; }
167 10% { transform: translateX(-2px); filter: blur(0.5px); }
168 20% { transform: translateX(2px); }
169 30% { transform: translateX(0); }
170 70% { transform: translateX(0); filter: none; }
171 75% { transform: translateX(-3px); filter: blur(1px) brightness(1.5); }
172 80% { transform: translateX(3px); filter: blur(0.5px); }
173 85% { transform: translateX(0); filter: none; }
174 }
175</style>
176</head>
177<body>
178
179<div class="scene">
180 <div class="wrapper">
181 <div class="loading-container">
182 <span class="letter l1">L</span>
183 <span class="letter l2">O</span>
184 <span class="letter l3">A</span>
185 <span class="letter l4">D</span>
186 <span class="letter l5">I</span>
187 <span class="letter l6">N</span>
188 <span class="letter l7">G</span>
189 <div class="dots">
190 <span class="dot">.</span>
191 <span class="dot">.</span>
192 <span class="dot">.</span>
193 </div>
194 </div>
195
196 <div class="shadow-container">
197 <span class="shadow-letter s1">L</span>
198 <span class="shadow-letter s2">O</span>
199 <span class="shadow-letter s3">A</span>
200 <span class="shadow-letter s4">D</span>
201 <span class="shadow-letter s5">I</span>
202 <span class="shadow-letter s6">N</span>
203 <span class="shadow-letter s7">G</span>
204 <span class="shadow-letter s8" style="font-size:28px;">...</span>
205 </div>
206 </div>
207</div>
208
209</body>
210</html>