Gemini 3 Flash Preview

Only CSS: Codevember #5 Lightsaber
A 0.74T 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>Lightsaber Animation</title>
7    <style>
8        :root {
9            --blue: #0080ff;
10            --green: #2eff2e;
11            --red: #ff2e2e;
12            --bg-color: #000;
13        }
14
15        body {
16            margin: 0;
17            padding: 0;
18            background-color: var(--bg-color);
19            display: flex;
20            justify-content: center;
21            align-items: center;
22            height: 100vh;
23            overflow: hidden;
24        }
25
26        /* Ambient glow in the center */
27        .ambient-glow {
28            position: absolute;
29            width: 300px;
30            height: 300px;
31            border-radius: 50%;
32            filter: blur(60px);
33            opacity: 0.15;
34            animation: colorChangeAmbient 8s steps(1) infinite;
35        }
36
37        .saber-container {
38            position: relative;
39            width: 4px;
40            height: 130px;
41            animation: spin 2s linear infinite;
42        }
43
44        .saber {
45            position: absolute;
46            width: 100%;
47            height: 100%;
48            display: flex;
49            flex-direction: column;
50            align-items: center;
51        }
52
53        /* The glowing blade */
54        .blade {
55            width: 100%;
56            height: 80%;
57            background: #fff;
58            border-radius: 4px 4px 0 0;
59            position: relative;
60            animation: colorChangeBlade 8s steps(1) infinite;
61        }
62
63        /* The handle / hilt */
64        .hilt {
65            width: 100%;
66            height: 20%;
67            background: #ccc;
68            border-radius: 0 0 2px 2px;
69            border-top: 1px solid #666;
70        }
71
72        /* Rotation logic */
73        @keyframes spin {
74            from { transform: rotate(0deg); }
75            to { transform: rotate(360deg); }
76        }
77
78        /* Color transitions based on the video timing 
79           Blue: 0-2s (0% - 25%)
80           Blue to Green Transition: 2s-2.5s (25% - 31.25%)
81           Green: 2.5s-7s (31.25% - 87.5%)
82           Green to Red Transition: 7s-7.5s (87.5% - 93.75%)
83           Red: 7.5s-8s (93.75% - 100%)
84        */
85
86        @keyframes colorChangeBlade {
87            0%, 25% {
88                box-shadow: 0 0 10px #fff, 0 0 20px var(--blue), 0 0 40px var(--blue);
89            }
90            31.25%, 87.5% {
91                box-shadow: 0 0 10px #fff, 0 0 20px var(--green), 0 0 40px var(--green);
92            }
93            93.75%, 100% {
94                box-shadow: 0 0 10px #fff, 0 0 20px var(--red), 0 0 40px var(--red);
95            }
96        }
97
98        @keyframes colorChangeAmbient {
99            0%, 25% { background-color: var(--blue); }
100            31.25%, 87.5% { background-color: var(--green); }
101            93.75%, 100% { background-color: var(--red); }
102        }
103
104        /* Smoothing the hard 'steps' from the video behavior slightly for a cleaner web feel, 
105           but kept logical segments consistent with the 8s loop */
106    </style>
107</head>
108<body>
109    <div class="ambient-glow"></div>
110    <div class="saber-container">
111        <div class="saber">
112            <div class="blade"></div>
113            <div class="hilt"></div>
114        </div>
115    </div>
116
117    <script>
118        // Adjusting rotation speed to match the "feel" of the video.
119        // The CSS animation handles the 2s cycle which matches the observed frames.
120        // This script is optional for this specific animation but can be used 
121        // to sync logic if needed in more complex versions.
122    </script>
123</body>
124</html>