@@ -3,6 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
3
3
const ctx = canvas . getContext ( '2d' ) ;
4
4
const snowflakes = document . querySelectorAll ( '.snow' ) ;
5
5
const nodes = [ ] ;
6
+ let mouseX = 0 ;
7
+ let mouseY = 0 ;
6
8
7
9
canvas . width = window . innerWidth ;
8
10
canvas . height = window . innerHeight ;
@@ -16,18 +18,34 @@ document.addEventListener('DOMContentLoaded', () => {
16
18
} ) ;
17
19
} ) ;
18
20
21
+ // Add mouse position as a special node
22
+ nodes . push ( {
23
+ x : mouseX ,
24
+ y : mouseY ,
25
+ isCursor : true
26
+ } ) ;
27
+
19
28
function drawConnections ( ) {
20
29
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
21
30
for ( let i = 0 ; i < nodes . length ; i ++ ) {
22
31
for ( let j = i + 1 ; j < nodes . length ; j ++ ) {
23
32
const dx = nodes [ i ] . x - nodes [ j ] . x ;
24
33
const dy = nodes [ i ] . y - nodes [ j ] . y ;
25
34
const distance = Math . sqrt ( dx * dx + dy * dy ) ;
26
- if ( distance < 150 ) {
35
+ const maxDistance = nodes [ i ] . isCursor || nodes [ j ] . isCursor ? 200 : 150 ;
36
+
37
+ if ( distance < maxDistance ) {
27
38
ctx . beginPath ( ) ;
28
39
ctx . moveTo ( nodes [ i ] . x , nodes [ i ] . y ) ;
29
40
ctx . lineTo ( nodes [ j ] . x , nodes [ j ] . y ) ;
30
- ctx . strokeStyle = `rgba(255, 0, 0, ${ 1 - distance / 3000 } )` ;
41
+
42
+ // Use a different color for cursor connections
43
+ if ( nodes [ i ] . isCursor || nodes [ j ] . isCursor ) {
44
+ ctx . strokeStyle = `rgba(0, 255, 255, ${ 1 - distance / maxDistance + 0.1 } )` ;
45
+ } else {
46
+ ctx . strokeStyle = `rgba(255, 0, 0, ${ 1 - distance / maxDistance } )` ;
47
+ }
48
+
31
49
ctx . lineWidth = 0.8 ;
32
50
ctx . stroke ( ) ;
33
51
ctx . closePath ( ) ;
@@ -37,14 +55,25 @@ document.addEventListener('DOMContentLoaded', () => {
37
55
}
38
56
39
57
function update ( ) {
40
- nodes . forEach ( node => {
41
- const rect = node . element . getBoundingClientRect ( ) ;
42
- node . x = rect . left + rect . width / 7.5 ;
43
- node . y = rect . top + rect . height / 7.5 ;
58
+ nodes . forEach ( ( node , index ) => {
59
+ if ( node . isCursor ) {
60
+ node . x = mouseX ;
61
+ node . y = mouseY ;
62
+ } else {
63
+ const rect = node . element . getBoundingClientRect ( ) ;
64
+ node . x = rect . left + rect . width / 7.5 ;
65
+ node . y = rect . top + rect . height / 7.5 ;
66
+ }
44
67
} ) ;
45
68
drawConnections ( ) ;
46
69
requestAnimationFrame ( update ) ;
47
70
}
48
71
72
+ // Track mouse movement
73
+ document . addEventListener ( 'mousemove' , ( e ) => {
74
+ mouseX = e . clientX ;
75
+ mouseY = e . clientY ;
76
+ } ) ;
77
+
49
78
update ( ) ;
50
- } ) ;
79
+ } ) ;
0 commit comments