/** * Infinite Draggable Grid — Masonry * * Reliable images via seed-based Picsum (never 404) + multi-fallback. * Viewport-uniqueness packing + GSAP Observer drag. */ gsap.registerPlugin(Observer); /* ── Gallery ─────────────────────────────────── `seed` URLs always resolve (unlike fixed ids that can 404). Ratios create masonry variety. ─────────────────────────────────────────────── */ const GALLERY = [ { seed: "masonry-01", ratio: "3/4", alt: "Portrait soft light" }, { seed: "masonry-02", ratio: "1", alt: "Still life coffee" }, { seed: "masonry-03", ratio: "4/5", alt: "Mountain landscape" }, { seed: "masonry-04", ratio: "2/3", alt: "Fashion editorial" }, { seed: "masonry-05", ratio: "5/4", alt: "Abstract light" }, { seed: "masonry-06", ratio: "4/3", alt: "Interior architecture" }, { seed: "masonry-07", ratio: "3/4", alt: "Studio portrait" }, { seed: "masonry-08", ratio: "1", alt: "Fine dining" }, { seed: "masonry-09", ratio: "5/6", alt: "Street fashion" }, { seed: "masonry-10", ratio: "2/3", alt: "Close-up portrait" }, { seed: "masonry-11", ratio: "4/5", alt: "Restaurant interior" }, { seed: "masonry-12", ratio: "5/4", alt: "Foggy landscape" }, { seed: "masonry-13", ratio: "3/4", alt: "Fashion portrait" }, { seed: "masonry-14", ratio: "1", alt: "Food plate" }, { seed: "masonry-15", ratio: "4/3", alt: "Modern office" }, { seed: "masonry-16", ratio: "2/3", alt: "Studio fashion" }, { seed: "masonry-17", ratio: "5/6", alt: "Natural portrait" }, { seed: "masonry-18", ratio: "5/4", alt: "Night mountains" }, { seed: "masonry-19", ratio: "1", alt: "Street style" }, { seed: "masonry-20", ratio: "4/5", alt: "Kitchen still life" }, { seed: "masonry-21", ratio: "3/4", alt: "Portrait smile" }, { seed: "masonry-22", ratio: "4/3", alt: "Beach seascape" }, { seed: "masonry-23", ratio: "2/3", alt: "City portrait" }, { seed: "masonry-24", ratio: "1", alt: "Green landscape" }, { seed: "masonry-25", ratio: "5/6", alt: "Architecture detail" }, { seed: "masonry-26", ratio: "4/5", alt: "Coffee table" }, { seed: "masonry-27", ratio: "3/4", alt: "Evening city" }, { seed: "masonry-28", ratio: "5/4", alt: "Desert dunes" }, { seed: "masonry-29", ratio: "2/3", alt: "Forest path" }, { seed: "masonry-30", ratio: "1", alt: "Ocean waves" }, { seed: "masonry-31", ratio: "4/3", alt: "Product still" }, { seed: "masonry-32", ratio: "3/4", alt: "Editorial look" }, { seed: "masonry-33", ratio: "5/6", alt: "Soft interior" }, { seed: "masonry-34", ratio: "4/5", alt: "Travel moment" }, { seed: "masonry-35", ratio: "2/3", alt: "Monochrome portrait" }, { seed: "masonry-36", ratio: "1", alt: "Color study" }, ]; /** Dimensions for a ratio at a given base width. */ function sizeForRatio(ratio, base = 520) { const parts = String(ratio).split("/"); const rw = Number(parts[0]) || 1; const rh = Number(parts[1]) || 1; const w = base; const h = Math.max(1, Math.round((base * rh) / rw)); return { w, h }; } /** * Ordered URL candidates for one gallery entry. * Seed-based Picsum always returns a photo (no missing-id 404s). */ function galleryUrls(entry, base = 520) { const { w, h } = sizeForRatio(entry.ratio, base); const seed = encodeURIComponent(entry.seed); const seedAlt = encodeURIComponent(`${entry.seed}-alt`); return [ // Primary — seed always resolves `https://picsum.photos/seed/${seed}/${w}/${h}`, // Same via Fastly CDN (skips redirect hop) `https://fastly.picsum.photos/seed/${seed}/${w}/${h}.jpg`, // Alternate seed if primary seed is blocked/rate-limited `https://picsum.photos/seed/${seedAlt}/${w}/${h}`, `https://fastly.picsum.photos/seed/${seedAlt}/${w}/${h}.jpg`, ]; } /** Deterministic soft gradient if every network source fails. */ function fallbackDataUri(entry, index) { const hues = [12, 28, 200, 260, 320, 160, 40, 190]; const h1 = hues[index % hues.length]; const h2 = hues[(index + 3) % hues.length]; const { w, h } = sizeForRatio(entry.ratio, 400); const svg = ``; return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; } /** * Load first working URL from a list. Resolves with { ok, src }. */ function loadFirstWorking(urls) { return new Promise((resolve) => { let i = 0; function tryNext() { if (i >= urls.length) { resolve({ ok: false, src: "" }); return; } const src = urls[i++]; const img = new Image(); img.decoding = "async"; img.referrerPolicy = "no-referrer"; let settled = false; const done = (ok) => { if (settled) return; settled = true; img.onload = null; img.onerror = null; if (ok) resolve({ ok: true, src }); else tryNext(); }; img.onload = () => done(img.naturalWidth > 0); img.onerror = () => done(false); img.src = src; // Cached hit (guarded so onload can't double-fire) if (img.complete) { done(img.naturalWidth > 0); } } tryNext(); }); } function initInfiniteCardsGrid() { const wrappers = document.querySelectorAll("[data-infinite-grid-init]"); const wheelSpeed = 0.6; const dragSpeed = 1.2; const gridOverscan = 1; const startOffsetY = 0.18; const positionLerp = 0.055; const xToYInfluence = 0.18; const columnSpeedPattern = [1, 0.93, 1.04, 0.9, 1.02]; const minCardScale = 0.58; const scaleLerp = 0.025; wrappers.forEach((wrapper) => { const collection = wrapper.querySelector("[data-infinite-grid-collection]"); const sourceList = wrapper.querySelector("[data-infinite-grid-list]"); if (!collection || !sourceList) return; /** @type {{ entry: object, src: string }[]} */ let resolvedGallery = []; let originalItems = []; let observer = null; let cards = []; let cardElements = []; const timers = {}; const size = {}; const pos = {}; const scale = { current: 1, target: 1 }; function setStatus(status) { wrapper.setAttribute("data-infinite-grid-status", status); } function wrapValue(value, range) { if (!range) return value; return ((value % range) + range) % range; } // ── Resolve every image to a working src ── async function resolveGallery() { const settled = await Promise.all( GALLERY.map(async (entry, index) => { const result = await loadFirstWorking(galleryUrls(entry)); const src = result.ok ? result.src : fallbackDataUri(entry, index); return { entry, src, ok: result.ok }; }) ); // Prefer network images; keep gradient-only as last resort so count stays high const network = settled.filter((s) => s.ok); resolvedGallery = network.length >= 12 ? network : settled; return resolvedGallery; } // ── Build source DOM ────────────────────── function createSourceItems() { sourceList.innerHTML = ""; const frag = document.createDocumentFragment(); resolvedGallery.forEach(({ entry, src }) => { const item = document.createElement("div"); item.className = "infinite-grid__item"; item.dataset.infiniteGridItem = ""; item.dataset.ratio = entry.ratio; const card = document.createElement("div"); card.className = "infinite-grid__card"; card.dataset.infiniteGridCard = ""; const img = document.createElement("img"); img.className = "infinite-grid__card-img"; img.alt = entry.alt; img.decoding = "async"; img.loading = "eager"; img.draggable = false; img.referrerPolicy = "no-referrer"; img.src = src; card.appendChild(img); item.appendChild(card); frag.appendChild(item); }); sourceList.appendChild(frag); originalItems = Array.from( sourceList.querySelectorAll("[data-infinite-grid-item]") ).map((el) => el.cloneNode(true)); } function bindImageFade(img) { const mark = () => img.classList.add("is-loaded"); if (img.complete && img.naturalWidth > 0) { mark(); return Promise.resolve(); } return new Promise((resolve) => { const finish = () => { mark(); resolve(); }; img.addEventListener("load", finish, { once: true }); img.addEventListener( "error", () => { // Should not happen (src already validated) — still unblank the card img.src = fallbackDataUri( { ratio: "3/4", seed: "err" }, Math.floor(Math.random() * 8) ); finish(); }, { once: true } ); }); } function waitForDomImages() { return Promise.all( Array.from(sourceList.querySelectorAll("img")).map(bindImageFade) ); } // ── Measure ─────────────────────────────── function measureSources() { const probe = document.createElement("div"); probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;"; wrapper.appendChild(probe); const measured = originalItems.map((item) => { const clone = item.cloneNode(true); probe.appendChild(clone); const rect = clone.getBoundingClientRect(); probe.removeChild(clone); return { w: rect.width, h: rect.height }; }); probe.remove(); return measured; } function createColumnSpeeds(columns) { return Array.from( { length: columns }, (_, i) => columnSpeedPattern[i % columnSpeedPattern.length] ); } // ── Viewport-uniqueness packer ───────────── function canPlaceUnique(srcIndex, col, y, h, placed, colW, viewW, viewH) { for (let i = 0; i < placed.length; i++) { const p = placed[i]; if (p.srcIndex !== srcIndex) continue; const dx = Math.abs(p.col - col) * colW; const cy = y + h * 0.5; const py = p.y + p.h * 0.5; const dy = Math.abs(cy - py); if (dx < viewW && dy < viewH) return false; } return true; } function packColumns(measured, colCount, minHeight, viewW, viewH) { const colW = measured[0].w; const heights = Array(colCount).fill(0); const placements = []; const total = measured.length; const usage = Array(total).fill(0); let guard = 0; while (Math.min(...heights) < minHeight && guard < 1200) { const col = heights.indexOf(Math.min(...heights)); const y = heights[col]; let bestIndex = -1; let bestScore = Infinity; for (let i = 0; i < total; i++) { const h = measured[i].h; const unique = canPlaceUnique( i, col, y, h, placements, colW, viewW, viewH ); const score = (unique ? 0 : 10_000) + usage[i] * 100 + ((i * 17 + col * 31 + placements.length * 13) % 7); if (score < bestScore) { bestScore = score; bestIndex = i; } } if (bestIndex < 0) bestIndex = placements.length % total; const h = measured[bestIndex].h; placements.push({ srcIndex: bestIndex, col, x: col * colW, y, h, }); heights[col] += h; usage[bestIndex]++; guard++; } const totalH = Math.max(...heights); return { placements, colW, totalW: colCount * colW, totalH, columnHeights: heights.map(() => totalH), }; } // ── Build / rebuild ─────────────────────── function buildGrid() { if (observer) observer.kill(); clearTimeout(timers.resize); clearTimeout(timers.scroll); clearTimeout(timers.scale); gsap.ticker.remove(updateGrid); setStatus("loading"); sourceList.innerHTML = ""; if (!originalItems.length) return; const measured = measureSources(); if (!measured[0]?.w || !measured[0]?.h) return; const colW = measured[0].w; const avgH = measured.reduce((sum, m) => sum + m.h, 0) / measured.length; const columns = Math.max( 2, Math.ceil(wrapper.clientWidth / colW) + gridOverscan * 2 ); const viewW = wrapper.clientWidth; const viewH = wrapper.clientHeight; const minHeight = viewH + avgH * (gridOverscan * 2 + 2); const packed = packColumns(measured, columns, minHeight, viewW, viewH); const columnSpeeds = createColumnSpeeds(columns); const centerColumn = Math.floor(columns / 2); size.colW = packed.colW; size.totalW = packed.totalW; size.totalH = packed.totalH; size.avgH = avgH; cards = []; cardElements = []; gsap.set(collection, { x: 0, y: 0, force3D: true }); collection.style.width = `${size.totalW}px`; collection.style.height = `${size.totalH}px`; const fragment = document.createDocumentFragment(); packed.placements.forEach((p, i) => { const item = originalItems[p.srcIndex].cloneNode(true); const card = item.querySelector("[data-infinite-grid-card]"); const img = item.querySelector("img"); item.style.width = `${packed.colW}px`; item.style.height = `${p.h}px`; item.style.aspectRatio = "auto"; if (img) { img.loading = "eager"; img.decoding = "async"; img.draggable = false; img.referrerPolicy = "no-referrer"; // Re-apply resolved src (cache hit from preload) const src = img.getAttribute("src") || img.src; img.src = src; } cards.push({ baseX: p.x, baseY: p.y, col: p.col, colH: packed.columnHeights[p.col], startY: (p.col - centerColumn) * avgH * startOffsetY, ySpeed: columnSpeeds[p.col], xSetter: gsap.quickSetter(item, "x", "px"), ySetter: gsap.quickSetter(item, "y", "px"), }); if (card) cardElements.push(card); if (i >= originalItems.length) item.setAttribute("aria-hidden", "true"); fragment.appendChild(item); }); sourceList.appendChild(fragment); gsap.set(cardElements, { force3D: true }); pos.startX = wrapper.clientWidth * 0.5 - centerColumn * size.colW - size.colW * 0.5; pos.startY = wrapper.clientHeight * 0.5 - size.totalH * 0.22; pos.x = pos.startX; pos.y = pos.startY; pos.targetX = pos.x; pos.targetY = pos.y; scale.current = 1; scale.target = 1; updateGrid(); gsap.ticker.add(updateGrid); observer = Observer.create({ target: wrapper, type: "wheel,touch,pointer", preventDefault: true, dragMinimum: 3, onPress() { setStatus("dragging"); }, onRelease() { setStatus("idle"); }, onStop() { setStatus("idle"); }, onChange: handleMovement, }); waitForDomImages().then(() => { requestAnimationFrame(() => setStatus("idle")); }); } // ── Frame update ────────────────────────── function updateGrid() { pos.x += (pos.targetX - pos.x) * positionLerp; pos.y += (pos.targetY - pos.y) * positionLerp; scale.current += (scale.target - scale.current) * scaleLerp; const offsetX = size.colW * gridOverscan; const offsetY = size.avgH * gridOverscan; const scrollY = pos.y - pos.startY; cards.forEach( ({ baseX, baseY, colH, startY, ySpeed, xSetter, ySetter }) => { xSetter(wrapValue(baseX + pos.x + offsetX, size.totalW) - offsetX); ySetter( wrapValue( baseY + pos.startY + startY + scrollY * ySpeed + offsetY, colH ) - offsetY ); } ); gsap.set(cardElements, { scale: scale.current }); } // ── Input ───────────────────────────────── function handleMovement(self) { const isWheel = self.event.type === "wheel"; const speed = isWheel ? wheelSpeed : dragSpeed; const deltaX = gsap.utils.clamp(-80, 80, self.deltaX * speed); const deltaY = gsap.utils.clamp(-80, 80, self.deltaY * speed); const moveX = isWheel ? -deltaX : deltaX; const moveY = isWheel ? -deltaY : deltaY; const strength = gsap.utils.clamp( 0, 1, Math.max(Math.abs(deltaX), Math.abs(deltaY)) / 80 ); if (isWheel) { setStatus("scrolling"); clearTimeout(timers.scroll); timers.scroll = setTimeout(() => setStatus("idle"), 200); } scale.target = gsap.utils.interpolate(1, minCardScale, strength); clearTimeout(timers.scale); timers.scale = setTimeout(() => { scale.target = 1; }, 130); pos.targetX += moveX; pos.targetY += moveY + moveX * xToYInfluence; } function handleMouseLeave() { setStatus("idle"); scale.target = 1; if (observer) { observer.disable(); observer.enable(); } } // ── Events ──────────────────────────────── window.addEventListener("resize", () => { clearTimeout(timers.resize); timers.resize = setTimeout(buildGrid, 200); }); document.documentElement.addEventListener("mouseleave", handleMouseLeave); // Boot: resolve every URL → build sources → pack grid setStatus("loading"); resolveGallery() .then(() => { createSourceItems(); buildGrid(); }) .catch(() => { // Absolute last resort — gradients only resolvedGallery = GALLERY.map((entry, index) => ({ entry, src: fallbackDataUri(entry, index), ok: false, })); createSourceItems(); buildGrid(); }); }); } document.addEventListener("DOMContentLoaded", initInfiniteCardsGrid);

Infinite Draggable Grid (Masonary)