diff --git a/package.json b/package.json
index c517ec5b6a..74d78b66ea 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
 		"@appwrite.io/pink": "0.1.0-next.9",
 		"@appwrite.io/pink-icons": "0.1.0-next.9",
 		"@appwrite.io/repo": "github:appwrite/appwrite",
-		"@fontsource/inter": "^5.0.8",
+		"@splinetool/viewer": "0.9.455",
 		"highlight.js": "^11.8.0",
 		"markdown-it": "^13.0.1",
 		"meilisearch": "^0.35.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b071fb4f4..6f2629ce8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,10 +13,10 @@ dependencies:
     version: 0.1.0-next.9
   '@appwrite.io/repo':
     specifier: github:appwrite/appwrite
-    version: github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a
-  '@fontsource/inter':
-    specifier: ^5.0.8
-    version: 5.0.8
+    version: github.com/appwrite/appwrite/49155a97d42a152f26e188a3910548bc209785d8
+  '@splinetool/viewer':
+    specifier: 0.9.455
+    version: 0.9.455
   highlight.js:
     specifier: ^11.8.0
     version: 11.8.0
@@ -404,10 +404,6 @@ packages:
     resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==}
     dev: true
 
-  /@fontsource/inter@5.0.8:
-    resolution: {integrity: sha512-28knWH1BfOiRalfLs90U4sge5mpQ8ZH6FS0PTT+IZMKrZ7wNHDHRuKa1kQJg+uHcc6axBppnxll+HXM4c7zo/Q==}
-    dev: false
-
   /@humanwhocodes/config-array@0.11.11:
     resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
     engines: {node: '>=10.10.0'}
@@ -477,6 +473,16 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /@lit-labs/ssr-dom-shim@1.1.1:
+    resolution: {integrity: sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==}
+    dev: false
+
+  /@lit/reactive-element@1.6.3:
+    resolution: {integrity: sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+    dev: false
+
   /@markdoc/markdoc@0.3.2:
     resolution: {integrity: sha512-D0SaanaSkTIARvQu+zQqPEpKcvYUBR/mfac9e8JzS89P7eXhiNWPonUN7avRS1saZHpIQWIRote97qT+jGk5Gw==}
     engines: {node: '>=14.7.0'}
@@ -721,6 +727,12 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
+  /@splinetool/viewer@0.9.455:
+    resolution: {integrity: sha512-SqgjM5RJn/hq8mbqteTOS+uFPZrtJDScMzjIr3mXRIV6nL55AMH52fQ5xgETy7IAjZPgKajL0sHyavGIHHZkPA==}
+    dependencies:
+      lit: 2.8.0
+    dev: false
+
   /@sveltejs/adapter-node@1.3.1(@sveltejs/kit@1.25.0):
     resolution: {integrity: sha512-A0VgRQDCDPzdLNoiAbcOxGw4zT1Mc+n1LwT1OmO350R7WxrEqdMUChPPOd1iMfIDWlP4ie6E2d/WQf5es2d4Zw==}
     peerDependencies:
@@ -910,6 +922,10 @@ packages:
       '@types/node': 20.5.0
     dev: true
 
+  /@types/trusted-types@2.0.4:
+    resolution: {integrity: sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==}
+    dev: false
+
   /@types/ttf2eot@2.0.0:
     resolution: {integrity: sha512-L8qPOoITQYiSW+ubfY2pMgY2vGTyM2tHP4rbtoq78xJpQAQcVsPJV3uC7R8fUPYMGSC1K22zXA8uQv777padrQ==}
     dependencies:
@@ -2964,6 +2980,28 @@ packages:
       uc.micro: 1.0.6
     dev: false
 
+  /lit-element@3.3.3:
+    resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+      '@lit/reactive-element': 1.6.3
+      lit-html: 2.8.0
+    dev: false
+
+  /lit-html@2.8.0:
+    resolution: {integrity: sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==}
+    dependencies:
+      '@types/trusted-types': 2.0.4
+    dev: false
+
+  /lit@2.8.0:
+    resolution: {integrity: sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==}
+    dependencies:
+      '@lit/reactive-element': 1.6.3
+      lit-element: 3.3.3
+      lit-html: 2.8.0
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -5143,8 +5181,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a:
-    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/59a850d8b8f2ff3a951b386f65e25a65efb7816a}
+  github.com/appwrite/appwrite/49155a97d42a152f26e188a3910548bc209785d8:
+    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/49155a97d42a152f26e188a3910548bc209785d8}
     name: appwrite
     version: 0.0.0
     dev: false
diff --git a/src/app.html b/src/app.html
index 2697e45834..54720a768d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -35,7 +35,6 @@
 			}
 		}
 	</script>
-	<script type="module" src="https://unpkg.com/@splinetool/viewer@0.9.455/build/spline-viewer.js"></script>
 	<div id="top" style="display: contents">%sveltekit.body%</div>
 </body>
 
diff --git a/src/lib/components/Spline.svelte b/src/lib/components/Spline.svelte
index 0663ca0628..ac73cb6607 100644
--- a/src/lib/components/Spline.svelte
+++ b/src/lib/components/Spline.svelte
@@ -1,51 +1,35 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
-
-	let loaded = writable(false);
-
-	type SplineElement = HTMLElement & {
-		_loaded: boolean;
-	};
-
-	function isSplineElement(el: HTMLElement): el is SplineElement {
-		return '_loaded' in el;
-	}
-
-	const viewer = (node: HTMLElement) => {
-		if (!isSplineElement(node)) {
-			throw new Error('Spline element not found');
-		}
-
-		const onLoad = () => {
-			loaded.set(true);
-			node.shadowRoot?.querySelector('#logo')?.remove(); // Remove Spline logo
-		};
-
-		node?.addEventListener('load-complete', onLoad);
-
-		if (node._loaded) {
-			onLoad();
-		}
-
-		return {
-			destroy() {
-				node?.removeEventListener('load-complete', onLoad);
-			}
-		};
-	};
-
-	const fallback = (node: HTMLElement) => {
-		const destroy = loaded.subscribe((l) => {
-			if (!l) return;
-			setTimeout(() => {
-				node?.style.setProperty('display', 'none');
-			}, 150);
-		});
-
-		return {
-			destroy
-		};
-	};
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+    import type { SplineViewer } from '@splinetool/viewer';
+    import { fade } from 'svelte/transition';
+
+    export let url: SplineViewer['url'];
+    export let width: SplineViewer['width'] = undefined;
+    export let height: SplineViewer['height'] = undefined;
+    export let loading: SplineViewer['loading'] = 'auto';
+
+    let loaded = writable(false);
+    let spline: SplineViewer;
+
+    onMount(async () => {
+        await import('@splinetool/viewer');
+        const onLoad = () => {
+            spline.shadowRoot?.querySelector('#logo')?.remove(); // Remove Spline logo
+
+            setTimeout(() => {
+                loaded.set(true);
+            }, 150);
+        };
+
+        spline.addEventListener('load-complete', onLoad);
+    });
 </script>
 
-<slot {viewer} {fallback} />
+<spline-viewer style="position: absolute;" {url} {width} {height} {loading} bind:this={spline} />
+
+{#if $$slots?.default && !$loaded}
+    <div out:fade={{duration: 50}}>
+        <slot />
+    </div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6a82292e2c..9862c83af9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -410,31 +410,28 @@
 		</div>
 
 		<div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
-			<Spline let:fallback let:viewer>
-				<div
-					class="u-position-absolute aw-is-not-mobile"
-					style:inline-size="768px"
-					style:block-size="768px"
-					style:inset-block-start="0rem"
-					style:z-index="-1"
-					style:left="calc(50% - 384px + 350px)"
-				>
-					<img
-						src="/images/animations/tech-dark.png"
-						width="768"
-						height="768"
-						alt=""
-						style="position: absolute; display: block;"
-						use:fallback
-					/>
-					<spline-viewer
-						url="/images/animations/dark-scene.splinecode"
-						width="768"
-						height="768"
-						use:viewer
-					/>
-				</div>
+			<div
+			class="u-position-absolute aw-is-not-mobile"
+			style:inline-size="768px"
+			style:block-size="768px"
+			style:inset-block-start="0rem"
+			style:z-index="-1"
+			style:left="calc(50% - 384px + 350px)"
+		>
+			<Spline 
+				url="/images/animations/dark-scene.splinecode"
+				loading="eager"
+				width={768}
+				height={768}>
+				<img
+					src="/images/animations/tech-dark.png"
+					width="768"
+					height="768"
+					alt=""
+					style="position: absolute; display: block;"
+				/>
 			</Spline>
+			</div>
 			<div class="aw-big-padding-section-level-2 is-margin-replace-padding">
 				<div class="aw-container u-position-relative">
 					<section class="aw-hero is-align-start">
@@ -467,23 +464,15 @@
 				</div>
 			</div>
 			<div class="aw-big-padding-section-level-2 u-position-relative u-overflow-hidden">
-				<Spline let:viewer>
-					<div
-						class="u-position-absolute u-z-index-0 aw-is-not-mobile"
-						style:width="50%"
-						style:height="100%"
-						style:left="0"
-					>
-						<div style:display="grid" style:place-items="center" style:height="100%">
-							<spline-viewer
-								url="https://prod.spline.design/OQpkUefWdEWkbi4d/scene.splinecode"
-								loading="eager"
-								use:viewer
-							/>
-						</div>
+				<div
+				class="u-position-absolute u-z-index-0 aw-is-not-mobile"
+				style:width="50%"
+				style:height="100%"
+				style:left="0">
+					<div style:display="grid" style:place-items="center" style:height="100%">
+						<Spline loading="eager" url="/images/animations/lines.splinecode"/>
 					</div>
-				</Spline>
-
+				</div>
 				<div class="aw-container u-position-relative">
 					<div class="grid-1-1">
 						<section class="aw-hero is-align-start">
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index f8ab65a026..e8ac409393 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -160,57 +160,28 @@
 			style="position: absolute; display: block;"
 		/>
 	</div>
-	<!-- <Spline let:fallback let:viewer>
-		<div
-			class="u-position-absolute aw-is-not-mobile u-only-light"
-			style:inline-size="768px"
-			style:block-size="768px"
-			style:inset-block-start="26rem"
-			style:z-index="-1"
-			style:left="calc(50% - 384px + 600px)"
-		>
-			<img
-				src="/images/animations/tech-light.png"
-				width="768"
-				height="768"
-				alt=""
-				style="position: absolute; display: block;"
-				use:fallback
-			/>
-			<spline-viewer
-				url="/images/animations/light-scene.splinecode"
-				width="768"
-				height="768"
-				use:viewer
-			/>
-		</div>
-	</Spline> -->
 
-	<Spline let:fallback let:viewer>
-		<div
-			class="u-position-absolute aw-is-not-mobile u-only-dark"
-			style:inline-size="768px"
-			style:block-size="768px"
-			style:inset-block-start="26rem"
-			style:z-index="-1"
-			style:left="calc(50% - 384px + 600px)"
-		>
+	<div
+		class="u-position-absolute aw-is-not-mobile u-only-dark"
+		style:inline-size="768px"
+		style:block-size="768px"
+		style:inset-block-start="26rem"
+		style:z-index="-1"
+		style:left="calc(50% - 384px + 600px)"
+	>
+		<Spline 
+			url="/images/animations/dark-scene.splinecode"
+			width={768}
+			height={768}>
 			<img
 				src="/images/animations/tech-dark.png"
 				width="768"
 				height="768"
 				alt=""
-				style="position: absolute; display: block;"
-				use:fallback
-			/>
-			<spline-viewer
-				url="/images/animations/dark-scene.splinecode"
-				width="768"
-				height="768"
-				use:viewer
+				style="position: absolute;"
 			/>
-		</div>
-	</Spline>
+		</Spline>
+	</div>
 
 	<main class="aw-main-section u-position-relative">
 		<div
diff --git a/static/images/animations/lines.splinecode b/static/images/animations/lines.splinecode
new file mode 100644
index 0000000000..517a5735f3
Binary files /dev/null and b/static/images/animations/lines.splinecode differ