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.
Hero sections
Portfolio reveals
Product showcases
Feature carousels
Interactive storytelling
"Pick a card" experiences
Tarot and oracle websites
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
Built to fill any frame or container. Cards scale naturally across desktop and mobile, while backgrounds stay full bleed and content remains centered.
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.
Hero sections
Portfolio reveals
Product showcases
Feature carousels
Interactive storytelling
"Pick a card" experiences
Tarot and oracle websites
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
Built to fill any frame or container. Cards scale naturally across desktop and mobile, while backgrounds stay full bleed and content remains centered.
Jijo M
