← back to Only CSS: Infinite Plug Incompare with ground truth →
model output
GPT-5.4
Only CSS: Infinite Plug In
A 0.61T 0.41
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>Isometric Cube Hop</title>
7<style>
8 :root{
9 --bg:#ffffff;
10 --tile:74px;
11 --rise:44px;
12 --stepX:110px;
13 --stepY:-71px;
14 --cube:62px;
15 --dur:6s;
16 --camDur:12s;
17 --e:cubic-bezier(.42,0,.2,1);
18 }
19
20 html,body{
21 margin:0;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family:sans-serif;
26 }
27
28 .scene{
29 position:fixed;
30 inset:0;
31 background:#fff;
32 }
33
34 .world{
35 position:absolute;
36 left:0;
37 top:0;
38 width:2200px;
39 height:1600px;
40 transform-origin:0 0;
41 animation: camera var(--camDur) linear infinite;
42 }
43
44 .path{
45 position:absolute;
46 left:230px;
47 top:980px;
48 }
49
50 .step{
51 position:absolute;
52 width:var(--tile);
53 height:var(--tile);
54 transform:skewX(-30deg) rotate(-45deg);
55 transform-origin:center;
56 }
57
58 .step .top{
59 position:absolute;
60 inset:0;
61 background:var(--fill, #fff);
62 box-shadow:
63 0 0 0 1px rgba(0,0,0,.02) inset,
64 0 10px 18px rgba(0,0,0,.04);
65 }
66
67 .step .wall{
68 position:absolute;
69 left:0;
70 top:-1px;
71 width:var(--tile);
72 height:var(--rise);
73 transform-origin:bottom left;
74 transform:
75 translateY(calc(-1 * var(--rise)))
76 skewX(30deg);
77 background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(245,247,250,.88));
78 box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
79 }
80
81 .step .pit{
82 position:absolute;
83 inset:0;
84 background:linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.06) 55%, rgba(0,0,0,0));
85 opacity:.9;
86 }
87
88 .cube{
89 position:absolute;
90 width:var(--cube);
91 height:var(--cube);
92 transform-style:preserve-3d;
93 animation: hop var(--dur) var(--e) infinite;
94 }
95
96 .cube .face{
97 position:absolute;
98 width:100%;
99 height:100%;
100 backface-visibility:hidden;
101 }
102
103 .cube .top{
104 clip-path:polygon(50% 0,100% 25%,50% 50%,0 25%);
105 height:50%;
106 top:0;
107 background:linear-gradient(135deg,var(--c1),var(--c2));
108 }
109
110 .cube .left{
111 clip-path:polygon(0 25%,50% 50%,50% 100%,0 75%);
112 width:50%;
113 left:0;
114 top:25%;
115 height:75%;
116 background:linear-gradient(180deg,var(--c3),var(--c4));
117 }
118
119 .cube .right{
120 clip-path:polygon(50% 50%,100% 25%,100% 75%,50% 100%);
121 width:50%;
122 left:50%;
123 top:25%;
124 height:75%;
125 background:linear-gradient(180deg,var(--c5),var(--c6));
126 }
127
128 .cube .shadow{
129 position:absolute;
130 left:8px;
131 top:48px;
132 width:46px;
133 height:22px;
134 background:radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 72%);
135 filter:blur(3px);
136 animation: shadow var(--dur) var(--e) infinite;
137 }
138
139 .c0{ --c1:#7ef0c0; --c2:#5fd7a8; --c3:#39b985; --c4:#2ea06f; --c5:#4bcf97; --c6:#39b985; animation-delay:0s; }
140 .c1{ --c1:#f0a04f; --c2:#d67d2f; --c3:#c56416; --c4:#a94f0d; --c5:#d97f2d; --c6:#bc620f; animation-delay:1.5s; }
141 .c2{ --c1:#7fb6ff; --c2:#5f97e6; --c3:#4b82cf; --c4:#2f67b8; --c5:#6ea6f2; --c6:#4f86d6; animation-delay:3s; }
142 .c3{ --c1:#4a5cc8; --c2:#3347b0; --c3:#1d2f93; --c4:#0f1d73; --c5:#3b4fb9; --c6:#22379f; animation-delay:4.5s; }
143 .c4{ --c1:#b8b84a; --c2:#9d9d2f; --c3:#8a8a14; --c4:#6f6f0d; --c5:#a8a83a; --c6:#8b8b1f; animation-delay:6s; }
144
145 @keyframes hop{
146 0%{
147 transform:translate(0px,0px) translateY(0) scaleY(.34);
148 opacity:0;
149 }
150 3%{
151 opacity:1;
152 transform:translate(0px,0px) translateY(0) scaleY(.34);
153 }
154 10%{
155 transform:translate(0px,0px) translateY(-118px) scaleY(1);
156 }
157 18%{
158 transform:translate(110px,-71px) translateY(0) scaleY(1);
159 }
160 28%{
161 transform:translate(110px,-71px) translateY(-118px) scaleY(1);
162 }
163 36%{
164 transform:translate(220px,-142px) translateY(0) scaleY(1);
165 }
166 46%{
167 transform:translate(220px,-142px) translateY(-118px) scaleY(1);
168 }
169 54%{
170 transform:translate(330px,-213px) translateY(0) scaleY(1);
171 }
172 64%{
173 transform:translate(330px,-213px) translateY(-118px) scaleY(1);
174 }
175 72%{
176 transform:translate(440px,-284px) translateY(0) scaleY(1);
177 }
178 82%{
179 transform:translate(440px,-284px) translateY(-118px) scaleY(1);
180 }
181 90%{
182 transform:translate(550px,-355px) translateY(0) scaleY(1);
183 opacity:1;
184 }
185 100%{
186 transform:translate(550px,-355px) translateY(0) scaleY(.34);
187 opacity:0;
188 }
189 }
190
191 @keyframes shadow{
192 0%,18%,36%,54%,72%,90%{
193 transform:scale(1);
194 opacity:.22;
195 }
196 10%,28%,46%,64%,82%{
197 transform:scale(.62);
198 opacity:.1;
199 }
200 100%{
201 transform:scale(1);
202 opacity:0;
203 }
204 }
205
206 @keyframes camera{
207 0% { transform:translate(-70px,-120px); }
208 25% { transform:translate(-260px,-250px); }
209 50% { transform:translate(-520px,-430px); }
210 75% { transform:translate(-760px,-590px); }
211 100% { transform:translate(-70px,-120px); }
212 }
213</style>
214</head>
215<body>
216<div class="scene">
217 <div class="world">
218 <div class="path" id="path"></div>
219
220 <div class="cube c0">
221 <div class="shadow"></div>
222 <div class="face top"></div>
223 <div class="face left"></div>
224 <div class="face right"></div>
225 </div>
226 <div class="cube c1">
227 <div class="shadow"></div>
228 <div class="face top"></div>
229 <div class="face left"></div>
230 <div class="face right"></div>
231 </div>
232 <div class="cube c2">
233 <div class="shadow"></div>
234 <div class="face top"></div>
235 <div class="face left"></div>
236 <div class="face right"></div>
237 </div>
238 <div class="cube c3">
239 <div class="shadow"></div>
240 <div class="face top"></div>
241 <div class="face left"></div>
242 <div class="face right"></div>
243 </div>
244 <div class="cube c4">
245 <div class="shadow"></div>
246 <div class="face top"></div>
247 <div class="face left"></div>
248 <div class="face right"></div>
249 </div>
250 </div>
251</div>
252
253<script>
254 const path = document.getElementById('path');
255 const colors = ['#6fe7b8','#d97328','#6ea8f5','#3347b0','#a3a332','#ffffff','#ffffff','#ffffff'];
256 const steps = 8;
257
258 for(let i=0;i<steps;i++){
259 const s = document.createElement('div');
260 s.className = 'step';
261 s.style.left = `${i*110}px`;
262 s.style.top = `${i*-71}px`;
263 s.style.setProperty('--fill', colors[i] || '#fff');
264
265 const top = document.createElement('div');
266 top.className = 'top';
267
268 const pit = document.createElement('div');
269 pit.className = 'pit';
270
271 const wall = document.createElement('div');
272 wall.className = 'wall';
273
274 s.append(top,pit,wall);
275 path.appendChild(s);
276 }
277
278 const cubes = document.querySelectorAll('.cube');
279 cubes.forEach(c=>{
280 c.style.left = '190px';
281 c.style.top = '900px';
282 });
283</script>
284</body>
285</html>