Gemini 3 Flash Preview

Only CSS: Responsive City Drone View Black
A 0.65T 0.29
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 Pillars Animation</title>
7    <style>
8        /* Base styles to match the dark, void-like environment */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            background-color: #000;
15            overflow: hidden;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19        }
20
21        /* 3D Scene container */
22        .scene {
23            width: 100vw;
24            height: 100vh;
25            perspective: 800px; /* Creates depth */
26            perspective-origin: 50% 30%;
27            overflow: hidden;
28        }
29
30        /* Container for the pillars that provides the camera tilt */
31        .world {
32            position: relative;
33            width: 100%;
34            height: 100%;
35            transform-style: preserve-3d;
36            transform: rotateX(65deg) rotateZ(10deg);
37        }
38
39        /* Base Pillar Styles */
40        .pillar {
41            position: absolute;
42            width: 60px;
43            height: 60px;
44            transform-style: preserve-3d;
45            /* The animation moves them from deep in the background towards the camera */
46            animation: moveUp 8s linear infinite;
47        }
48
49        /* Individual faces of the pillar to give it volume */
50        .face {
51            position: absolute;
52            width: 60px;
53            height: 1000px; /* Tall pillars as seen in video */
54            background: #0a0a0a;
55        }
56
57        /* Top face - this is the most visible face in the video */
58        .face.top {
59            width: 60px;
60            height: 60px;
61            background: #2a2a2a; /* Slightly lighter gray for the top cap */
62            transform: translateY(-30px) rotateX(90deg);
63            box-shadow: inset 0 0 15px rgba(255,255,255,0.05);
64        }
65
66        /* Sides - dark with slight variations to differentiate edges */
67        .face.front  { transform: translateZ(30px); background: #111; }
68        .face.back   { transform: rotateY(180deg) translateZ(30px); background: #080808; }
69        .face.left   { transform: rotateY(-90deg) translateZ(30px); background: #151515; }
70        .face.right  { transform: rotateY(90deg) translateZ(30px); background: #121212; }
71
72        /* Animation: Objects "fall" or camera moves through them */
73        @keyframes moveUp {
74            0% {
75                transform: translate3d(var(--x), var(--y), -1500px);
76                opacity: 0;
77            }
78            10% {
79                opacity: 1;
80            }
81            90% {
82                opacity: 1;
83            }
84            100% {
85                transform: translate3d(var(--x), var(--y), 1000px);
86                opacity: 0;
87            }
88        }
89    </style>
90</head>
91<body>
92
93    <div class="scene">
94        <div class="world" id="world">
95            <!-- Pillars will be generated here -->
96        </div>
97    </div>
98
99    <script>
100        const world = document.getElementById('world');
101        const pillarCount = 25; // Number of pillars in the scene
102
103        function createPillar() {
104            const pillar = document.createElement('div');
105            pillar.className = 'pillar';
106
107            // Randomize position across a wide plane
108            const x = Math.random() * 2000 - 1000;
109            const y = Math.random() * 2000 - 1000;
110            const delay = Math.random() * -8; // Staggered start times for continuous flow
111
112            pillar.style.setProperty('--x', `${x}px`);
113            pillar.style.setProperty('--y', `${y}px`);
114            pillar.style.animationDelay = `${delay}s`;
115
116            // Create faces
117            const faces = ['top', 'front', 'back', 'left', 'right'];
118            faces.forEach(faceType => {
119                const face = document.createElement('div');
120                face.className = `face ${faceType}`;
121                pillar.appendChild(face);
122            });
123
124            world.appendChild(pillar);
125        }
126
127        // Initialize the forest of pillars
128        for (let i = 0; i < pillarCount; i++) {
129            createPillar();
130        }
131
132        /**
133         * The video has a very specific "gliding" feel. 
134         * The CSS animation provides the linear speed.
135         * The rotateX(65deg) on the world container provides the 
136         * top-down perspective observed as the pillars pass by the camera.
137         */
138    </script>
139</body>
140</html>