model output
Gemini 3 Flash Preview

Spiral Tower
A 0.71T 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>Twisted Stack Animation</title>
7    <style>
8        /* Reset and center the scene */
9        body {
10            margin: 0;
11            padding: 0;
12            height: 100vh;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            background-color: #f8f9fb; /* Light grayish-blue background */
17            overflow: hidden;
18        }
19
20        /* Container for 3D perspective */
21        .scene {
22            perspective: 1200px;
23        }
24
25        /* The stack container tilted for isometric view */
26        .stack {
27            position: relative;
28            width: 150px;
29            height: 150px;
30            transform-style: preserve-3d;
31            /* Matches the viewing angle in the video */
32            transform: rotateX(60deg) rotateZ(45deg);
33        }
34
35        /* Each individual layer (rectangle) of the column */
36        .layer {
37            position: absolute;
38            top: 0;
39            left: 0;
40            width: 100%;
41            height: 100%;
42            background-color: #94a3a8; /* Main slate color */
43            /* Subtle border creates the visible "paper-stack" edges seen in the video */
44            border: 0.5px solid rgba(0, 0, 0, 0.06);
45            box-sizing: border-box;
46            
47            /* Animation timing: 3 seconds cycle, alternating directions */
48            animation: twist 3s ease-in-out infinite alternate;
49            
50            /* Performance optimization for many layers */
51            will-change: transform;
52            backface-visibility: hidden;
53        }
54
55        /* Stacking and rotation logic */
56        @keyframes twist {
57            0% {
58                /* translateZ lifts the layers along the vertical axis of the block */
59                transform: translateZ(calc(var(--i) * 1.5px)) rotateZ(0deg);
60            }
61            100% {
62                /* Rotating 180 degrees creates a seamless spiral effect for a square */
63                transform: translateZ(calc(var(--i) * 1.5px)) rotateZ(180deg);
64            }
65        }
66
67        /* Ensure the top face looks clean and solid */
68        .layer:last-child {
69            border: none;
70            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
71        }
72    </style>
73</head>
74<body>
75
76    <div class="scene">
77        <div class="stack" id="stack"></div>
78    </div>
79
80    <script>
81        const stackElement = document.getElementById('stack');
82        const layerCount = 100; // Number of layers to form the column
83
84        /**
85         * We generate layers using JavaScript to avoid a massive HTML file.
86         * Each layer is given a CSS variable '--i' representing its height.
87         * The 'animation-delay' is staggered by the height to create the 
88         * wave-like twisting motion seen in the video.
89         */
90        for (let i = 0; i < layerCount; i++) {
91            const layer = document.createElement('div');
92            layer.className = 'layer';
93            
94            // Set index for the CSS calc() function
95            layer.style.setProperty('--i', i);
96            
97            /* 
98               Applying a negative delay makes the animation start "mid-way".
99               Staggering it by index creates the propagation of the twist 
100               from the top of the stack to the bottom.
101            */
102            layer.style.animationDelay = (i * -0.03) + 's';
103            
104            stackElement.appendChild(layer);
105        }
106    </script>
107</body>
108</html>