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>Rotating Segmented Star Animation</title>
7 <style>
8 :root {
9 /* Colors derived from the video frames */
10 --color1: #d946ef; /* Pinkish-purple */
11 --color2: #a855f7; /* Purple */
12 --color3: #6366f1; /* Indigo */
13 --color4: #3b82f6; /* Blue */
14 --color5: #8b5cf6; /* Violet */
15 --bg-grad-start: #f8f8f8;
16 --bg-grad-end: #e2e2e2;
17 }
18
19 body, html {
20 margin: 0;
21 padding: 0;
22 width: 100%;
23 height: 100%;
24 display: flex;
25 justify-content: center;
26 align-items: center;
27 background: radial-gradient(circle, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
28 overflow: hidden;
29 }
30
31 .scene {
32 position: relative;
33 width: 400px;
34 height: 400px;
35 display: flex;
36 justify-content: center;
37 align-items: center;
38 }
39
40 /* Main container that rotates the whole structure */
41 .spinner {
42 position: absolute;
43 width: 0;
44 height: 0;
45 animation: global-rotate 12s linear infinite;
46 }
47
48 /* Base arm positioning */
49 .arm {
50 position: absolute;
51 top: 0;
52 left: -6px; /* Half of width */
53 transform-origin: top center;
54 display: flex;
55 flex-direction: column;
56 align-items: center;
57 }
58
59 /* Individual segments with joints */
60 .segment {
61 width: 12px;
62 height: 55px;
63 border-radius: 10px;
64 position: relative;
65 transform-origin: center 6px; /* Rotate around the top "joint" area */
66 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
67 }
68
69 /* Bending animations for joints */
70 .seg-1 {
71 /* First segment is attached to the center */
72 animation: bend-seg-1 4s ease-in-out infinite;
73 }
74
75 .seg-2 {
76 top: -10px; /* Overlap for joint effect */
77 width: 10px;
78 height: 50px;
79 animation: bend-seg-2 4s ease-in-out infinite;
80 }
81
82 .seg-3 {
83 top: -10px;
84 width: 8px;
85 height: 45px;
86 animation: bend-seg-3 4s ease-in-out infinite;
87 }
88
89 /* Define arm rotations (360 / 5 = 72) */
90 .arm:nth-child(1) { transform: rotate(0deg); }
91 .arm:nth-child(2) { transform: rotate(72deg); }
92 .arm:nth-child(3) { transform: rotate(144deg); }
93 .arm:nth-child(4) { transform: rotate(216deg); }
94 .arm:nth-child(5) { transform: rotate(288deg); }
95
96 /* Colors for each arm to match the gradient look */
97 .arm:nth-child(1) .segment { background: linear-gradient(to bottom, var(--color1), var(--color2)); }
98 .arm:nth-child(2) .segment { background: linear-gradient(to bottom, var(--color2), var(--color3)); }
99 .arm:nth-child(3) .segment { background: linear-gradient(to bottom, var(--color3), var(--color4)); }
100 .arm:nth-child(4) .segment { background: linear-gradient(to bottom, var(--color4), var(--color5)); }
101 .arm:nth-child(5) .segment { background: linear-gradient(to bottom, var(--color5), var(--color1)); }
102
103 /* Keyframe animations */
104
105 @keyframes global-rotate {
106 from { transform: rotate(0deg); }
107 to { transform: rotate(360deg); }
108 }
109
110 /* Bending motion logic:
111 0% - slightly bent
112 25% - folded tight
113 75% - fully straightened
114 100% - back to start
115 */
116 @keyframes bend-seg-1 {
117 0%, 100% { transform: rotate(20deg); }
118 25% { transform: rotate(60deg); }
119 75% { transform: rotate(-10deg); }
120 }
121
122 @keyframes bend-seg-2 {
123 0%, 100% { transform: rotate(40deg); }
124 25% { transform: rotate(80deg); }
125 75% { transform: rotate(0deg); }
126 }
127
128 @keyframes bend-seg-3 {
129 0%, 100% { transform: rotate(50deg); }
130 25% { transform: rotate(100deg); }
131 75% { transform: rotate(0deg); }
132 }
133
134 /* Faint guide lines in the background */
135 .guides {
136 position: absolute;
137 width: 300px;
138 height: 300px;
139 border: 1px solid rgba(150, 100, 255, 0.05);
140 border-radius: 50%;
141 pointer-events: none;
142 }
143
144 .guides::before {
145 content: '';
146 position: absolute;
147 top: 50%; left: 50%;
148 width: 200px; height: 200px;
149 border: 1px solid rgba(150, 100, 255, 0.03);
150 border-radius: 50%;
151 transform: translate(-50%, -50%);
152 }
153
154 </style>
155</head>
156<body>
157
158 <div class="scene">
159 <!-- Optional background guides -->
160 <div class="guides"></div>
161
162 <div class="spinner">
163 <!-- Arm 1 -->
164 <div class="arm">
165 <div class="segment seg-1">
166 <div class="segment seg-2">
167 <div class="segment seg-3"></div>
168 </div>
169 </div>
170 </div>
171 <!-- Arm 2 -->
172 <div class="arm">
173 <div class="segment seg-1">
174 <div class="segment seg-2">
175 <div class="segment seg-3"></div>
176 </div>
177 </div>
178 </div>
179 <!-- Arm 3 -->
180 <div class="arm">
181 <div class="segment seg-1">
182 <div class="segment seg-2">
183 <div class="segment seg-3"></div>
184 </div>
185 </div>
186 </div>
187 <!-- Arm 4 -->
188 <div class="arm">
189 <div class="segment seg-1">
190 <div class="segment seg-2">
191 <div class="segment seg-3"></div>
192 </div>
193 </div>
194 </div>
195 <!-- Arm 5 -->
196 <div class="arm">
197 <div class="segment seg-1">
198 <div class="segment seg-2">
199 <div class="segment seg-3"></div>
200 </div>
201 </div>
202 </div>
203 </div>
204 </div>
205
206 <script>
207 // Adjust animation offsets for a more organic feel if desired
208 // In the original, all arms move in sync relative to their base angle
209 const arms = document.querySelectorAll('.arm');
210 arms.forEach((arm, index) => {
211 // Apply slight animation delay to each arm if we want an offset (sequential fold)
212 // For the exact video match, they are synchronized.
213 // arm.style.animationDelay = `${index * 0.1}s`;
214 });
215 </script>
216</body>
217</html>