← back to Only CSS: Pulse Boxcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Pulse Box
A 0.66T 0.30
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 Neon Wireframe Animation</title>
7 <style>
8 body, html {
9 margin: 0;
10 padding: 0;
11 width: 100%;
12 height: 100%;
13 overflow: hidden;
14 background-color: #000;
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 }
19
20 #scene {
21 position: relative;
22 width: 100vw;
23 height: 100vh;
24 perspective: 800px; /* Strong perspective for depth */
25 transform-style: preserve-3d;
26 }
27
28 .square {
29 position: absolute;
30 top: 50%;
31 left: 50%;
32 width: var(--size);
33 height: var(--size);
34 border: 2px solid var(--color);
35 box-shadow: 0 0 15px var(--color), inset 0 0 5px var(--color);
36 transform-style: preserve-3d;
37 opacity: 0;
38 /* Animation for moving through 3D space */
39 animation: moveThrough var(--duration) linear infinite;
40 animation-delay: var(--delay);
41 }
42
43 @keyframes moveThrough {
44 0% {
45 /* Start far away, slightly randomized center position */
46 transform: translate3d(var(--x-start), var(--y-start), -1500px)
47 rotateX(var(--rot-x-start))
48 rotateY(var(--rot-y-start))
49 rotateZ(0deg);
50 opacity: 0;
51 }
52 10% {
53 opacity: 0.8;
54 }
55 80% {
56 opacity: 1;
57 }
58 100% {
59 /* Fly past the camera with intense rotation */
60 transform: translate3d(var(--x-end), var(--y-end), 800px)
61 rotateX(var(--rot-x-end))
62 rotateY(var(--rot-y-end))
63 rotateZ(360deg);
64 opacity: 0;
65 }
66 }
67 </style>
68</head>
69<body>
70
71 <div id="scene"></div>
72
73 <script>
74 const scene = document.getElementById('scene');
75 const count = 60; // Number of wireframe squares
76 const colors = [
77 'rgba(0, 255, 255, 0.8)', // Cyan
78 'rgba(0, 100, 255, 0.8)', // Blue
79 'rgba(0, 255, 100, 0.8)', // Green
80 'rgba(50, 255, 50, 0.8)' // Bright Green
81 ];
82
83 function createSquare() {
84 const square = document.createElement('div');
85 square.className = 'square';
86
87 // Randomize properties
88 const size = Math.random() * 100 + 100 + 'px';
89 const color = colors[Math.floor(Math.random() * colors.length)];
90 const duration = Math.random() * 4 + 3 + 's'; // 3s to 7s
91 const delay = Math.random() * -10 + 's'; // Negative delay to start mid-animation
92
93 // Randomize spatial positioning
94 const xStart = (Math.random() - 0.5) * 1000 + 'px';
95 const yStart = (Math.random() - 0.5) * 1000 + 'px';
96 const xEnd = (Math.random() - 0.5) * 2000 + 'px';
97 const yEnd = (Math.random() - 0.5) * 2000 + 'px';
98
99 // Randomize rotations
100 const rxStart = Math.random() * 360 + 'deg';
101 const ryStart = Math.random() * 360 + 'deg';
102 const rxEnd = Math.random() * 720 + 'deg';
103 const ryEnd = Math.random() * 720 + 'deg';
104
105 // Set CSS variables
106 square.style.setProperty('--size', size);
107 square.style.setProperty('--color', color);
108 square.style.setProperty('--duration', duration);
109 square.style.setProperty('--delay', delay);
110 square.style.setProperty('--x-start', xStart);
111 square.style.setProperty('--y-start', yStart);
112 square.style.setProperty('--x-end', xEnd);
113 square.style.setProperty('--y-end', yEnd);
114 square.style.setProperty('--rot-x-start', rxStart);
115 square.style.setProperty('--rot-y-start', ryStart);
116 square.style.setProperty('--rot-x-end', rxEnd);
117 square.style.setProperty('--rot-y-end', ryEnd);
118
119 // Centering helper
120 square.style.marginLeft = `-${parseInt(size)/2}px`;
121 square.style.marginTop = `-${parseInt(size)/2}px`;
122
123 scene.appendChild(square);
124 }
125
126 // Initialize scene
127 for (let i = 0; i < count; i++) {
128 createSquare();
129 }
130
131 // Occasionally re-randomize to ensure variety over time
132 setInterval(() => {
133 const squares = document.querySelectorAll('.square');
134 if (squares.length < count) createSquare();
135 }, 1000);
136 </script>
137</body>
138</html>