Drag Scroll Gallery

Interactive

A horizontal rail you drag, flick, or wheel to scroll, with hand-written inertia, rubber-band ends, and optional flick-to-snap; items scale, tilt, and fade by distance from centre. Keyboard-navigable with role=list and focusable items, and under prefers-reduced-motion it degrades to a plain overflow-x scroller with CSS scroll-snap — no inertia or scaling.

Inspired by Skiper UI — things drag and scroll (pattern) — independently built, not affiliated. Attribution policy

Prism

Fuchsia

Ember

Signal

Violet

Ink

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/drag-scroll-gallery.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/drag-scroll-gallery.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<DragScrollGallery
    className="py-4"
    gap={18}
    snap
    aria-label="Featured shots"
    items={[
      { t: "Prism", c: "#8b5cf6" },
      { t: "Fuchsia", c: "#ec4899" },
      { t: "Ember", c: "#f5a623" },
      { t: "Signal", c: "#22d3ee" },
      { t: "Violet", c: "#8b5cf6" },
      { t: "Ink", c: "#ec4899" },
    ].map((s) => (
      <div
        key={s.t}
        className="grid h-52 w-40 items-end overflow-hidden rounded-2xl p-4 ring-1 ring-white/10"
        style={{ background: `linear-gradient(155deg, ${s.c}, rgba(15,15,16,0.92))` }}
      >
        <div className="flex items-center gap-2 text-sm font-semibold text-white">
          <ImageIcon className="size-4 opacity-80" />
          {s.t}
        </div>
      </div>
    ))}
  />

Props

DragScrollGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
items*	React.ReactNode[]	—	The cards / media to lay out horizontally. Each becomes a focusable list item.
gap	number	20	Space between items, in pixels.
snap	boolean	false	Snap the nearest item to centre when a drag / flick / wheel settles.
accent	string	"#8b5cf6"	Focus-ring colour. Mirrors the site's `--pb-violet` token.
scaleAmount	number	0.16	How much edge items shrink (0 = flat, 0.16 ≈ 84% at the far edge).
rotateAmount	number	6	Peak tilt in degrees applied to items as they pass the centre.