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.
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.
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.
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.
Jijo M
