Drag & Scroll Cards

Deck of Cards turns a static card stack into an interactive experience people naturally want to play with. Drag a card and it responds with realistic physics, giving it the feeling of weight instead of simply following your cursor. In scroll mode, the deck pins to the screen and reveals cards one by one as the page moves, with each card flying away in either a random or directional spread.

The background is just as important as the cards themselves. Instead of using a static gradient or image, the built-in shader engine generates animated clouds, flowing gradients, plasma, fluid motion, and other abstract effects in real time. Everything is customizable, so you can create anything from a subtle atmospheric background to a bold hero section.

The component comes in two versions:

• Framer: A plug-and-play code component with a full property panel.

• React + TypeScript: A single typed component for any React project.

Both versions support two interaction modes:

• Free Drag: Visitors can drag and swipe cards naturally.

• Sticky Scroll: The deck pins while cards animate away as the page scrolls.

Perfect For

• Hero sections

• Portfolio reveals

• Product showcases

• Feature carousels

• Interactive storytelling

• "Pick a card" experiences

• Tarot and oracle websites

Customize

• Card count, images, titles, and subtitles

• Card size and spacing

• Drag physics and swipe thresholds

• Random or directional card spread

• Animated cloud, gradient, plasma, and fluid shaders

• Shader colors, speed, and intensity

• Grain, vignette, and edge effects

Responsive

Built to fill any frame or container. Cards scale naturally across desktop and mobile, while backgrounds stay full bleed and content remains centered.