From f88f0bc9ea38fe9f61877d0f5821c77c63ebbef7 Mon Sep 17 00:00:00 2001
From: Steve <contact@stevedylan.dev>
Date: Mon, 26 Jan 2026 21:34:46 -0500
Subject: [PATCH] feat: initial thumb blur

---
 src/lib/components/ProgressiveImage.svelte | 70 ++++++++++++++++++++++
 src/routes/+page.svelte                    | 45 +++++++-------
 src/routes/photo/[slug]/+page.svelte       |  8 ++-
 3 files changed, 102 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/ProgressiveImage.svelte

diff --git a/src/lib/components/ProgressiveImage.svelte b/src/lib/components/ProgressiveImage.svelte
new file mode 100644
index 0000000..d5e5815
--- /dev/null
+++ b/src/lib/components/ProgressiveImage.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  let {
+    src,
+    thumb,
+    alt,
+    class: className = "",
+  }: {
+    src: string;
+    thumb: string;
+    alt: string;
+    class?: string;
+  } = $props();
+
+  let loaded = $state(false);
+  let thumbAspect = $state(0);
+  let thumbImg: HTMLImageElement;
+
+  function onThumbLoad() {
+    if (thumbImg.naturalWidth && thumbImg.naturalHeight) {
+      thumbAspect = thumbImg.naturalWidth / thumbImg.naturalHeight;
+    }
+  }
+
+  $effect(() => {
+    loaded = false;
+    const img = new Image();
+    img.onload = () => {
+      loaded = true;
+    };
+    img.src = src;
+
+    return () => {
+      img.onload = null;
+    };
+  });
+</script>
+
+<div
+  class="progressive-container"
+  style="max-width: 4000px; {thumbAspect ? `aspect-ratio: ${thumbAspect};` : ''}"
+>
+  <img
+    bind:this={thumbImg}
+    src={loaded ? src : thumb}
+    {alt}
+    class="{className} progressive-image"
+    class:progressive-loading={!loaded}
+    onload={onThumbLoad}
+  />
+</div>
+
+<style>
+  .progressive-container {
+    width: 100%;
+  }
+
+  .progressive-container .progressive-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .progressive-image {
+    transition: filter 0.4s ease-out;
+  }
+
+  .progressive-loading {
+    filter: blur(20px);
+  }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a9211f6..5bd6496 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-import type { PageData } from "./$types";
-type ImageItem = PageData["photos"][number];
-let { data }: { data: PageData } = $props();
+  import type { PageData } from "./$types";
+  import ProgressiveImage from "$lib/components/ProgressiveImage.svelte";
+  type ImageItem = PageData["photos"][number];
+  let { data }: { data: PageData } = $props();
 </script>
 
 <div class="bg-[#121113] min-h-screen text-white">
@@ -10,29 +11,33 @@ let { data }: { data: PageData } = $props();
   </div>
 
   {#snippet figure(image: ImageItem)}
-  <div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-2">
-    <a href="/photo/{image.slug}" class="flex-2 min-w-0">
-     	<img class="max-w-full h-auto block" src={image.image} alt={image.title} />
-    </a>
-    <div class="flex flex-col gap-1 flex-1 min-w-0 p-4">
-      <h2 class="text-lg">{image.title.toUpperCase()}</h2>
-      <h3 class="text-sm">{image.make} {image.camera}</h3>
-      <div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4">
-        <p>{image.focalLength}</p>
-        <p>{image.aperture}</p>
-        <p>{image.exposure}</p>
-        <p>ISO {image.iso}</p>
-        <p>-</p>
-        <p class="text-neutral-700 text-xs">{new Date(image.date).toLocaleDateString()}</p>
+    <div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-2">
+      <a href="/photo/{image.slug}" class="flex-2 min-w-0">
+        <ProgressiveImage
+          class="max-w-full h-auto block"
+          src={image.image}
+          thumb={image.thumb}
+          alt={image.title}
+        />
+      </a>
+      <div class="flex flex-col gap-1 flex-1 min-w-0 p-4">
+        <h2 class="text-lg">{image.title.toUpperCase()}</h2>
+        <h3 class="text-sm">{image.make} {image.camera}</h3>
+        <div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4">
+          <p>{image.focalLength}</p>
+          <p>{image.aperture}</p>
+          <p>{image.exposure}</p>
+          <p>ISO {image.iso}</p>
+          <p>-</p>
+          <p class="text-neutral-700 text-xs">{new Date(image.date).toLocaleDateString()}</p>
+        </div>
       </div>
-
     </div>
-  </div>
   {/snippet}
 
   <div class="flex flex-col gap-2 pt-12">
     {#each data.photos as image}
-        {@render figure(image)}
+      {@render figure(image)}
     {/each}
   </div>
 </div>
diff --git a/src/routes/photo/[slug]/+page.svelte b/src/routes/photo/[slug]/+page.svelte
index d2b7ddd..782addf 100644
--- a/src/routes/photo/[slug]/+page.svelte
+++ b/src/routes/photo/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PageData } from "./$types";
+  import ProgressiveImage from "$lib/components/ProgressiveImage.svelte";
   let { data }: { data: PageData } = $props();
 </script>
 
@@ -10,7 +11,12 @@
 
   <div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-16">
     <div class="flex-6 min-w-0">
-      <img class="max-w-full h-auto block" src={data.photo.image} alt={data.photo.title} />
+      <ProgressiveImage
+        class="max-w-full h-auto block"
+        src={data.photo.image}
+        thumb={data.photo.thumb}
+        alt={data.photo.title}
+      />
     </div>
     <div class="flex flex-col p-4 flex-1 min-w-0 justify-between">
       <div class="flex flex-col gap-1 flex-1 min-w-0">
-- 
2.51.2