Interactive Deck

Interactive Deck is a code component for both Framer and React TypeScript.

Interactive Deck is a code component for both Framer and React TypeScript. A stack of cards you can fan open on desktop, or swipe through on mobile. This is inspired from Interfacecraft but with the twist of our rich motion and bouncy animations and overall interactions. Check out the Video On desktop the cards fan out. Hover lifts one up. Click and it opens while the others drop into a small stack underneath. Switch cards and each one goes back to its own spot. No reshuffling nonsense. On mobile it's a swipe stack. Any direction works. Top card goes to the bottom. What it is One component, two runtimes. Desktop fan + mobile swipe. Same cards either way. Use it as a Framer code component, or drop in the single-file React TypeScript version (shadcn-style) with framer-motion. What it's for Portfolios, case studies, process steps, product phases, testimonials. Basically anywhere a boring grid would do the job, but you want people poking at it instead. 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 your content, ship. Customization Per-card color, image, title, description, and link Show or hide idle title and description separately Layout: size, squircle corners, padding, text inset Desktop: fan spread, open-stack spread, active/inactive scale, Y offsets, tilt and glare Appearance: tilt on hover, grain, shadow, progressive blur on images Draw-in: stagger, spring, once or replay on enter Responsive One component, auto breakpoints (or force desktop / tablet / mobile) Desktop and tablet use the fan Mobile uses the swipe stack Same cards and copy in both Built so you can check the real behavior in your layout Use directly it into Framer, or copy the React TypeScript file into your app and start swapping in your own cards.

Highly customizable bouncy cards