Throwable Photo Card Deck with Riffle Shuffle in React
Overview
A photo gallery for React and Next.js laid out as a deck of cards on a leather table. Throw a card and it slides with friction, spins and knocks the others. Deal fans them out and Gather riffles them back.
On load the deck riffles in the air, then deals itself across the table, each card sliding to a stop with a spin. The shuffle is a real one. The deck is cut near the middle, cards drop from the bottom of each half with odds that follow how many cards each half has left, and the order you see afterwards is the new order of the deck. The leather, the saddle stitch and each print are baked once onto canvases, and a shadow moves away from each card as it lifts.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 100 / Text
Falling Letters Physics Heading with Canvas
On Load · Drag · On Click
No. 098 / Cards
Crumpled Paper Card You Can Crush and Throw, on Canvas
On Load · On Click · Drag
No. 107 / Gallery
Page Curl Book Flip Animation with Canvas
On Load · Drag · On Hover · On Click
(02)FAQ
Throwable Photo Card Deck with Riffle Shuffle in React — FAQ
01How do I use my own photos?
Pass cards, a list with src and alt for each photo. Six to twelve works best. Photos are cropped to fill the card, and the alt text goes in a list for screen readers, since the cards themselves are on a canvas.
02Does it need a physics library or GSAP plugins?
No. The solver and the throw are written for this component, in the folder you copy. GSAP only fades in the text. Draggable and InertiaPlugin are not used.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Photos must be on your own domain, or served with CORS, so the canvas can draw them. It fills the height of the screen and has its own background.
04What happens with reduced motion?
The cards appear already dealt and no loop runs. Deal and Gather still work, and switch between the spread and the squared deck instantly.