From 39ec404434ab13d4686f792584da4ba9e814128a Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 29 Jan 2026 05:57:50 -0800
Subject: perf: Optimise landing page performance

---
 src/lib/Landing.svelte     | 20 ++++++++++++++++----
 src/lib/LandingHero.svelte | 28 ++++++++++++----------------
 2 files changed, 28 insertions(+), 20 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 4c824a8d..4a5c7df0 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -187,7 +187,16 @@
           tabindex="0"
           onkeydown={(e) => e.key === 'Enter' && (demoFocused = true)}
         >
-          <img src="https://i.imgur.com/j5vfKbx.gif" alt="Demo" title="Click to expand" />
+          <video
+            autoplay
+            loop
+            muted
+            playsinline
+            poster="/demo/demo-poster.jpg"
+            title="Click to expand"
+          >
+            <source src="/demo/demo.mp4" type="video/mp4" />
+          </video>
         </div>
       </div>
     </div>
@@ -203,7 +212,9 @@
     onkeydown={(e) => e.key === 'Escape' && (demoFocused = false)}
   >
     <div class="demo-focused">
-      <img src="https://i.imgur.com/j5vfKbx.gif" alt="Demo" />
+      <video autoplay loop muted playsinline>
+        <source src="/demo/demo.mp4" type="video/mp4" />
+      </video>
 
       <p class="demo-hint">Click anywhere to close</p>
     </div>
@@ -344,11 +355,12 @@
     transform: scale(1.02);
   }
 
-  .demo-card img {
+  .demo-card video {
     width: 100%;
     height: 100%;
     object-fit: fill;
     border-radius: 8px;
+    pointer-events: none;
   }
 
   .cta {
@@ -392,7 +404,7 @@
     animation: scaleIn 0.2s ease;
   }
 
-  .demo-focused img {
+  .demo-focused video {
     max-width: 90vw;
     max-height: 80vh;
     border-radius: 12px;
diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index b42b91ac..401c976f 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
   import { env } from '$env/dynamic/public';
   import localforage from 'localforage';
-  import { onMount } from 'svelte';
-
-  let visible = $state(false);
-
-  onMount(() => {
-    visible = true;
-  });
 </script>
 
-<section class="hero" class:visible>
+<section class="hero">
   <div class="hero-content">
     <p class="tagline">The AniList Companion</p>
 
@@ -55,16 +48,19 @@
     text-align: center;
     padding: 2rem;
     position: relative;
-    opacity: 0;
-    transform: translateY(20px);
-    transition:
-      opacity 0.6s ease,
-      transform 0.6s ease;
+    animation: heroFadeIn 0.6s ease forwards;
   }
 
-  .hero.visible {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes heroFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   /*.hero-content {
-- 
cgit v1.2.3