Gemini 3 Flash Preview

Only CSS: Grid Template Animation
A 0.80T 0.32
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>Geometric Grid Animation</title>
7    <style>
8        :root {
9            --bg-color: #05080b;
10            --accent-color: #64fcf2;
11            --grid-size: 12;
12            --cell-base-size: 20px;
13        }
14
15        body, html {
16            margin: 0;
17            padding: 0;
18            width: 100%;
19            height: 100%;
20            display: flex;
21            justify-content: center;
22            align-items: center;
23            background: radial-gradient(circle, #16212b 0%, #05080b 100%);
24            overflow: hidden;
25        }
26
27        /* The container handles the slight tilt seen in the video */
28        .stage {
29            transform: rotate(-12deg);
30            display: flex;
31            flex-direction: column;
32            gap: 4px;
33        }
34
35        .row {
36            display: flex;
37            flex-direction: row;
38            gap: 4px;
39            /* Height is controlled by JS via CSS Variable */
40            height: var(--row-h);
41        }
42
43        .cell {
44            /* Width is controlled by JS via CSS Variable */
45            width: var(--col-w);
46            height: 100%;
47            border: 1.5px solid var(--accent-color);
48            border-radius: 4px;
49            box-sizing: border-box;
50            display: flex;
51            justify-content: center;
52            align-items: center;
53            position: relative;
54            /* Slight glow effect as seen in video */
55            box-shadow: inset 0 0 2px rgba(100, 252, 242, 0.2), 0 0 2px rgba(100, 252, 242, 0.2);
56        }
57
58        .dot {
59            width: 4px;
60            height: 4px;
61            background-color: var(--accent-color);
62            border-radius: 50%;
63            box-shadow: 0 0 6px var(--accent-color);
64        }
65
66    </style>
67</head>
68<body>
69
70    <div id="stage" class="stage"></div>
71
72    <script>
73        const stage = document.getElementById('stage');
74        const GRID_SIZE = 12;
75        const MIN_SIZE = 12;
76        const MAX_SIZE = 65;
77        const SPEED = 0.0015;
78        const OFFSET = 0.6; // Spatial frequency
79
80        const rows = [];
81        const cells = [];
82
83        // Create the grid structure
84        for (let y = 0; y < GRID_SIZE; y++) {
85            const rowEl = document.createElement('div');
86            rowEl.className = 'row';
87            stage.appendChild(rowEl);
88            rows.push(rowEl);
89
90            for (let x = 0; x < GRID_SIZE; x++) {
91                const cellEl = document.createElement('div');
92                cellEl.className = 'cell';
93                
94                const dot = document.createElement('div');
95                dot.className = 'dot';
96                
97                cellEl.appendChild(dot);
98                rowEl.appendChild(cellEl);
99                
100                // We only need to store references to unique columns for width control
101                // and unique rows for height control to stay efficient.
102                cells.push({ el: cellEl, x, y });
103            }
104        }
105
106        function animate(time) {
107            // Calculate sizes based on a sine wave
108            // We use a power function to make the 'expanded' state feel more structural/snappy
109            const getDimension = (index, t) => {
110                const val = Math.sin(t * SPEED + index * OFFSET);
111                // Shaping the wave: spend more time at extremes for that "blocky" feel
112                const shaped = Math.sign(val) * Math.pow(Math.abs(val), 0.8);
113                // Map from -1..1 to MIN_SIZE..MAX_SIZE
114                return MIN_SIZE + (shaped + 1) * 0.5 * (MAX_SIZE - MIN_SIZE);
115            };
116
117            // Apply widths to columns
118            for (let x = 0; x < GRID_SIZE; x++) {
119                const w = getDimension(x, time);
120                // Update all cells in this column
121                for (let y = 0; y < GRID_SIZE; y++) {
122                    const idx = y * GRID_SIZE + x;
123                    cells[idx].el.style.setProperty('--col-w', `${w}px`);
124                }
125            }
126
127            // Apply heights to rows
128            for (let y = 0; y < GRID_SIZE; y++) {
129                const h = getDimension(y, time + 1000); // Offset height phase slightly for complexity
130                rows[y].style.setProperty('--row-h', `${h}px`);
131            }
132
133            requestAnimationFrame(animate);
134        }
135
136        requestAnimationFrame(animate);
137
138    </script>
139</body>
140</html>