model output
Gemini 3 Flash Preview

Retro Sine Wave 〰
A 0.73T 0.26
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>Glowing N-Shape Animation</title>
7    <style>
8        /* 
9           Styling the background with a deep, moody purple radial gradient 
10           to match the atmospheric look of the video.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            overflow: hidden;
16            background: radial-gradient(circle at center, #3d3a4b 0%, #1c1a24 100%);
17            height: 100vh;
18            display: flex;
19            justify-content: center;
20            align-items: center;
21            font-family: sans-serif;
22        }
23
24        .container {
25            position: relative;
26            width: 500px;
27            height: 500px;
28            display: flex;
29            flex-direction: column;
30            justify-content: center;
31            align-items: center;
32        }
33
34        /* 
35           The individual lines that form the logo.
36           Using a bright coral-orange with a strong box-shadow for the neon glow effect.
37        */
38        .line {
39            height: 3px;
40            background-color: #ff6b4a;
41            margin: 3px 0; /* Tight vertical spacing */
42            border-radius: 4px;
43            box-shadow: 0 0 12px rgba(255, 107, 74, 0.9), 0 0 24px rgba(255, 107, 74, 0.3);
44            position: relative;
45            will-change: transform, width, opacity;
46        }
47
48        /* Optional: Add a subtle overall flicker to the scene */
49        @keyframes flicker {
50            0%, 100% { opacity: 1; }
51            50% { opacity: 0.95; }
52        }
53        .container {
54            animation: flicker 4s infinite alternate ease-in-out;
55        }
56    </style>
57</head>
58<body>
59
60    <div class="container" id="line-container"></div>
61
62    <script>
63        const container = document.getElementById('line-container');
64        const numLines = 28; // Approximate number of lines in the video
65        const lines = [];
66
67        // Generate the lines dynamically
68        for (let i = 0; i < numLines; i++) {
69            const line = document.createElement('div');
70            line.className = 'line';
71            container.appendChild(line);
72            lines.push(line);
73        }
74
75        let time = 0;
76
77        /**
78         * The animation logic mimics a rotating 3D 'N' shape.
79         * We project the 3D points of an 'N' onto 2D space over time
80         * and calculate the span (min/max X) for each horizontal row.
81         */
82        function animate() {
83            // Speed of the rotation
84            time += 0.035;
85
86            lines.forEach((line, i) => {
87                // Map the vertical index to a range of -1 to 1
88                const y = (i - numLines / 2) / (numLines / 2);
89                
90                // We define the key points of a stylized 'N' logo
91                // and simulate their rotation around the Y-axis.
92                
93                const angle = time;
94                
95                // The 'N' consists of three main vertical-ish components:
96                // 1. Left bar
97                // 2. Diagonal
98                // 3. Right bar
99                
100                // We calculate projected X positions for each part at this specific height 'y'
101                // Segment widths and offsets are tuned to match the video's visual weight.
102                
103                // Left side projection
104                const xLeft = -60 * Math.cos(angle);
105                const zLeft = -60 * Math.sin(angle);
106
107                // Right side projection
108                const xRight = 60 * Math.cos(angle);
109                const zRight = 60 * Math.sin(angle);
110
111                // Diagonal projection (dynamic based on vertical position y)
112                const xDiag = (y * 60) * Math.cos(angle + 0.5);
113                const zDiag = (y * 60) * Math.sin(angle + 0.5);
114
115                // Find the bounds of the shape at this scanline
116                const points = [xLeft, xRight, xDiag];
117                const minX = Math.min(...points);
118                const maxX = Math.max(...points);
119
120                // Calculate the final width and center position
121                let width = maxX - minX;
122                let centerX = (minX + maxX) / 2;
123
124                // Add a minimum aesthetic width so lines don't disappear completely
125                width = Math.max(width, 15);
126
127                // Apply transformations
128                line.style.width = `${width}px`;
129                line.style.transform = `translateX(${centerX}px)`;
130
131                // Depth effect: Adjust opacity based on rotation (z-depth)
132                // This gives the 3D "spinning" feel as lines move to the "back"
133                const avgZ = (zLeft + zRight + zDiag) / 3;
134                const opacity = 0.6 + (avgZ / 120 + 0.5) * 0.4;
135                line.style.opacity = opacity;
136
137                // Subtle variation in glow intensity based on time and position
138                const pulse = Math.sin(time * 2 + i * 0.2) * 3;
139                line.style.boxShadow = `0 0 ${10 + pulse}px rgba(255, 107, 74, 0.9)`;
140            });
141
142            requestAnimationFrame(animate);
143        }
144
145        // Initialize the loop
146        animate();
147    </script>
148</body>
149</html>