← back to Only CSS: 3D Scan 2compare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: 3D Scan 2
A 0.65T 0.40
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>3D Grid Pulse Animation</title>
7 <style>
8 :root {
9 --bg-color: #0d1117;
10 --wire-color: rgba(100, 150, 255, 0.15);
11 --green: #00ff88;
12 --purple: #a855f7;
13 --dark-blue: #1e293b;
14 --anim-speed: 4s;
15 }
16
17 body {
18 margin: 0;
19 padding: 0;
20 background: radial-gradient(circle, #1a1e2e 0%, #0a0c12 100%);
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 height: 100vh;
25 overflow: hidden;
26 font-family: sans-serif;
27 }
28
29 .scene {
30 perspective: 1200px;
31 width: 500px;
32 height: 500px;
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 }
37
38 .cube-container {
39 position: relative;
40 width: 300px;
41 height: 300px;
42 transform-style: preserve-3d;
43 transform: rotateX(-15deg) rotateY(-20deg);
44 animation: slowRotate 20s linear infinite;
45 }
46
47 @keyframes slowRotate {
48 0% { transform: rotateX(-15deg) rotateY(-20deg); }
49 50% { transform: rotateX(-10deg) rotateY(-15deg); }
50 100% { transform: rotateX(-15deg) rotateY(-20deg); }
51 }
52
53 /* The wireframe cage - multiple nested planes along Z axis */
54 .cage {
55 position: absolute;
56 width: 100%;
57 height: 100%;
58 transform-style: preserve-3d;
59 }
60
61 .cage-plane {
62 position: absolute;
63 width: 100%;
64 height: 100%;
65 border: 0.5px solid var(--wire-color);
66 box-sizing: border-box;
67 pointer-events: none;
68 }
69
70 /* 3x3 Grid of Rings */
71 .grid {
72 position: absolute;
73 width: 100%;
74 height: 100%;
75 display: grid;
76 grid-template-columns: repeat(3, 1fr);
77 grid-template-rows: repeat(3, 1fr);
78 transform-style: preserve-3d;
79 z-index: 10;
80 }
81
82 .ring-stack {
83 position: relative;
84 display: flex;
85 justify-content: center;
86 align-items: center;
87 transform-style: preserve-3d;
88 transform: translateZ(50px);
89 }
90
91 .ring {
92 position: absolute;
93 width: 60px;
94 height: 60px;
95 border-radius: 50%;
96 border: 3px solid transparent;
97 transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
98 box-shadow: 0 0 15px transparent;
99 opacity: 0.2;
100 }
101
102 /* Layers of rings to give depth/tube effect */
103 .ring:nth-child(1) { transform: translateZ(0px); }
104 .ring:nth-child(2) { transform: translateZ(10px); }
105 .ring:nth-child(3) { transform: translateZ(-10px); }
106
107 /* Animation States */
108 @keyframes pulseGreen {
109 0%, 100% { border-color: var(--dark-blue); box-shadow: none; opacity: 0.2; transform: scale(0.6) translateZ(0px); }
110 40%, 60% { border-color: var(--green); box-shadow: 0 0 20px var(--green); opacity: 1; transform: scale(1.1) translateZ(0px); }
111 }
112
113 @keyframes pulsePurple {
114 0%, 100% { border-color: var(--dark-blue); box-shadow: none; opacity: 0.2; transform: scale(0.6) translateZ(0px); }
115 40%, 60% { border-color: var(--purple); box-shadow: 0 0 20px var(--purple); opacity: 1; transform: scale(1.1) translateZ(0px); }
116 }
117
118 /* Applying animations with delays to match video timing */
119 .grid > div:nth-child(1) .ring { animation: pulseGreen var(--anim-speed) infinite; animation-delay: 0s; }
120 .grid > div:nth-child(2) .ring { animation: pulseGreen var(--anim-speed) infinite; animation-delay: 0.5s; }
121 .grid > div:nth-child(3) .ring { animation: pulsePurple var(--anim-speed) infinite; animation-delay: 1s; }
122 .grid > div:nth-child(4) .ring { animation: pulsePurple var(--anim-speed) infinite; animation-delay: 2s; }
123 .grid > div:nth-child(5) .ring { animation: pulseGreen var(--anim-speed) infinite; animation-delay: 1.5s; }
124 .grid > div:nth-child(6) .ring { animation: pulsePurple var(--anim-speed) infinite; animation-delay: 0.2s; }
125 .grid > div:nth-child(7) .ring { animation: pulseGreen var(--anim-speed) infinite; animation-delay: 0.8s; }
126 .grid > div:nth-child(8) .ring { animation: pulseGreen var(--anim-speed) infinite; animation-delay: 2.2s; }
127 .grid > div:nth-child(9) .ring { animation: pulsePurple var(--anim-speed) infinite; animation-delay: 1.2s; }
128
129 </style>
130</head>
131<body>
132
133<div class="scene">
134 <div class="cube-container" id="cube">
135 <!-- Wireframe Cage generated by JS -->
136 <div class="cage" id="cage"></div>
137
138 <!-- 3x3 Grid of ring stacks -->
139 <div class="grid">
140 <!-- 9 Cells -->
141 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
142 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
143 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
144 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
145 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
146 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
147 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
148 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
149 <div class="ring-stack"><div class="ring"></div><div class="ring"></div><div class="ring"></div></div>
150 </div>
151 </div>
152</div>
153
154<script>
155 const cage = document.getElementById('cage');
156 const planeCount = 15; // Number of wireframe slices
157
158 // Generate the wireframe "cage" slices along the Z-axis
159 for (let i = 0; i < planeCount; i++) {
160 const plane = document.createElement('div');
161 plane.className = 'cage-plane';
162
163 // Distribute planes from back to front (-150px to 150px)
164 const zPos = -150 + (i * (300 / (planeCount - 1)));
165 plane.style.transform = `translateZ(${zPos}px)`;
166
167 // Randomly make some planes slightly more visible for depth effect
168 if (i % 5 === 0) {
169 plane.style.borderColor = 'rgba(100, 150, 255, 0.3)';
170 plane.style.borderWidth = '1px';
171 }
172
173 cage.appendChild(plane);
174 }
175
176 // Add longitudinal lines (connecting the planes)
177 const sides = ['top', 'bottom', 'left', 'right'];
178 sides.forEach(side => {
179 const line = document.createElement('div');
180 line.style.position = 'absolute';
181 line.style.backgroundColor = 'var(--wire-color)';
182
183 if (side === 'top' || side === 'bottom') {
184 line.style.width = '1px';
185 line.style.height = '300px';
186 line.style.left = side === 'left' ? '0' : '100%';
187 line.style.transform = `rotateX(90deg) translateZ(150px) translateY(-150px)`;
188 }
189 // Simplified cage logic for visual fidelity without heavy DOM
190 });
191
192 // Subtly animate the individual ring scales to match the video's "organic" feel
193 const rings = document.querySelectorAll('.ring');
194 rings.forEach((ring, index) => {
195 // Offset each ring in its stack slightly more for a 3D tube look
196 const stackIndex = index % 3;
197 ring.style.transform = `translateZ(${(stackIndex - 1) * 12}px)`;
198 });
199</script>
200
201</body>
202</html>