GSAP CSS 3D Infinite Card Deck Portfolio
Overview
Your projects as translucent cards standing in a line that runs off into the distance on a diagonal, in plain CSS 3D. Scrolling slides the deck toward you endlessly, and hovering a card lifts it straight up out of the line and plays its film.
The wheel, a trackpad, a drag along the deck or the arrow keys slide it: forward brings the cards toward you, down and to the left. They leave at the near end and come back at the far end, endlessly, growing toward you and fading in and out at the ends.
Details
- Category
- Gallery
- Interaction
- On Scroll + Drag + On Hover + On Load
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 20 componentsBuilt with the same techniques
No. 015 / Gallery
GSAP CSS 3D Folio Card Fan Portfolio
On Scroll · Drag · On Hover · Mouse Move
No. 017 / Gallery
GSAP Scroll Unfolding Card Wheel Portfolio
On Scroll · On Hover · On Click · Mouse Move · On Load
No. 011 / Gallery
GSAP Infinite Tile Frame Portfolio Archive
On Scroll · Drag · Mouse Move · On Hover · On Load
(02)FAQ
GSAP CSS 3D Infinite Card Deck Portfolio — FAQ
01What do I need to install?
npm install gsap @gsap/react. There's no WebGL: the deck is plain HTML in CSS 3D. It's built for Next.js with Tailwind CSS v4.
02How do I add my own projects?
Pass a projects array: title, category, year, video, poster and summary. Videos work best as 16:10 muted H.264 loops of 6 to 12 seconds and a few MB at most, each with a poster frame. Fewer projects than cards is fine: they repeat to fill the deck.
03Can I put other sections above or below it?
Give it a page of its own. The page doesn't scroll: the wheel, drags and arrow keys slide the deck instead.
04Which fonts does it use?
Your page's own sans for the description and the pill, and your mono font for the number. Nothing extra to load.
05How do I tune the motion?
Every value is in config.ts: how many cards the deck holds, their size and spacing, how much nearer cards grow, the deck's angles (and a steeper one on phones), the translucency and fades, the wheel, drag and flick, how far the open card rises, the intro and the colours.