← Blurr Motion gallery-drag-carousel-minimal
Categorie galleries Tier 1 Techniek #17 Deps gsap, Draggable
01 · Index

Studies in restraint

drag →
01 / 06

Spacing

Restraint as method.

— Note
02 / 06

Hierarchy

Two scales, one ratio.

— Note
03 / 06

Color

Cream, ink, one rule.

— Note
04 / 06

Motion

Quiet ease, short duration.

— Note
05 / 06

Type

Inter at three sizes.

— Note
06 / 06

Form

Right angles, 1px rules.

— Note
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: gallery-drag-carousel-minimal
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('.dcm-track');
const wrap = document.querySelector('.dcm-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: 8, ease: 'none', repeat: -1, yoyo: true });
}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: gallery-drag-carousel-minimal -->
<section class="dcm">
  <header class="dcm__head">
    <span class="dcm__eyebrow">01 · Index</span>
    <h2 class="dcm__title">Studies</h2>
  </header>
  <div class="dcm-wrap">
    <div class="dcm-track">
      <article class="dcm-card">
        <span class="dcm-card__num">01</span>
        <h3>—</h3>
        <p>—</p>
      </article>
    </div>
  </div>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: gallery-drag-carousel-minimal */
:root {
  --dcm-paper: #F4F1EB;
  --dcm-ink: #0A0A0A;
  --dcm-rule: rgba(10,10,10,.16);
}
.dcm { font-family: 'Inter', system-ui, sans-serif; }
.dcm-card { border: 1px solid var(--dcm-rule); }