vanilla · draggable garment archive for a Manila thrift shop

Label 88

A thrift shop's stock as a physical rack: every garment hangs, sways, and drags.

status live · prototyperole designed + built end to end
recorded walkthroughlive →
The rack: drag, sway, accession records, and the rail index, recorded from the live site.
101 pieceseach cut from the shop's own flat-lay photos into a hanging cutout.
56 · 25 · 20tops, bottoms, and dresses, sorted into draggable rails.
15Kthe shop's Instagram following, the audience this archive serves.
drag physicshanger sway driven by drag velocity, with no scroll hijack.
What it solves

The shop sells weekly Instagram drops, and once a piece is posted and gone it disappears back into the feed, unfindable. A standard product grid would treat these one-of-one vintage garments like interchangeable catalog SKUs, which is the opposite of how thrifting actually feels. The design problem was to make browsing the archive feel like working a physical rail, where you push hangers aside and pieces have weight.

The constraint

The source material is the shop's own flat-lay phone photos, not studio shots, so all 101 garments had to be segmented into clean cutouts before anything could hang. The interaction had to use native drag with real hanger physics and never hijack the scroll, and a shop prototype with a test-mode checkout had to sit behind the archive without turning it into a generic store.

Who it serves

A Manila vintage thrift shop that sells out its drops through Instagram DMs.

Who it is for

Turning a catalog into an interaction: a cutout pipeline, drag physics, and a record per piece.

How it works
  1. Garments hang on a rail101 pieces cut from the shop's real flat-lay photos, hung with tape pins: 56 tops, 25 skirts and bottoms, 20 dresses and sets.
  2. Drag them, they swayNative drag with hanger physics driven by drag velocity. No scroll hijack.
  3. Tap for the recordEach piece opens an accession card: size, fabric, shot, one of one.
  4. Pull a railGiant typographic wing names recut the rack and scroll you to it.
The decision that was not obvious

Model the catalog as a rack, not a grid. Every ecommerce instinct points to a responsive product grid; the more honest interface treats each garment as a physical object that hangs, sways from your drag velocity, and reveals an accession card when tapped. The interaction mirrors thrifting itself, pushing pieces along a rail, which makes a one-of-one archive feel scarce and tactile in a way a grid of thumbnails never could.

Built with
vanilla JS cutout pipeline drag + sway physics Stripe test mode