Gemini 3 Flash Preview

Only CSS: Codevember #6 Money Storm
A 0.62T 0.31
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>Falling Yen Animation</title>
7    <style>
8        body, html {
9            margin: 0;
10            padding: 0;
11            width: 100%;
12            height: 100%;
13            background-color: black;
14            overflow: hidden;
15            display: flex;
16            justify-content: center;
17            align-items: center;
18            perspective: 1200px;
19        }
20
21        .container {
22            position: relative;
23            width: 100%;
24            height: 100%;
25            transform-style: preserve-3d;
26        }
27
28        .bill {
29            position: absolute;
30            width: 140px;
31            height: 70px;
32            background-color: #e8e4d0;
33            /* Create a folded paper look using gradients */
34            background: linear-gradient(
35                90deg, 
36                #dcd8c0 0%, #e8e4d0 35%, 
37                #c8c4b0 35%, #e8e4d0 45%, 
38                #e8e4d0 65%, #c8c4b0 65%, 
39                #e8e4d0 75%, #dcd8c0 100%
40            );
41            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
42            border: 1px solid rgba(0,0,0,0.1);
43            display: flex;
44            justify-content: center;
45            align-items: center;
46            font-family: "Times New Roman", serif;
47            font-weight: bold;
48            color: #3d4a3e;
49            user-select: none;
50            pointer-events: none;
51            transform-style: preserve-3d;
52            backface-visibility: visible;
53        }
54
55        /* The Yen symbol and amount */
56        .bill::after {
57            content: "¥ 10,000";
58            font-size: 20px;
59            letter-spacing: 1px;
60            opacity: 0.8;
61            border: 2px solid #3d4a3e;
62            padding: 2px 8px;
63            border-radius: 2px;
64        }
65
66        /* Fluttering animation */
67        @keyframes fall {
68            0% {
69                transform: translate3d(var(--start-x), -150px, var(--start-z)) rotateX(var(--rot-x-start)) rotateY(var(--rot-y-start)) rotateZ(var(--rot-z-start));
70                opacity: 0;
71            }
72            10% {
73                opacity: 1;
74            }
75            90% {
76                opacity: 1;
77            }
78            100% {
79                transform: translate3d(var(--end-x), 110vh, var(--end-z)) rotateX(var(--rot-x-end)) rotateY(var(--rot-y-end)) rotateZ(var(--rot-z-end));
80                opacity: 0;
81            }
82        }
83
84        .bill {
85            animation: fall var(--duration) linear forwards;
86        }
87    </style>
88</head>
89<body>
90
91    <div class="container" id="money-container"></div>
92
93    <script>
94        const container = document.getElementById('money-container');
95        const billCount = 60; // Max bills on screen
96
97        function createBill() {
98            const bill = document.createElement('div');
99            bill.className = 'bill';
100
101            // Randomize starting positions and movements
102            const startX = Math.random() * 120 - 10 + 'vw';
103            const endX = (Math.random() * 40 - 20) + parseFloat(startX) + 'vw';
104            const startZ = Math.random() * 400 - 200 + 'px';
105            const endZ = Math.random() * 600 - 300 + 'px';
106
107            // Randomize rotations for a chaotic tumble
108            const rotXStart = Math.random() * 360 + 'deg';
109            const rotYStart = Math.random() * 360 + 'deg';
110            const rotZStart = Math.random() * 360 + 'deg';
111            
112            // Multiple full rotations for the fall
113            const rotXEnd = (Math.random() * 1440 + 720) + 'deg';
114            const rotYEnd = (Math.random() * 1440 + 720) + 'deg';
115            const rotZEnd = (Math.random() * 720 + 360) + 'deg';
116
117            const duration = Math.random() * 3 + 4 + 's'; // Between 4 and 7 seconds
118            const delay = Math.random() * 5 + 's';
119
120            bill.style.setProperty('--start-x', startX);
121            bill.style.setProperty('--end-x', endX);
122            bill.style.setProperty('--start-z', startZ);
123            bill.style.setProperty('--end-z', endZ);
124            bill.style.setProperty('--rot-x-start', rotXStart);
125            bill.style.setProperty('--rot-y-start', rotYStart);
126            bill.style.setProperty('--rot-z-start', rotZStart);
127            bill.style.setProperty('--rot-x-end', rotXEnd);
128            bill.style.setProperty('--rot-y-end', rotYEnd);
129            bill.style.setProperty('--rot-z-end', rotZEnd);
130            bill.style.setProperty('--duration', duration);
131            
132            bill.style.left = '0';
133            bill.style.top = '0';
134
135            container.appendChild(bill);
136
137            // Remove the bill once its animation finishes to keep the DOM clean
138            bill.addEventListener('animationend', () => {
139                bill.remove();
140                spawnBill(); // Spawn a new one to keep the flow
141            });
142        }
143
144        // Initial spawn
145        for (let i = 0; i < 25; i++) {
146            setTimeout(createBill, Math.random() * 3000);
147        }
148
149        function spawnBill() {
150            if (container.children.length < billCount) {
151                createBill();
152            }
153        }
154
155        // Continuously check if we need to spawn more to maintain density
156        setInterval(spawnBill, 300);
157
158    </script>
159</body>
160</html>