diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs
index 13bb13e..782bea4 100755
--- a/src/lib/Helper.mjs
+++ b/src/lib/Helper.mjs
@@ -1,6 +1,7 @@
/* eslint-disable no-useless-escape */
import { inview } from 'svelte-inview'
import { pick } from 'remeda'
+import { Observable, debounceTime, share, startWith, throttleTime } from 'rxjs'
/**
* Fade: The initial opacity from 0 to 1.
@@ -100,3 +101,16 @@ export function getBlurredPath(path) {
export function getRandom(array) {
return array.at(Math.floor(Math.random() * array.length))
}
+
+const fps = 1000 / 60 // 60 frames per second
+export const mousePosition$ = new Observable((subscriber) => {
+ // eslint-disable-next-line no-undef
+ if (globalThis.document === undefined) {
+ return
+ }
+ document.addEventListener('mousemove', nextPostion)
+ function nextPostion({ clientX, clientY }) {
+ subscriber.next({ clientX, clientY })
+ }
+ return () => document?.removeEventListener('mousemove', nextPostion)
+}).pipe(throttleTime(fps), share(), startWith({ clientX: 0, clientY: 0 }))
diff --git a/src/lib/PatternBackground.svelte b/src/lib/PatternBackground.svelte
index 2b48b73..fc60e3d 100644
--- a/src/lib/PatternBackground.svelte
+++ b/src/lib/PatternBackground.svelte
@@ -1,40 +1,78 @@
+
+
(isMouseOver = false)}
- on:mousemove={({ clientX, clientY }) => {
- isMouseOver = true
- mouse$.next([clientX, clientY])
- }}
+ on:mouseleave={() => isMouseOver$.next(false)}
+ on:mousemove={() => isMouseOver$.next(true)}
aria-hidden
bind:this={wrapperElement}
>
@@ -42,8 +80,7 @@
class="gradient"
style:--x={$gradientWiggle.at(0) + 'px'}
style:--y={$gradientWiggle.at(1) + 'px'}
- style:--size={gradientSize + 'px'}
- class:hidden={!isMouseOver}
+ style:--size={$gradientSize$ + 'px'}
>