Skip to content

Commit a3c5e1d

Browse files
Meatball1601Meatball1601
committed
Improved the circuit animation
1 parent 577d9db commit a3c5e1d

5 files changed

Lines changed: 525 additions & 397 deletions

File tree

‎Source code/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>OpenHardware Initiative</title>
7+
<meta name="description" content="OpenHardware - Pioneering the future of hardware acceleration" />
8+
<meta name="author" content="OpenHardware" />
9+
10+
<meta property="og:title" content="OpenHardware Initiative" />
11+
<meta property="og:description" content="Pioneering the future of hardware acceleration" />
12+
<meta property="og:type" content="website" />
13+
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
14+
15+
<meta name="twitter:card" content="summary_large_image" />
16+
<meta name="twitter:site" content="@open_hardware" />
17+
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
18+
<link rel="icon" href="/lovable-uploads/8c21749c-761b-4cf2-85ca-64f204ac61dd.png" type="image/png">
19+
</head>
20+
21+
<body>
22+
<div id="root"></div>
23+
<!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
24+
<script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
25+
26+
<!-- GitHub Pages SPA redirect script -->
27+
<script>
28+
// Single Page Apps for GitHub Pages
29+
// MIT License
30+
// https://github.com/rafgraph/spa-github-pages
31+
// This script checks to see if a redirect is present in the query string,
32+
// converts it back into the correct url and adds it to the
33+
// browser's history using window.history.replaceState(...),
34+
// which won't cause the browser to attempt to load the new url.
35+
// When the single page app is loaded further down in this file,
36+
// the correct url will be waiting in the browser's history for
37+
// the single page app to route accordingly.
38+
(function(l) {
39+
if (l.search[1] === '/' ) {
40+
var decoded = l.search.slice(1).split('&').map(function(s) {
41+
return s.replace(/~and~/g, '&')
42+
}).join('?');
43+
window.history.replaceState(null, null,
44+
l.pathname.slice(0, -1) + decoded + l.hash
45+
);
46+
}
47+
}(window.location))
48+
</script>
49+
50+
<script type="module" src="/src/main.tsx"></script>
51+
</body>
52+
</html>

‎Source code/src/components/CircuitPattern.tsx‎

Lines changed: 74 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -77,20 +77,36 @@ const CircuitPattern: React.FC = () => {
7777
className="circuit-path"
7878
/>
7979

80-
{/* Pulsing glowing nodes - appear after paths load */}
81-
<circle cx="100" cy="100" r="4" fill="#333351" className="glow-blue pulse delayed-node" />
80+
{/* Pulsing halos - appear after paths load */}
81+
<circle cx="100" cy="100" r="4" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
82+
<circle cx="300" cy="200" r="4" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
83+
<circle cx="500" cy="400" r="6" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
84+
<circle cx="200" cy="300" r="4" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
85+
<circle cx="400" cy="500" r="4" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
86+
<circle cx="600" cy="200" r="4" fill="#c28f40" opacity="0.05" className="glow-gold pulse-halo delayed-node" />
87+
<circle cx="400" cy="300" r="6" fill="#c28f40" opacity="0.05" className="glow-gold pulse-halo delayed-node" />
88+
<circle cx="500" cy="300" r="4" fill="#c28f40" opacity="0.05" className="glow-gold pulse-halo delayed-node" />
89+
<circle cx="400" cy="250" r="4" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
90+
<circle cx="500" cy="350" r="4" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
91+
<circle cx="500" cy="450" r="6" fill="#333351" opacity="0.05" className="glow-blue pulse-halo delayed-node" />
92+
<circle cx="550" cy="200" r="4" fill="#c28f40" opacity="0.05" className="glow-gold pulse-halo delayed-node" />
93+
<circle cx="550" cy="300" r="4" fill="#c28f40" opacity="0.05" className="glow-gold pulse-halo delayed-node" />
94+
<circle cx="650" cy="300" r="6" fill="#c28f40" opacity="0.05" className="glow-gold pulse-halo delayed-node" />
95+
96+
{/* Static nodes - appear after paths load */}
97+
<circle cx="100" cy="100" r="4" fill="#333351" className="glow-blue delayed-node" />
8298
<circle cx="300" cy="200" r="4" fill="#333351" className="glow-blue delayed-node" />
83-
<circle cx="500" cy="400" r="6" fill="#333351" className="glow-blue pulse delayed-node" />
99+
<circle cx="500" cy="400" r="6" fill="#333351" className="glow-blue delayed-node" />
84100
<circle cx="200" cy="300" r="4" fill="#333351" className="glow-blue delayed-node" />
85-
<circle cx="400" cy="500" r="4" fill="#333351" className="glow-blue pulse delayed-node" />
101+
<circle cx="400" cy="500" r="4" fill="#333351" className="glow-blue delayed-node" />
86102
<circle cx="600" cy="200" r="4" fill="#c28f40" className="glow-gold delayed-node" />
87-
<circle cx="400" cy="300" r="6" fill="#c28f40" className="glow-gold pulse delayed-node" />
103+
<circle cx="400" cy="300" r="6" fill="#c28f40" className="glow-gold delayed-node" />
88104
<circle cx="500" cy="300" r="4" fill="#c28f40" className="glow-gold delayed-node" />
89105
<circle cx="400" cy="250" r="4" fill="#333351" className="glow-blue delayed-node" />
90106
<circle cx="500" cy="350" r="4" fill="#333351" className="glow-blue delayed-node" />
91-
<circle cx="500" cy="450" r="6" fill="#333351" className="glow-blue pulse delayed-node" />
107+
<circle cx="500" cy="450" r="6" fill="#333351" className="glow-blue delayed-node" />
92108
<circle cx="550" cy="200" r="4" fill="#c28f40" className="glow-gold delayed-node" />
93-
<circle cx="550" cy="300" r="4" fill="#c28f40" className="glow-gold pulse delayed-node" />
109+
<circle cx="550" cy="300" r="4" fill="#c28f40" className="glow-gold delayed-node" />
94110
<circle cx="650" cy="300" r="6" fill="#c28f40" className="glow-gold delayed-node" />
95111

96112
{/* Tracers following the paths - also delayed */}
@@ -179,18 +195,18 @@ const CircuitPattern: React.FC = () => {
179195
.tracer-aura {
180196
filter: drop-shadow(0 0 10px currentColor);
181197
}
182-
.pulse {
183-
animation: pulse 2s infinite ease-in-out;
198+
.pulse-halo {
199+
animation: pulseHalo 2s infinite ease-in-out;
184200
}
185201
186-
@keyframes pulse {
202+
@keyframes pulseHalo {
187203
0%, 100% {
188204
r: 4;
189-
opacity: 0.6;
205+
opacity: 0.05;
190206
}
191207
50% {
192-
r: 6;
193-
opacity: 1;
208+
r: 12;
209+
opacity: 0.8;
194210
}
195211
}
196212
@@ -268,22 +284,52 @@ const CircuitPattern: React.FC = () => {
268284
.delayed-node:nth-child(17) { animation-delay: 5.7s; }
269285
.delayed-node:nth-child(18) { animation-delay: 5.9s; }
270286
.delayed-node:nth-child(19) { animation-delay: 6.1s; }
287+
.delayed-node:nth-child(20) { animation-delay: 6.3s; }
288+
.delayed-node:nth-child(21) { animation-delay: 6.5s; }
289+
.delayed-node:nth-child(22) { animation-delay: 6.7s; }
290+
.delayed-node:nth-child(23) { animation-delay: 6.9s; }
291+
.delayed-node:nth-child(24) { animation-delay: 7.1s; }
292+
.delayed-node:nth-child(25) { animation-delay: 7.3s; }
293+
.delayed-node:nth-child(26) { animation-delay: 7.5s; }
294+
.delayed-node:nth-child(27) { animation-delay: 7.7s; }
295+
.delayed-node:nth-child(28) { animation-delay: 7.9s; }
296+
.delayed-node:nth-child(29) { animation-delay: 8.1s; }
297+
.delayed-node:nth-child(30) { animation-delay: 8.3s; }
298+
.delayed-node:nth-child(31) { animation-delay: 8.5s; }
299+
.delayed-node:nth-child(32) { animation-delay: 8.7s; }
300+
.delayed-node:nth-child(33) { animation-delay: 8.9s; }
301+
302+
/* Add random delays for each pulsing halo - starts after dots load */
303+
.pulse-halo:nth-child(6) { animation-delay: 3.5s; }
304+
.pulse-halo:nth-child(7) { animation-delay: 4.2s; }
305+
.pulse-halo:nth-child(8) { animation-delay: 4.8s; }
306+
.pulse-halo:nth-child(9) { animation-delay: 3.9s; }
307+
.pulse-halo:nth-child(10) { animation-delay: 4.6s; }
308+
.pulse-halo:nth-child(11) { animation-delay: 3.7s; }
309+
.pulse-halo:nth-child(12) { animation-delay: 4.4s; }
310+
.pulse-halo:nth-child(13) { animation-delay: 5.0s; }
311+
.pulse-halo:nth-child(14) { animation-delay: 4.0s; }
312+
.pulse-halo:nth-child(15) { animation-delay: 4.7s; }
313+
.pulse-halo:nth-child(16) { animation-delay: 4.3s; }
314+
.pulse-halo:nth-child(17) { animation-delay: 3.8s; }
315+
.pulse-halo:nth-child(18) { animation-delay: 4.9s; }
316+
.pulse-halo:nth-child(19) { animation-delay: 4.5s; }
271317
272-
/* Add random delays for each pulsing dot - starts after dots load */
273-
.pulse:nth-child(1) { animation-delay: 3.5s; }
274-
.pulse:nth-child(2) { animation-delay: 4.2s; }
275-
.pulse:nth-child(3) { animation-delay: 4.8s; }
276-
.pulse:nth-child(4) { animation-delay: 3.9s; }
277-
.pulse:nth-child(5) { animation-delay: 4.6s; }
278-
.pulse:nth-child(6) { animation-delay: 3.7s; }
279-
.pulse:nth-child(7) { animation-delay: 4.4s; }
280-
.pulse:nth-child(8) { animation-delay: 5.0s; }
281-
.pulse:nth-child(9) { animation-delay: 4.0s; }
282-
.pulse:nth-child(10) { animation-delay: 4.7s; }
283-
.pulse:nth-child(11) { animation-delay: 4.3s; }
284-
.pulse:nth-child(12) { animation-delay: 3.8s; }
285-
.pulse:nth-child(13) { animation-delay: 4.9s; }
286-
.pulse:nth-child(14) { animation-delay: 4.5s; }
318+
/* Random pulse timing for halos */
319+
.pulse-halo:nth-child(6) { animation-duration: 1.2s; }
320+
.pulse-halo:nth-child(7) { animation-duration: 0.9s; }
321+
.pulse-halo:nth-child(8) { animation-duration: 1.4s; }
322+
.pulse-halo:nth-child(9) { animation-duration: 1.0s; }
323+
.pulse-halo:nth-child(10) { animation-duration: 1.3s; }
324+
.pulse-halo:nth-child(11) { animation-duration: 0.8s; }
325+
.pulse-halo:nth-child(12) { animation-duration: 1.1s; }
326+
.pulse-halo:nth-child(13) { animation-duration: 1.5s; }
327+
.pulse-halo:nth-child(14) { animation-duration: 0.7s; }
328+
.pulse-halo:nth-child(15) { animation-duration: 1.2s; }
329+
.pulse-halo:nth-child(16) { animation-duration: 1.0s; }
330+
.pulse-halo:nth-child(17) { animation-duration: 1.4s; }
331+
.pulse-halo:nth-child(18) { animation-duration: 0.9s; }
332+
.pulse-halo:nth-child(19) { animation-duration: 1.1s; }
287333
`,
288334
}}
289335
/>

0 commit comments

Comments
 (0)