Clip-Path Lightbox Expand

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

initDemoShell({
  title: 'Clip-Path Lightbox',
  category: 'css-canvas',
  tech: ['gsap', 'clip-path', 'lightbox', 'keyboard-nav'],
});

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

// ── Card data ─────────────────────────────────────────────────────────────────
const cards = Array.from(document.querySelectorAll('.gallery-card'));
const lightbox = document.getElementById('lightbox');
const lbArt = document.getElementById('lb-art');
const lbTitle = document.getElementById('lb-title');
const lbSub = document.getElementById('lb-sub');
const lbBody = document.getElementById('lb-body');
const lbClose = document.getElementById('lb-close');
const lbPrev = document.getElementById('lb-prev');
const lbNext = document.getElementById('lb-next');

let currentIndex = -1;
let isOpen = false;

// ── Get the card's screen rect expressed as CSS inset ─────────────────────────
function getInsetFromRect(rect) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const top = rect.top;
  const right = vw - rect.right;
  const bottom = vh - rect.bottom;
  const left = rect.left;
  return { top, right, bottom, left };
}

function insetToString({ top, right, bottom, left }) {
  return `inset(${top}px ${right}px ${bottom}px ${left}px round 4px)`;
}

// ── Open lightbox ─────────────────────────────────────────────────────────────
function openLightbox(index) {
  const card = cards[index];
  const rect = card.getBoundingClientRect();
  const inset = getInsetFromRect(rect);

  currentIndex = index;
  isOpen = true;

  // Populate content
  const d = card.dataset;
  const artClass = card.querySelector('.gc-art').className.split(' ').find(c => c.startsWith('gc-art--'));
  lbArt.className = 'lb-art ' + artClass;
  lbTitle.textContent = d.title;
  lbSub.textContent = d.sub;
  lbBody.textContent = d.body;

  // Show the lightbox — start clipped to card position
  lightbox.removeAttribute('hidden');
  gsap.set(lightbox, { clipPath: insetToString(inset) });

  // Animate to fullscreen
  if (!reduced) {
    gsap.to(lightbox, {
      clipPath: 'inset(0px 0px 0px 0px round 0px)',
      duration: 0.55,
      ease: 'expo.out',
    });

    // Content reveals after clip path opens
    gsap.set([lbTitle, lbSub, lbBody, lbClose], { opacity: 0, y: 16 });
    gsap.to([lbTitle, lbSub, lbBody, lbClose], {
      opacity: 1, y: 0,
      duration: 0.5,
      stagger: 0.07,
      ease: 'expo.out',
      delay: 0.3,
    });
  } else {
    gsap.set(lightbox, { clipPath: 'inset(0px 0px 0px 0px round 0px)' });
  }

  document.body.style.overflow = 'hidden';
  lbClose.focus();
}

// ── Close lightbox ────────────────────────────────────────────────────────────
function closeLightbox() {
  if (!isOpen) return;
  const card = cards[currentIndex];
  const rect = card.getBoundingClientRect();
  const inset = getInsetFromRect(rect);

  if (!reduced) {
    gsap.to(lightbox, {
      clipPath: insetToString(inset),
      duration: 0.45,
      ease: 'expo.in',
      onComplete: () => {
        lightbox.setAttribute('hidden', '');
        gsap.set(lightbox, { clipPath: '' });
        isOpen = false;
      },
    });
  } else {
    lightbox.setAttribute('hidden', '');
    isOpen = false;
  }

  document.body.style.overflow = '';
  cards[currentIndex].focus();
}

// ── Navigate ──────────────────────────────────────────────────────────────────
function navigateTo(index) {
  const nextIndex = (index + cards.length) % cards.length;

  if (!reduced) {
    // Slide content out, update, slide in
    gsap.to([lbTitle, lbSub, lbBody], {
      opacity: 0, y: -12, duration: 0.2, ease: 'power2.in',
      onComplete: () => {
        currentIndex = nextIndex;
        const d = cards[nextIndex].dataset;
        const artClass = cards[nextIndex].querySelector('.gc-art').className.split(' ').find(c => c.startsWith('gc-art--'));
        lbArt.className = 'lb-art ' + artClass;
        lbTitle.textContent = d.title;
        lbSub.textContent = d.sub;
        lbBody.textContent = d.body;

        gsap.fromTo([lbTitle, lbSub, lbBody], { opacity: 0, y: 12 }, {
          opacity: 1, y: 0, duration: 0.35, stagger: 0.06, ease: 'expo.out',
        });
      },
    });
  } else {
    currentIndex = nextIndex;
    const d = cards[nextIndex].dataset;
    const artClass = cards[nextIndex].querySelector('.gc-art').className.split(' ').find(c => c.startsWith('gc-art--'));
    lbArt.className = 'lb-art ' + artClass;
    lbTitle.textContent = d.title;
    lbSub.textContent = d.sub;
    lbBody.textContent = d.body;
  }
}

// ── Event listeners ───────────────────────────────────────────────────────────
cards.forEach((card, i) => {
  card.addEventListener('click', () => openLightbox(i));
  card.setAttribute('tabindex', '0');
  card.setAttribute('role', 'button');
  card.setAttribute('aria-label', `Open ${card.dataset.title}`);
  card.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLightbox(i); }
  });
});

lbClose.addEventListener('click', closeLightbox);
lbPrev.addEventListener('click', () => navigateTo(currentIndex - 1));
lbNext.addEventListener('click', () => navigateTo(currentIndex + 1));

document.addEventListener('keydown', (e) => {
  if (!isOpen) return;
  if (e.key === 'Escape') closeLightbox();
  if (e.key === 'ArrowLeft')  navigateTo(currentIndex - 1);
  if (e.key === 'ArrowRight') navigateTo(currentIndex + 1);
});

// ── Entrance animations ───────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.page-header > *', { opacity: 0, y: 20 });
  gsap.to('.page-header > *', {
    opacity: 1, y: 0, duration: 0.8, stagger: 0.1, ease: 'expo.out', delay: 0.3,
  });

  cards.forEach((card, i) => {
    gsap.set(card, { opacity: 0, scale: 0.96 });
    gsap.to(card, {
      opacity: 1, scale: 1,
      duration: 0.7,
      ease: 'expo.out',
      delay: i * 0.08,
      scrollTrigger: {
        trigger: '.gallery-grid',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Motion toggle ─────────────────────────────────────────────────────────────
window.addEventListener('motion-preference', (e) => {
  gsap.globalTimeline.paused(e.detail.reduced);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip-Path Lightbox Expand</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
</head>
<body>

  <div class="page">

    <header class="page-header">
      <span class="label">Technique Demo</span>
      <h1>Clip-Path<br><em>Lightbox</em></h1>
      <p>Cards expand to fullscreen using <code>clip-path: inset()</code> animated from the card's exact position and size. No fixed positioning — pure geometric expansion.</p>
    </header>

    <!-- Gallery grid -->
    <section class="gallery-section">
      <div class="gallery-label">
        <span class="label">Click any card to expand</span>
      </div>
      <div class="gallery-grid" id="gallery-grid">

        <article class="gallery-card" data-id="1" data-color-a="#1a0a2e" data-color-b="#4a1060" data-accent="#c060ff" data-title="Aurora Study" data-sub="Iceland · 2024" data-body="Shot at 2am during peak solar activity. The entire sky moved like a living thing — cyan ribbons folding into violet, then pink.">
          <div class="gc-art gc-art--1" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Aurora Study</h3>
            <span>Iceland · 2024</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card" data-id="2" data-color-a="#0a1a10" data-color-b="#0a3020" data-accent="#40e080" data-title="Forest Floor" data-sub="Patagonia · 2023" data-body="Six hours lying prone in the undergrowth. Waiting for the light to move through the canopy at exactly the right angle.">
          <div class="gc-art gc-art--2" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Forest Floor</h3>
            <span>Patagonia · 2023</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card" data-id="3" data-color-a="#1a1000" data-color-b="#3a2000" data-accent="#ff9020" data-title="Desert Dusk" data-sub="Atacama · 2024" data-body="The world's driest desert at the moment the sun disappears. Silence so complete you can hear your heartbeat.">
          <div class="gc-art gc-art--3" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Desert Dusk</h3>
            <span>Atacama · 2024</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card gallery-card--wide" data-id="4" data-color-a="#001018" data-color-b="#001a28" data-accent="#20c0ff" data-title="Midnight Ocean" data-sub="Pacific · 2023" data-body="Three days at sea on a research vessel. Bioluminescent plankton turned every wave into a streak of blue fire.">
          <div class="gc-art gc-art--4" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Midnight Ocean</h3>
            <span>Pacific · 2023</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card" data-id="5" data-color-a="#18000a" data-color-b="#300015" data-accent="#ff2060" data-title="Tokyo Neon" data-sub="Tokyo · 2024" data-body="Shinjuku at 3am. The streets belong to the signs, the rain, and whoever chooses to walk through it.">
          <div class="gc-art gc-art--5" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Tokyo Neon</h3>
            <span>Tokyo · 2024</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

      </div>
    </section>

  </div>

  <!-- Lightbox overlay -->
  <div class="lightbox" id="lightbox" aria-modal="true" aria-label="Image lightbox" hidden>
    <div class="lb-art" id="lb-art" aria-hidden="true"></div>
    <div class="lb-content">
      <div class="lb-meta">
        <h2 class="lb-title" id="lb-title"></h2>
        <span class="lb-sub" id="lb-sub"></span>
      </div>
      <p class="lb-body" id="lb-body"></p>
      <button class="lb-close" id="lb-close" aria-label="Close lightbox">✕ Close</button>
    </div>
    <div class="lb-nav">
      <button class="lb-prev" id="lb-prev" aria-label="Previous">←</button>
      <button class="lb-next" id="lb-next" aria-label="Next">→</button>
    </div>
  </div>

  <script type="module" src="script.js"></script>
</body>
</html>