1 files changed, 27 insertions, 13 deletions
diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte
index 48565ce1..390b9c92 100644
--- a/src/lib/Image/ParallaxImage.svelte
+++ b/src/lib/Image/ParallaxImage.svelte
@@ -2,17 +2,31 @@
   import { cubicOut } from 'svelte/easing';
   import { tweened } from 'svelte/motion';
 
-  export let source: string;
-  export let duration = 300 * 1.75;
-  export let easing = cubicOut;
-  export let alternativeText: string;
-  export let classList = '';
-  export let style = '';
-  export let factor = 1.25;
-  export let limit = 300 * 1.75;
-  export let borderRadius = '8px';
-
-  let badgeReference: HTMLImageElement;
+  interface Props {
+    source: string;
+    duration?: any;
+    easing?: any;
+    alternativeText: string;
+    classList?: string;
+    style?: string;
+    factor?: number;
+    limit?: any;
+    borderRadius?: string;
+  }
+
+  let {
+    source,
+    duration = 300 * 1.75,
+    easing = cubicOut,
+    alternativeText,
+    classList = '',
+    style = '',
+    factor = 1.25,
+    limit = 300 * 1.75,
+    borderRadius = '8px'
+  }: Props = $props();
+
+  let badgeReference: HTMLImageElement = $state();
   const mouse = tweened({ x: 0, y: 0 }, { duration, easing });
 
   const handleMouseMove = (event: MouseEvent) => {
@@ -40,7 +54,7 @@
     -$mouse.x / 10
   }deg); border-radius: ${borderRadius}; ${style}`}
   alt={alternativeText}
-  on:mousemove={handleMouseMove}
-  on:mouseleave={handleMouseLeave}
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
   class={classList}
 />