Interactive Deck
Interactive Deck is a code component for both Framer and React TypeScript. It's a stack of cards you can fan open on desktop or swipe through on mobile.
Inspired by Interfacecraft, but with a twist: richer motion, bouncy animations, and more tactile interactions throughout.
Desktop Experience
On desktop, the cards fan out. Hovering lifts a card up. Click one and it opens while the others drop into a compact stack underneath.
Switch between cards and each one returns to its original position.
No reshuffling nonsense.
Mobile Experience
On mobile, it becomes a swipe stack.
Swipe in any direction and the top card moves to the bottom of the deck, keeping the interaction quick and natural.
What It Is
One component, two runtimes:
- Desktop fan + mobile swipe
- Same cards in both layouts
- Use it as a Framer code component
- Or drop in the single-file React TypeScript version with
framer-motion - Designed to work in a shadcn-style React setup
What It's For
Perfect for:
- Portfolios
- Case studies
- Process steps
- Product phases
- Testimonials
- Any place where a static grid would work, but you want something people can actually interact with
Who It's For
If you build in Framer or React and you're tired of static card rows, this is for you.
Drop it in, wire up your content, and ship.
Customization
- Per-card color, image, title, description, and link
- Show or hide idle title and description independently
- Layout: card size, squircle corners, padding, and text inset
- Desktop: fan spread, open-stack spread, active/inactive scale, Y offsets, tilt, and glare
- Appearance: hover tilt, grain, shadows, and progressive image blur
- Draw-in animation: stagger, spring, play once, or replay on enter
Responsive
- One component with automatic breakpoints
- Option to force desktop, tablet, or mobile mode
- Desktop and tablet use the fan layout
- Mobile uses the swipe stack
- Same cards and copy across every layout
- Built so you can preview the real responsive behavior directly inside your layout
How to Use It
Use it directly in Framer, or copy the React TypeScript file into your app and start swapping in your own cards.
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.