biew

src/components/sections/Vibes.tsx

···
 
 const BATCH_SIZE = 20
 
+function LazyMedia({ src }: { src: string }) {
+  const [visible, setVisible] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const isVideo = src.endsWith(".mp4") || src.endsWith(".mov") || src.endsWith(".webm")
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: "300px" }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div ref={ref} className="vibe-item">
+      {visible && (
+        isVideo ? (
+          <video src={src} className="vibe-media" controls loop muted preload="none" />
+        ) : (
+          <img src={src} alt="" className="vibe-media" decoding="async" />
+        )
+      )}
+    </div>
+  )
+}
+
 export function Vibes() {
   const [allVibes, setAllVibes] = useState<string[]>([])
   const [visibleCount, setVisibleCount] = useState(BATCH_SIZE)
···
           setVisibleCount((c) => Math.min(c + BATCH_SIZE, allVibes.length))
         }
       },
-      { rootMargin: "400px" }
+      { rootMargin: "600px" }
     )
 
     observer.observe(sentinel)
     return () => observer.disconnect()
   }, [allVibes.length])
 
-  const visible = allVibes.slice(0, visibleCount)
-
   return (
     <div className="vibes-container">
-      {visible.map((vibe, index) => {
-        const isVideo = vibe.endsWith(".mp4") || vibe.endsWith(".mov") || vibe.endsWith(".webm")
-        return isVideo ? (
-          <video key={vibe} src={vibe} className="vibe-item" controls loop muted preload="none" />
-        ) : (
-          <img key={vibe} src={vibe} alt="" className="vibe-item" loading="lazy" decoding="async" />
-        )
-      })}
+      {allVibes.slice(0, visibleCount).map((vibe) => (
+        <LazyMedia key={vibe} src={vibe} />
+      ))}
       {visibleCount < allVibes.length && <div ref={sentinelRef} style={{ height: 1 }} />}
     </div>
   )

styles/globals.css

···
 
 /* Vibes gallery */
 .vibes-container {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: flex-start;
-	gap: 10px;
-	padding: 5rem 2rem 2rem;
+	columns: 4 180px;
+	column-gap: 8px;
+	padding: 5rem 1.5rem 2rem;
 }
 
 .vibe-item {
-	max-width: 25%;
-	height: auto;
-	object-fit: contain;
-	filter: contrast(1.05);
-	transition: transform 0.2s;
+	break-inside: avoid;
+	margin-bottom: 8px;
 	border: 3px solid #fff;
-	margin-bottom: 10px;
+	display: block;
+	transition: transform 0.2s;
+	--rotate: 0deg;
+	transform: rotate(var(--rotate));
+	min-height: 40px;
 }
 
 .vibe-item:hover {
-	transform: scale(1.05) rotate(calc(var(--hover-rotate) * 1deg));
+	transform: rotate(var(--rotate)) scale(1.04);
 	z-index: 10;
-	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+	position: relative;
+	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
 }
 
-/* Random rotations for chaotic effect */
-.vibe-item:nth-child(11n+1) { --hover-rotate: 3; }
-.vibe-item:nth-child(7n+2) { --hover-rotate: -4; }
-.vibe-item:nth-child(5n+3) { --hover-rotate: 2; }
-.vibe-item:nth-child(13n+4) { --hover-rotate: -3; }
-.vibe-item:nth-child(17n+5) { --hover-rotate: 5; }
-.vibe-item:nth-child(19n+6) { --hover-rotate: -2; }
+.vibe-media {
+	width: 100%;
+	height: auto;
+	display: block;
+	filter: contrast(1.05);
+}
 
-/* Random margins for messiness */
-.vibe-item:nth-child(8n) { margin-top: 15px; }
-.vibe-item:nth-child(12n) { margin-left: 10px; }
-.vibe-item:nth-child(9n) { margin-right: 10px; }
-.vibe-item:nth-child(15n) { margin-bottom: 20px; }
+/* Random slight rotations */
+.vibe-item:nth-child(11n+1)  { --rotate: 0.8deg; }
+.vibe-item:nth-child(7n+2)   { --rotate: -1.2deg; }
+.vibe-item:nth-child(5n+3)   { --rotate: 0.5deg; }
+.vibe-item:nth-child(13n+4)  { --rotate: -0.7deg; }
+.vibe-item:nth-child(17n+5)  { --rotate: 1.4deg; }
+.vibe-item:nth-child(19n+6)  { --rotate: -0.4deg; }
+.vibe-item:nth-child(23n+7)  { --rotate: 1deg; }
+.vibe-item:nth-child(3n+8)   { --rotate: -1.5deg; }
 
-@media (max-width: 768px) {
-	.vibe-item {
-		max-width: 45%;
-	}
-}
+/* Irregular margins for messiness */
+.vibe-item:nth-child(8n)  { margin-bottom: 16px; }
+.vibe-item:nth-child(12n) { margin-bottom: 4px; }
+.vibe-item:nth-child(6n)  { margin-bottom: 20px; }
 
 /* Glassmorphism utilities */
 @layer utilities {