model output
Gemini 3 Flash Preview

4 'counter rotation' effects
A 0.65T 0.25
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>Diamond Wave Loader</title>
7    <style>
8        :root {
9            --bg-color: #161616;
10            --blue: #1f3043;
11            --red: #981c31;
12            --white: #ffffff;
13            --cell-size: 18px;
14            --gap: 6px;
15            --anim-duration: 1.2s;
16        }
17
18        * {
19            box-sizing: border-box;
20        }
21
22        body {
23            margin: 0;
24            padding: 0;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28            min-height: 100vh;
29            background-color: var(--bg-color);
30            overflow: hidden;
31        }
32
33        .loader {
34            display: grid;
35            grid-template-columns: repeat(3, var(--cell-size));
36            grid-template-rows: repeat(3, var(--cell-size));
37            gap: var(--gap);
38            transform: rotate(45deg);
39        }
40
41        .cell {
42            width: var(--cell-size);
43            height: var(--cell-size);
44            border-radius: 4px;
45            background-color: var(--blue);
46            animation: pulse var(--anim-duration) infinite ease-in-out;
47            /* Calculate stagger delay based on diagonal position (row + column) */
48            animation-delay: calc((var(--r) + var(--c)) * 0.12s);
49        }
50
51        /* Specific Colors based on position */
52        /* Center White */
53        .cell:nth-child(5) {
54            background-color: var(--white);
55        }
56
57        /* Red Cells (Middle-Left and Middle-Bottom in rotated view) */
58        .cell:nth-child(4),
59        .cell:nth-child(8) {
60            background-color: var(--red);
61        }
62
63        /* Assign Grid Coordinates for Animation Timing */
64        /* Row 0 */
65        .cell:nth-child(1) { --r: 0; --c: 0; }
66        .cell:nth-child(2) { --r: 0; --c: 1; }
67        .cell:nth-child(3) { --r: 0; --c: 2; }
68        /* Row 1 */
69        .cell:nth-child(4) { --r: 1; --c: 0; }
70        .cell:nth-child(5) { --r: 1; --c: 1; }
71        .cell:nth-child(6) { --r: 1; --c: 2; }
72        /* Row 2 */
73        .cell:nth-child(7) { --r: 2; --c: 0; }
74        .cell:nth-child(8) { --r: 2; --c: 1; }
75        .cell:nth-child(9) { --r: 2; --c: 2; }
76
77        @keyframes pulse {
78            0%, 100% {
79                transform: scale(1);
80                opacity: 1;
81            }
82            35% {
83                transform: scale(0.35);
84                opacity: 0.4;
85            }
86            70% {
87                transform: scale(1);
88                opacity: 1;
89            }
90        }
91    </style>
92</head>
93<body>
94
95    <div class="loader">
96        <!-- 3x3 grid resulting in a 1-2-3-2-1 diamond pattern when rotated -->
97        <div class="cell"></div>
98        <div class="cell"></div>
99        <div class="cell"></div>
100        <div class="cell"></div>
101        <div class="cell"></div>
102        <div class="cell"></div>
103        <div class="cell"></div>
104        <div class="cell"></div>
105        <div class="cell"></div>
106    </div>
107
108</body>
109</html>