From 65e901393bdde22abfe37cb98d4e60cb63a0d517 Mon Sep 17 00:00:00 2001
From: cyph3rasi <cyph3rasi@gmail.com>
Date: Tue, 14 Jul 2026 23:35:05 -0700
Subject: [PATCH] Add color-derived blurred side glow behind timeline images

Hop-State: A_06FP8Z3NA8RHHDAGXSGA42R
Hop-Proposal: R_06FP8Z2X1TX81NY6227KPHR
Hop-Task: T_06FP8YSQSSQRHCQ9FVFBJRG
Hop-Attempt: AT_06FP8YSQSRS998YJX8339S8
---
 src/app/globals.css             | 26 ++++++++++++++++++++++++++
 src/components/BlurredImage.tsx | 24 ++++++++++++++++++++++++
 src/components/PostCard.tsx     |  6 +++++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BlurredImage.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index c966d70..9c16a79 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -451,6 +451,32 @@ a.btn-primary:visited {
   display: block;
 }
 
+/* Fill letterboxed image space with a glow derived from the image itself. */
+.blurred-image-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: #000;
+  isolation: isolate;
+}
+
+.post-media-item .blurred-image-bg {
+  position: absolute;
+  inset: -32px;
+  width: calc(100% + 64px);
+  height: calc(100% + 64px);
+  max-height: none;
+  object-fit: cover;
+  filter: blur(28px) brightness(0.48) saturate(1.15);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.post-media-item .blurred-image-main {
+  position: relative;
+  z-index: 1;
+}
+
 .post-media-item video {
   width: 100%;
   max-height: 360px;
diff --git a/src/components/BlurredImage.tsx b/src/components/BlurredImage.tsx
new file mode 100644
index 0000000..64f1d2a
--- /dev/null
+++ b/src/components/BlurredImage.tsx
@@ -0,0 +1,24 @@
+interface BlurredImageProps {
+    src: string;
+    alt: string;
+}
+
+export default function BlurredImage({ src, alt }: BlurredImageProps) {
+    return (
+        <div className="blurred-image-container">
+            <img
+                src={src}
+                alt=""
+                aria-hidden="true"
+                loading="lazy"
+                className="blurred-image-bg"
+            />
+            <img
+                src={src}
+                alt={alt}
+                loading="lazy"
+                className="blurred-image-main"
+            />
+        </div>
+    );
+}
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
index 38dc5fc..9f1191f 100644
--- a/src/components/PostCard.tsx
+++ b/src/components/PostCard.tsx
@@ -9,6 +9,7 @@ import { Post, LinkPreviewMediaItem } from '@/lib/types';
 import { useAuth } from '@/lib/contexts/AuthContext';
 import { useToast } from '@/lib/contexts/ToastContext';
 import { VideoEmbed } from '@/components/VideoEmbed';
+import BlurredImage from '@/components/BlurredImage';
 import BlurredVideo from '@/components/BlurredVideo';
 import { useFormattedHandle } from '@/lib/utils/handle';
 import { useDomain } from '@/lib/contexts/ConfigContext';
@@ -891,7 +892,10 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
                                             }}
                                         />
                                     ) : (
-                                        <img src={item.url} alt={item.altText || 'Post media'} loading="lazy" />
+                                        <BlurredImage
+                                            src={item.url}
+                                            alt={item.altText || 'Post media'}
+                                        />
                                     )}
                                 </div>
                             );