Design
Designing the swap deck
Why today's picks are a finite stack of cards instead of an infinite feed, and what we learned building the drag physics.
The swap deck is the first thing you see on Brtr’s home screen and the only part of the app we’d call a signature. It’s a stack of cards. You drag one right to trade, left to pass. When you reach the end it tells you so.
That last sentence is the whole design.
Finite on purpose
The default shape for a browsing surface in 2026 is an infinite feed, and we built one first. It worked, in the sense that people scrolled. It failed in the sense that nobody traded. A feed teaches you that there is always something better one more scroll down, which is precisely the wrong lesson for a product where acting requires you to give up something you own.
So the deck is finite — a small set of picks, matched on what you have, what you’re looking for, and how far away the other person is. When it’s empty you get a card that says Deck cleared, a line explaining you’ve been through today’s picks, and a button to shuffle. We would rather you close the app.
The physics matter more than they should
A drag interaction is either convincing or it’s uncanny, and there isn’t much in between. Ours follows four rules, all of which came from throwing the first version away:
- The card follows your finger on X, but only 35% of your finger on Y. Full vertical tracking makes the card feel weightless and detached.
- Rotation is proportional to horizontal travel, capped around 11 degrees. More than that and it reads as a cartoon.
- The commit threshold is 28% of the card’s width, not a fixed pixel count. On a small phone a fixed threshold feels impossible; on a tablet it feels accidental.
- The
TRADEandPASSstamps fade in between 16px of travel and that threshold, so the stamp reaching full opacity is the signal that you’ve committed. You never have to guess whether you’ve dragged far enough.
The cards underneath matter too. The second card sits at scale(0.94) and 14px down; the third at scale(0.9) and 26px down, both under a faint veil. As the top card leaves, the second grows to full size. It’s a two-line animation that does more for the sense of depth than any shadow we tried.
Porting it to the web
The deck on this website is the same interaction rebuilt in about 150 lines of vanilla JavaScript — same offsets, same thresholds, same stamp timing. Two things changed.
The app rotates by x / screenWidth. On a 1440px desktop browser that produces almost no rotation at all, so the web version rotates by x / cardWidth instead. And because a website has keyboards, the top card is focusable and responds to the left and right arrow keys, which the phone app has no need for.
Under prefers-reduced-motion the rotation is dropped entirely and cards cross-fade rather than flying off-screen. The interaction still works; it just stops moving.