Replace welcome modal video with GIF for mobile compatibility (#2011)
Browse filesReplace welcome modal video with optimized GIF for mobile compatibility
Videos with autoplay don't work reliably on mobile browsers. This change
replaces the external CDN video with a locally hosted animated GIF that
works consistently across all devices.
- Created 2x retina resolution GIF (840x384, renders at 420x192)
- Optimized to 1.08MB with 24-color palette
- 20 frames at 10fps for smooth 2-second loop
- Updated WelcomeModal to use img tag instead of video
- Removes dependency on external CDN
Co-authored-by: Claude <noreply@anthropic.com>
src/lib/components/WelcomeModal.svelte
CHANGED
|
@@ -19,12 +19,11 @@
|
|
| 19 |
<div
|
| 20 |
class="relative -mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
|
| 21 |
>
|
| 22 |
-
<
|
| 23 |
class="size-full object-cover"
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
></video>
|
| 28 |
<!-- <h2
|
| 29 |
class="flex translate-y-1 items-center text-3xl font-semibold text-gray-900 dark:text-gray-100"
|
| 30 |
>
|
|
|
|
| 19 |
<div
|
| 20 |
class="relative -mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
|
| 21 |
>
|
| 22 |
+
<img
|
| 23 |
class="size-full object-cover"
|
| 24 |
+
src="/huggingchat/omni-welcome.gif"
|
| 25 |
+
alt="Omni AI model router animation"
|
| 26 |
+
/>
|
|
|
|
| 27 |
<!-- <h2
|
| 28 |
class="flex translate-y-1 items-center text-3xl font-semibold text-gray-900 dark:text-gray-100"
|
| 29 |
>
|
static/huggingchat/omni-welcome.gif
ADDED
|
Git LFS Details
|