Swipe Deck

A card deck is swiped right, left and up, then an It's a match modal lands with an install button.

Installation

$ pnpm dlx shadcn@latest add @remocn/swipe-deck

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SwipeDeck } from "@/components/remocn/swipe-deck";
 
const SwipeDeckScene = () => (
  <SwipeDeck
    matchWith="Acme"
    initials="MC"
    lines={["Swipe right on what fits.", "Skip the rest.", "Install the match."]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SwipeDeck"
    component={SwipeDeckScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone shows a stack of cards: the cursor swipes the first right to like it, the second left to skip it and the third up to super-like it, then an It's a match modal pops in with two avatars, a heart and an Install button. Pass cards (title, meta, chips, and a scene or src), matchWith and initials; lines are the three captions beside the phone. Ships dark by default and light.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props9

Prop	Type	Default
cards	SwipeCard[]DEFAULT_CARDS Deck cards; the first three are swiped, the fourth sits underneath
matchWith	string"remocn" Name shown in the match modal
initials	string"MC" Initials on the viewer avatar in the match modal
lines	[string, string, string]— Three captions beside the phone, one per beat
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""dark" Light or dark palette
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

cardsSwipeCard[]
Deck cards; the first three are swiped, the fourth sits underneath
DefaultDEFAULT_CARDS
matchWithstring
Name shown in the match modal
Default"remocn"
initialsstring
Initials on the viewer avatar in the match modal
Default"MC"
lines[string, string, string]
Three captions beside the phone, one per beat
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"dark"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters