// Mechanisme: gallery-drag-carousel-gallery
import gsap from 'https://esm.sh/[email protected]';
import { Draggable } from 'https://esm.sh/[email protected]/Draggable';
import { InertiaPlugin } from 'https://esm.sh/[email protected]/InertiaPlugin';
gsap.registerPlugin(Draggable, InertiaPlugin);
const track = document.querySelector('.dgg-track');
const wrap = document.querySelector('.dgg-wrap');
const max = -(track.scrollWidth - wrap.clientWidth);
Draggable.create(track, { type: 'x', bounds: { minX: max, maxX: 0 }, inertia: true });
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  gsap.to(track, { x: max, duration: 9, ease: 'none', repeat: -1, yoyo: true });
}

<!-- Skeleton: gallery-drag-carousel-gallery -->
<section class="dgg">
  <header class="dgg__head"><h2>Selected Works</h2></header>
  <div class="dgg-wrap">
    <div class="dgg-track">
      <figure class="dgg-card">
        <div class="dgg-card__img"></div>
        <figcaption>Title — Year</figcaption>
      </figure>
    </div>
  </div>
</section>

/* Styling: gallery-drag-carousel-gallery */
:root {
  --dgg-paper: #efe9df;
  --dgg-ink: #1f1c17;
}
.dgg-card { box-shadow: 0 24px 50px -22px rgba(20,15,8,.45); }
.dgg-card__img { background: linear-gradient(...); /* canvas-painted */ }