try heypster

package.json

···
 		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"gsap": "^3.14.2",
+		"heypster-gif": "^3.0.4",
 		"hls.js": "^1.6.15",
 		"leaflet": "^1.9.4",
 		"link-preview-js": "^4.0.0",

pnpm-lock.yaml

···
       gsap:
         specifier: ^3.14.2
         version: 3.14.2
+      heypster-gif:
+        specifier: ^3.0.4
+        version: 3.0.4
       hls.js:
         specifier: ^1.6.15
         version: 1.6.15
···
   hex-rgb@4.3.0:
     resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==, tarball: https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz}
     engines: {node: '>=6'}
+
+  heypster-gif@3.0.4:
+    resolution: {integrity: sha512-GcmzNYxi1MQNipc/aF1zlVP4ACeqdVJZsP4CrVvx/oKW0VZd+Y/iT/EXaMDJL/dCYqx+unmmLPoDdAzIg8gX7w==, tarball: https://registry.npmjs.org/heypster-gif/-/heypster-gif-3.0.4.tgz}
 
   hls.js@1.6.15:
     resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==, tarball: https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz}
···
       function-bind: 1.1.2
 
   hex-rgb@4.3.0: {}
+
+  heypster-gif@3.0.4: {}
 
   hls.js@1.6.15: {}
 

src/lib/cards/GIFCard/EditingGifCard.svelte

···
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { ContentComponentProps } from '../types';
 	import GiphySearchModal from './GiphySearchModal.svelte';
+	import { toggleHeypster } from './heypster.svelte';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 
···
 		isSearchOpen = false;
 	}
 
+	onMount(() => {
+
+		window.addEventListener('heypsterGifClicked', (event) => {
+			if (!isSearchOpen) return;
+			const data = event.detail;
+			console.log(data);
+			item.cardData.url = data.h264;
+			toggleHeypster();
+
+			isSearchOpen = false;
+		});
+	})
+
 	function openSearch() {
 		isSearchOpen = true;
+		toggleHeypster();
 	}
 </script>
 
···
 	{/if}
 </div>
 
-<GiphySearchModal bind:open={isSearchOpen} onselect={handleGifSelect} oncancel={() => (isSearchOpen = false)} />
+<!-- <GiphySearchModal bind:open={isSearchOpen} onselect={handleGifSelect} oncancel={() => (isSearchOpen = false)} /> -->

src/lib/cards/GIFCard/heypster.svelte.ts

···
+import { env } from '$env/dynamic/public';
+import HeypsterGifSDK from 'heypster-gif/index.js';
+
+const heypster = $state({});
+
+function initHeypster() {
+	heypster.sdk = new HeypsterGifSDK(env.PUBLIC_HEYPSTER_API_TOKEN, false, 'en', 'top', 'v3', {
+		provider: 'giphy',
+		key: env.PUBLIC_GIPHY_API_TOKEN
+	});
+}
+
+export function toggleHeypster() {
+	if (!heypster.sdk) initHeypster();
+
+	if (!heypster.sdk.popupElement) {
+		heypster.sdk = heypster.sdk.initialize();
+	}
+
+	heypster.sdk.togglePopup();
+}