Deck of Cards turns a plain card layout into something people want to play with. Drag a card and it responds like it has real weight. Scroll past it and the deck can pin to the screen and fan out as you scroll, cards flying off one by one in a random or directional spread. Comes in two versions, Framer and React/TypeScript, so you're not locked into one platform.

What is it Two builds sharing the same physics, scroll-jack logic, and shader engine. The Framer version is a paste-in code component with a full property panel. The React version is a single-file, typed component you drop into any React project, no Framer required. Both support a free-drag mode where visitors swipe cards away, and a scroll-jacked sticky mode where the deck animates as the page scrolls, on top of a shader engine for live animated gradient, clouds, plasma, or fluid backgrounds.

Use case Works as a hero opener or a standalone interactive block, anywhere you want a moment of delight instead of another static grid.

Tarot and oracle sites

"Pick a card" games

Portfolio reveals

Feature carousels

Onboarding flows

Who is it for Framer builders who want a component that feels custom-built without touching code, and React/TypeScript developers who want the same interaction without a Framer dependency.

Customization Framer: fully editable through the property panel. React: same options exposed as typed props.

Card count, images, titles, and subtitles

Physics: lift, drag resistance, swipe thresholds

Grain, vignette, and edge masks

Per-side offsets for image and shader backgrounds

Responsive Fills whatever frame or container you give it, phone or desktop. The background is full-bleed by default, and text stays centered on the actual screen, not just the component frame. Adjust card size per breakpoint like any component.