← back to Only CSS: Screw 2compare with ground truth →
model output
GPT-5.4
Only CSS: Screw 2
A 0.70T 0.26
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" />
6<title>Screw Text Swirl</title>
7<style>
8 :root{
9 --bg:#1f2b36;
10 --fg:#f7f7f5;
11 --line:#26313c;
12 --dur:3.2s;
13 }
14
15 *{box-sizing:border-box}
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 overflow:hidden;
21 background:var(--bg);
22 font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
23 }
24
25 .stage{
26 position:relative;
27 width:100vw;
28 height:100vh;
29 display:grid;
30 place-items:center;
31 background:var(--bg);
32 }
33
34 .word{
35 position:relative;
36 width:min(72vw, 760px);
37 aspect-ratio: 3.2 / 1;
38 display:grid;
39 place-items:center;
40 isolation:isolate;
41 }
42
43 .text{
44 position:absolute;
45 inset:0;
46 display:grid;
47 place-items:center;
48 color:transparent;
49 font-size:clamp(110px, 18vw, 250px);
50 line-height:1;
51 letter-spacing:.02em;
52 font-weight:900;
53 text-transform:uppercase;
54 user-select:none;
55 white-space:nowrap;
56 }
57
58 /* striped fill clipped to text */
59 .text::before{
60 content:"SCREW";
61 position:absolute;
62 inset:0;
63 display:grid;
64 place-items:center;
65 color:transparent;
66 background:
67 repeating-linear-gradient(
68 100deg,
69 var(--fg) 0 22px,
70 var(--line) 22px 26px
71 );
72 -webkit-background-clip:text;
73 background-clip:text;
74 -webkit-text-fill-color:transparent;
75 }
76
77 /* central vortex distortion */
78 .vortex{
79 position:absolute;
80 left:50%;
81 top:50%;
82 width:min(44vw, 430px);
83 aspect-ratio:1;
84 transform:translate(-50%,-50%);
85 border-radius:50%;
86 overflow:hidden;
87 mix-blend-mode:normal;
88 z-index:2;
89 animation: spin var(--dur) linear infinite;
90 }
91
92 .vortex::before{
93 content:"";
94 position:absolute;
95 inset:-8%;
96 border-radius:50%;
97 background:
98 repeating-conic-gradient(
99 from 0deg,
100 var(--fg) 0deg 22deg,
101 var(--line) 22deg 26deg
102 );
103 animation: pulse var(--dur) cubic-bezier(.55,.05,.45,.95) infinite;
104 }
105
106 .vortex::after{
107 content:"";
108 position:absolute;
109 inset:18%;
110 border-radius:50%;
111 background:
112 radial-gradient(circle at center,
113 var(--fg) 0 10px,
114 transparent 10px 22px,
115 var(--fg) 22px 34px,
116 transparent 34px 100%);
117 filter:blur(.2px);
118 animation: counter var(--dur) linear infinite;
119 }
120
121 /* expanding broken ring made from text-colored shards */
122 .ring{
123 position:absolute;
124 left:50%;
125 top:50%;
126 width:min(18vw, 170px);
127 aspect-ratio:1;
128 transform:translate(-50%,-50%);
129 border-radius:50%;
130 z-index:3;
131 pointer-events:none;
132 animation: ringOrbit var(--dur) cubic-bezier(.6,0,.4,1) infinite;
133 }
134
135 .ring::before{
136 content:"";
137 position:absolute;
138 inset:-10%;
139 border-radius:50%;
140 background:
141 repeating-conic-gradient(
142 from 8deg,
143 transparent 0 12deg,
144 var(--fg) 12deg 28deg,
145 transparent 28deg 42deg,
146 var(--fg) 42deg 58deg,
147 transparent 58deg 74deg
148 );
149 -webkit-mask:
150 radial-gradient(circle,
151 transparent 0 34%,
152 #000 35% 58%,
153 transparent 59% 100%);
154 mask:
155 radial-gradient(circle,
156 transparent 0 34%,
157 #000 35% 58%,
158 transparent 59% 100%);
159 animation: shardSpin var(--dur) cubic-bezier(.55,.05,.45,.95) infinite;
160 }
161
162 /* outer sweeping fragments */
163 .sweep{
164 position:absolute;
165 left:50%;
166 top:50%;
167 width:min(62vw, 620px);
168 aspect-ratio:1;
169 transform:translate(-50%,-50%);
170 border-radius:50%;
171 z-index:4;
172 pointer-events:none;
173 animation: sweepScale var(--dur) cubic-bezier(.6,0,.4,1) infinite;
174 }
175
176 .sweep::before,
177 .sweep::after{
178 content:"";
179 position:absolute;
180 inset:0;
181 border-radius:50%;
182 background:
183 conic-gradient(from 0deg,
184 transparent 0 18deg,
185 var(--fg) 18deg 34deg,
186 transparent 34deg 92deg,
187 var(--fg) 92deg 108deg,
188 transparent 108deg 170deg,
189 var(--fg) 170deg 188deg,
190 transparent 188deg 250deg,
191 var(--fg) 250deg 268deg,
192 transparent 268deg 330deg,
193 var(--fg) 330deg 346deg,
194 transparent 346deg 360deg);
195 -webkit-mask:
196 radial-gradient(circle,
197 transparent 0 58%,
198 #000 59% 73%,
199 transparent 74% 100%);
200 mask:
201 radial-gradient(circle,
202 transparent 0 58%,
203 #000 59% 73%,
204 transparent 74% 100%);
205 opacity:0;
206 }
207
208 .sweep::before{ animation: sweep1 var(--dur) cubic-bezier(.6,0,.4,1) infinite; }
209 .sweep::after{
210 inset:8%;
211 transform:rotate(38deg);
212 animation: sweep2 var(--dur) cubic-bezier(.6,0,.4,1) infinite;
213 }
214
215 @keyframes spin{
216 0%,12% { transform:translate(-50%,-50%) rotate(0deg) scale(1); }
217 28% { transform:translate(-50%,-50%) rotate(70deg) scale(1.02); }
218 45% { transform:translate(-50%,-50%) rotate(165deg) scale(1.08); }
219 62% { transform:translate(-50%,-50%) rotate(255deg) scale(1.03); }
220 82% { transform:translate(-50%,-50%) rotate(330deg) scale(1); }
221 100% { transform:translate(-50%,-50%) rotate(360deg) scale(1); }
222 }
223
224 @keyframes counter{
225 0%,12% { transform:rotate(0deg) scale(1); opacity:1; }
226 45% { transform:rotate(-140deg) scale(1.05); opacity:1; }
227 70% { transform:rotate(-240deg) scale(.96); opacity:1; }
228 100% { transform:rotate(-360deg) scale(1); opacity:1; }
229 }
230
231 @keyframes pulse{
232 0%,10% { transform:scale(.18); opacity:0; }
233 18% { transform:scale(.34); opacity:1; }
234 34% { transform:scale(.62); opacity:1; }
235 50% { transform:scale(.92); opacity:1; }
236 68% { transform:scale(1.18); opacity:1; }
237 84% { transform:scale(1.34); opacity:.9; }
238 100% { transform:scale(1.42); opacity:0; }
239 }
240
241 @keyframes ringOrbit{
242 0%,10% { transform:translate(-50%,-50%) scale(.2) rotate(0deg); opacity:0; }
243 18% { transform:translate(-50%,-50%) scale(.55) rotate(18deg); opacity:1; }
244 34% { transform:translate(-50%,-50%) scale(1.05) rotate(70deg); opacity:1; }
245 50% { transform:translate(-50%,-50%) scale(1.55) rotate(130deg); opacity:1; }
246 68% { transform:translate(-50%,-50%) scale(2.15) rotate(220deg); opacity:.95; }
247 84% { transform:translate(-50%,-50%) scale(2.7) rotate(300deg); opacity:.75; }
248 100% { transform:translate(-50%,-50%) scale(3.05) rotate(360deg); opacity:0; }
249 }
250
251 @keyframes shardSpin{
252 0%,12% { transform:rotate(0deg); }
253 50% { transform:rotate(150deg); }
254 100% { transform:rotate(360deg); }
255 }
256
257 @keyframes sweepScale{
258 0%,28% { transform:translate(-50%,-50%) scale(.55); }
259 50% { transform:translate(-50%,-50%) scale(.9); }
260 75% { transform:translate(-50%,-50%) scale(1.08); }
261 100% { transform:translate(-50%,-50%) scale(1.15); }
262 }
263
264 @keyframes sweep1{
265 0%,30% { opacity:0; transform:rotate(0deg); }
266 42% { opacity:1; transform:rotate(40deg); }
267 58% { opacity:1; transform:rotate(120deg); }
268 76% { opacity:.95; transform:rotate(220deg); }
269 92% { opacity:.35; transform:rotate(300deg); }
270 100% { opacity:0; transform:rotate(340deg); }
271 }
272
273 @keyframes sweep2{
274 0%,36% { opacity:0; transform:rotate(38deg); }
275 48% { opacity:.95; transform:rotate(88deg); }
276 64% { opacity:1; transform:rotate(170deg); }
277 82% { opacity:.8; transform:rotate(260deg); }
278 100% { opacity:0; transform:rotate(338deg); }
279 }
280
281 /* subtle overall breathing to mimic frame softness */
282 .word{
283 animation: settle var(--dur) ease-in-out infinite;
284 }
285 @keyframes settle{
286 0%,100% { transform:translateY(0) scale(1); }
287 50% { transform:translateY(0) scale(1.01); }
288 }
289</style>
290</head>
291<body>
292 <div class="stage">
293 <div class="word" aria-label="SCREW animation">
294 <div class="text"></div>
295 <div class="vortex"></div>
296 <div class="ring"></div>
297 <div class="sweep"></div>
298 </div>
299 </div>
300</body>
301</html>